From cb4b9c6b406e2cf581baa46e5278e5c1d653a799 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A2u=20Cao?= <raucao@kosmos.org>
Date: Fri, 24 Apr 2026 11:01:58 +0100
Subject: [PATCH] Render portrait thumbnails as squares on mobile

A bit too small otherwise
---
 app/components/place-photos-carousel.gjs | 3 ++-
 app/styles/app.css                       | 9 ++++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/app/components/place-photos-carousel.gjs b/app/components/place-photos-carousel.gjs
index f5e4687..4c115bc 100644
--- a/app/components/place-photos-carousel.gjs
+++ b/app/components/place-photos-carousel.gjs
@@ -116,7 +116,8 @@ export default class PlacePhotosCarousel extends Component {
           {{#each this.photos as |photo|}}
             {{! template-lint-disable no-inline-styles }}
             <div
-              class="carousel-slide"
+              class="carousel-slide
+                {{if photo.isLandscape 'landscape' 'portrait'}}"
               style={{photo.style}}
               data-event-id={{photo.eventId}}
             >
diff --git a/app/styles/app.css b/app/styles/app.css
index c1109bd..705293e 100644
--- a/app/styles/app.css
+++ b/app/styles/app.css
@@ -1006,10 +1006,17 @@ abbr[title] {
     flex: 0 0 auto;
     height: 100px;
     width: auto;
-    aspect-ratio: var(--slide-ratio, 16 / 9);
     scroll-snap-align: none;
   }
 
+  .carousel-slide.landscape {
+    aspect-ratio: var(--slide-ratio, 16 / 9);
+  }
+
+  .carousel-slide.portrait {
+    aspect-ratio: 1 / 1;
+  }
+
   .carousel-placeholder {
     display: block;
     background-color: var(--hover-bg);