Show placeholder on mobile when photos not filling space

app/components/place-photos-carousel.gjs

@@ -144,6 +144,8 @@ export default class PlacePhotosCarousel extends Component {
               {{/if}}
             </div>
           {{/each}}
+
+          <div class="carousel-placeholder"></div>
         </div>
 
         {{#if this.showChevrons}}

app/styles/app.css

@@ -906,6 +906,10 @@ abbr[title] {
   overflow: hidden;
 }
 
+.carousel-placeholder {
+  display: none;
+}
+
 .place-header-photo-blur {
   position: absolute;
   top: 0;
@@ -992,6 +996,7 @@ abbr[title] {
   .place-photos-carousel-track {
     scroll-snap-type: none;
     gap: 2px;
+    background-color: #fff;
   }
 
   .carousel-slide {
@@ -1002,6 +1007,13 @@ abbr[title] {
     scroll-snap-align: none;
   }
 
+  .carousel-placeholder {
+    display: block;
+    background-color: var(--hover-bg);
+    flex: 1 1 0%;
+    min-width: 0;
+  }
+
   .place-header-photo.landscape,
   .place-header-photo.portrait {
     object-fit: cover;

tests/integration/components/place-photos-carousel-test.gjs

@@ -40,7 +40,12 @@ module('Integration | Component | place-photos-carousel', function (hooks) {
     assert
       .dom('.place-photos-carousel-wrapper')
       .exists('it renders the wrapper');
-    assert.dom('.carousel-slide').exists({ count: 1 }, 'it renders one slide');
+    assert
+      .dom('.carousel-slide:not(.carousel-placeholder)')
+      .exists({ count: 1 }, 'it renders one real photo slide');
+    assert
+      .dom('.carousel-placeholder')
+      .exists({ count: 1 }, 'it renders one placeholder');
     assert
       .dom('img.place-header-photo')
       .hasAttribute('data-src', 'photo1.jpg', 'it sets the data-src correctly');