Fixes issue where media player was cutoff for mid width devices

docker-compose.test.yml

@@ -1,51 +1,48 @@
 services:
-  db:
-    image: docker.io/library/postgres:16-alpine
-    restart: unless-stopped
-    # NOTE: Change POSTGRES_PASSWORD in production. Consider using Docker secrets or
-    # a managed PostgreSQL service instead of local credentials.
-    environment:
-      POSTGRES_DB: kmountain
-      POSTGRES_USER: postgres
-      POSTGRES_PASSWORD: postgres
-    volumes:
-      - pgdata:/var/lib/postgresql/data
-      - pgsocket:/var/run/postgresql
-    healthcheck:
-      test: ["CMD-SHELL", "pg_isready -U postgres"]
-      interval: 5s
-      timeout: 5s
-      retries: 5
-
-  # NOTE: Update KMTN_CORS_ORIGINS in production to your actual domain(s).
-  # Set KMTN_DATABASE_URL to your managed PostgreSQL connection if not using the local db service.
   api:
-    image: truenas.local:35000/kmtnflower-api:latest
-    restart: unless-stopped
-    environment:
-      KMTN_DATABASE_URL: postgresql+asyncpg://postgres:postgres@/kmountain?host=/var/run/postgresql
-      KMTN_CORS_ORIGINS: '["http://truenas.local:4200", "http://truenas.local"]'
-      KMTN_ADMIN_USERNAME: admin
-      KMTN_ADMIN_PASSWORD: 123
-    volumes:
-      - pgsocket:/var/run/postgresql
-    ports:
-      - "8000:8000"
     depends_on:
       db:
         condition: service_healthy
-
-  frontend:
-    image: truenas.local:35000/kmtnflower:latest
-    restart: unless-stopped
     environment:
-      API_UPSTREAM: http://api:8000
+      KMTN_ADMIN_PASSWORD: 123
-      API_PUBLIC_URL: "http://truenas.local:8000"
+      KMTN_ADMIN_USERNAME: admin
+      KMTN_CORS_ORIGINS: '["http://truenas.local:4200", "http://truenas.local"]'
+      KMTN_DATABASE_URL: >-
+        postgresql+asyncpg://postgres:postgres@/kmountain?host=/var/run/postgresql
+    image: truenas.local:35000/kmtnflower-api:latest
+    pull_policy: always
     ports:
-      - "4200:80"
+      - '8000:8000'
+    restart: unless-stopped
+    volumes:
+      - pgsocket:/var/run/postgresql
+  db:
+    environment:
+      POSTGRES_DB: kmountain
+      POSTGRES_PASSWORD: postgres
+      POSTGRES_USER: postgres
+    healthcheck:
+      interval: 5s
+      retries: 5
+      test:
+        - CMD-SHELL
+        - pg_isready -U postgres
+      timeout: 5s
+    image: docker.io/library/postgres:16-alpine
+    restart: unless-stopped
+    volumes:
+      - /mnt/WestTek_Mainframe/vm_data/kmtndata:/var/lib/postgresql/data
+      - pgsocket:/var/run/postgresql
+  frontend:
     depends_on:
       - api
-
+    environment:
+      API_PUBLIC_URL: http://truenas.local:8000
+      API_UPSTREAM: http://api:8000
+    image: truenas.local:35000/kmtnflower:latest
+    pull_policy: always
+    ports:
+      - '4200:80'
+    restart: unless-stopped
 volumes:
-  pgdata:
+  pgsocket: Null
-  pgsocket:

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 -->
+      <!-- Three identical sets for seamless infinite loop -->
-      @for (uw of underwriters(); track uw.id) {
+      @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 + '-set2') {
-      @for (uw of underwriters(); track uw.id + '-dup') {
+        <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
+  // minimum 48x48 touch target
-  width: 44px;
+  width: 48px;
-  height: 44px;
+  height: 48px;
   display: flex;
   align-items: center;
   justify-content: center;