Reset scroll position when switching between places

app/components/place-details.gjs

@@ -367,6 +367,7 @@ export default class PlaceDetails extends Component {
         <PlacePhotosCarousel
           @photos={{this.photos}}
           @name={{this.name}}
+          @resetKey={{this.place.osmId}}
           @scrollToEventId={{this.newlyUploadedPhotoId}}
         />
         <h3>{{this.name}}</h3>

app/components/place-photos-carousel.gjs

@@ -29,6 +29,16 @@ export default class PlacePhotosCarousel extends Component {
     return !this.canScrollRight;
   }
 
+  lastResetKey = null;
+
+  resetScrollPosition = modifier((element, [resetKey]) => {
+    if (resetKey !== undefined && resetKey !== this.lastResetKey) {
+      this.lastResetKey = resetKey;
+      element.scrollLeft = 0;
+      setTimeout(() => this.updateScrollState(), 50);
+    }
+  });
+
   scrollToNewPhoto = modifier((element, [eventId]) => {
     if (eventId && eventId !== this.lastEventId) {
       this.lastEventId = eventId;
@@ -99,6 +109,7 @@ export default class PlacePhotosCarousel extends Component {
         <div
           class="place-photos-carousel-track"
           {{this.setupCarousel}}
+          {{this.resetScrollPosition @resetKey}}
           {{this.scrollToNewPhoto @scrollToEventId}}
           {{on "scroll" this.updateScrollState}}
         >

app/styles/app.css

@@ -215,12 +215,12 @@ body {
 .dropzone {
   border: 2px dashed #ccc;
   border-radius: 8px;
-  padding: 2rem 1.5rem;
   text-align: center;
   transition: all 0.2s ease;
   margin: 1.5rem 0 1rem;
   background-color: rgb(255 255 255 / 2%);
   cursor: pointer;
+  aspect-ratio: 4 / 3;
 }
 
 .dropzone.is-dragging {
@@ -232,9 +232,12 @@ body {
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: center;
   gap: 1rem;
   cursor: pointer;
   color: #898989;
+  width: 100%;
+  height: 100%;
 }
 
 .dropzone-label p {