Fixes issue where media player was cutoff for mid width devices

src/app/app.scss

@@ -3,6 +3,7 @@
 // Bar heights (keep in sync so player sits flush below navbar)
 $navbar-height-mobile: 64px;
 $navbar-height-desktop: 52px;
+$player-height: 48px;
 
 app-navbar {
   position: fixed;
@@ -21,7 +22,7 @@ app-media-player {
 }
 
 main {
-  padding-top: calc(#{$navbar-height-mobile} + 44px);
+  padding-top: calc(#{$navbar-height-mobile} + #{$player-height});
 }
 
 @media (min-width: #{$bp-md}) {
@@ -30,6 +31,6 @@ main {
   }
 
   main {
-    padding-top: calc(#{$navbar-height-desktop} + 44px);
+    padding-top: calc(#{$navbar-height-desktop} + #{$player-height});
   }
 }

src/app/hero/hero.component.html

@@ -92,8 +92,8 @@
       (mouseleave)="resumeCarousel()"
     >
     <div class="carousel-track" [class.paused]="carouselPaused">
-      <!-- First set -->
-      @for (uw of underwriters(); track uw.id) {
+      <!-- Three identical sets for seamless infinite loop -->
+      @for (uw of underwriters(); track uw.id + '-set1') {
         <button
           type="button"
           class="carousel-slide"
@@ -107,8 +107,21 @@
           }
         </button>
       }
-      <!-- Duplicate set for seamless loop -->
-      @for (uw of underwriters(); track uw.id + '-dup') {
+      @for (uw of underwriters(); track uw.id + '-set2') {
+        <button
+          type="button"
+          class="carousel-slide"
+          (click)="openTakeover(uw)"
+          [attr.aria-label]="'View ' + uw.name"
+        >
+          @if (uw.logo_url) {
+            <img [src]="resolveImageUrl(uw.logo_url)" [alt]="uw.name + ' logo'" class="carousel-logo">
+          } @else {
+            <span class="carousel-badge">{{ uw.name.charAt(0) }}</span>
+          }
+        </button>
+      }
+      @for (uw of underwriters(); track uw.id + '-set3') {
         <button
           type="button"
           class="carousel-slide"

src/app/hero/hero.component.scss

@@ -198,7 +198,7 @@
   display: flex;
   gap: clamp($spacing-xl, 4vw, $spacing-3xl);
   width: max-content;
-  animation: scroll-carousel 30s linear infinite;
+  animation: scroll-carousel 45s linear infinite;
 
   &.paused {
     animation-play-state: paused;
@@ -211,7 +211,7 @@
   }
 
   to {
-    transform: translateX(-50%);
+    transform: translateX(-66.666%);
   }
 }
 

src/app/media-player/media-player.component.scss

@@ -4,7 +4,7 @@
 .media-player {
   background: var(--color-primary-dark);
   border-bottom: 1px solid rgba(255, 255, 255, 0.15);
-  height: 44px;
+  min-height: 48px;
   display: flex;
   align-items: center;
   overflow: hidden;
@@ -20,7 +20,7 @@
   width: 100%;
   max-width: 800px;
   margin: 0 auto;
-  padding: 0 $spacing-md;
+  padding: $spacing-xs $spacing-md;
   gap: $spacing-sm;
 }
 
@@ -35,9 +35,9 @@
   font-size: 2rem;
   opacity: 0.9;
   transition: opacity $transition-fast;
-  // minimum 44x44 touch target
-  width: 44px;
-  height: 44px;
+  // minimum 48x48 touch target
+  width: 48px;
+  height: 48px;
   display: flex;
   align-items: center;
   justify-content: center;