diff --git a/app/components/place-details.gjs b/app/components/place-details.gjs index 6983f74..a8046f9 100644 --- a/app/components/place-details.gjs +++ b/app/components/place-details.gjs @@ -45,6 +45,14 @@ export default class PlaceDetails extends Component { this.isPhotoUploadModalOpen = false; if (typeof eventId === 'string') { this.newlyUploadedPhotoId = eventId; + + // Allow DOM to update first, then scroll to the top to show the new photo in the carousel + setTimeout(() => { + const sidebar = document.querySelector('.sidebar-content'); + if (sidebar) { + sidebar.scrollTop = 0; + } + }, 50); } } diff --git a/app/components/place-photos-carousel.gjs b/app/components/place-photos-carousel.gjs index 73cf244..d4ac75e 100644 --- a/app/components/place-photos-carousel.gjs +++ b/app/components/place-photos-carousel.gjs @@ -38,10 +38,7 @@ export default class PlacePhotosCarousel extends Component { `[data-event-id="${eventId}"]` ); if (targetSlide) { - element.scrollTo({ - left: targetSlide.offsetLeft, - behavior: 'smooth', - }); + element.scrollLeft = targetSlide.offsetLeft; } }, 100); } diff --git a/app/styles/app.css b/app/styles/app.css index 0cc9849..997105b 100644 --- a/app/styles/app.css +++ b/app/styles/app.css @@ -990,8 +990,8 @@ abbr[title] { .carousel-slide { flex: 0 0 auto; height: 100px; - width: calc(100px * var(--slide-ratio, 1.7778)); - aspect-ratio: auto; + width: auto; + aspect-ratio: var(--slide-ratio, 16 / 9); scroll-snap-align: none; }