fix: mobile workshop bounds

Author: Razorbird360

src/components/FlowingWorkshops.astro

@@ -28,12 +28,14 @@ const workshopData = workshops
 const mobileItemCount = Math.min(workshopData.length, Math.floor(workshopData.length * 0.6))
 const desktopItemCount = workshopData.length
 
-// Omg math - different bounds for mobile and desktop
+// Omg math - different bounds for mobile portrait, mobile landscape, and desktop
 const duration = 25
 const topBound = 15
-const mobileBottomBound = 35
+const mobilePortraitBottomBound = 50  
+const mobileLandscapeBottomBound = 35 
 const desktopBottomBound = 55
-const mobileUsableRange = Math.max(0, mobileBottomBound - topBound)
+const mobilePortraitUsableRange = Math.max(0, mobilePortraitBottomBound - topBound)
+const mobileLandscapeUsableRange = Math.max(0, mobileLandscapeBottomBound - topBound)
 const desktopUsableRange = Math.max(0, desktopBottomBound - topBound)
 
 // Helper: Fisher-Yates shuffle
@@ -47,10 +49,25 @@ function shuffle<T>(arr: T[]): T[] {
   return arr
 }
 
-// Create positions for both mobile and desktop
-function createWorkshopItems(count: number, dataSet: typeof workshopData, isMobile: boolean) {
-  const usableRange = isMobile ? mobileUsableRange : desktopUsableRange
-  const bottomBound = isMobile ? mobileBottomBound : desktopBottomBound
+// Create positions for mobile portrait, mobile landscape, and desktop
+function createWorkshopItems(count: number, dataSet: typeof workshopData, mode: 'mobile-portrait' | 'mobile-landscape' | 'desktop') {
+  let usableRange: number
+  let bottomBound: number
+  
+  switch (mode) {
+    case 'mobile-portrait':
+      usableRange = mobilePortraitUsableRange
+      bottomBound = mobilePortraitBottomBound
+      break
+    case 'mobile-landscape':
+      usableRange = mobileLandscapeUsableRange
+      bottomBound = mobileLandscapeBottomBound
+      break
+    case 'desktop':
+      usableRange = desktopUsableRange
+      bottomBound = desktopBottomBound
+      break
+  }
   
   const yPositions = Array.from({ length: count }, (_, k) => {
     const segment = usableRange / Math.max(1, count)
@@ -80,16 +97,38 @@ function createWorkshopItems(count: number, dataSet: typeof workshopData, isMobi
   })
 }
 
-const mobileWorkshopItems = createWorkshopItems(mobileItemCount, workshopData, true)
-const desktopWorkshopItems = createWorkshopItems(desktopItemCount, workshopData, false)
+const mobilePortraitWorkshopItems = createWorkshopItems(mobileItemCount, workshopData, 'mobile-portrait')
+const mobileLandscapeWorkshopItems = createWorkshopItems(mobileItemCount, workshopData, 'mobile-landscape')
+const desktopWorkshopItems = createWorkshopItems(desktopItemCount, workshopData, 'desktop')
 
 ---
 
 <div class="relative overflow-hidden flowing-workshop-container">
-  <!-- Mobile workshops -->
-  {mobileWorkshopItems.map((workshop, index) => (
+  <!-- Mobile workshops - Portrait -->
+  {mobilePortraitWorkshopItems.map((workshop, index) => (
+    <div 
+      class={`absolute w-48 h-36 ${workshop.border} rounded-lg bg-white p-2 flowing-workshop xl:hidden mobile-portrait-only`}
+      style={`
+        top: ${workshop.y}%;
+        --tilt: ${workshop.tilt}deg;
+        transform: translateX(calc(100vw + 200px)) rotate(${workshop.tilt}deg);
+        animation: flow-right-to-left-mobile 25s linear infinite;
+        animation-delay: ${workshop.delay}s;
+      `}
+    >
+      <img 
+        src={workshop.image} 
+        alt={workshop.title}
+        class="w-full h-24 object-cover rounded"
+      />
+      <p class="text-xs font-medium text-center text-gray-800 mt-1 px-1">{workshop.title}</p>
+    </div>
+  ))}
+  
+  <!-- Mobile workshops - Landscape -->
+  {mobileLandscapeWorkshopItems.map((workshop, index) => (
     <div 
-      class={`absolute w-48 h-36 ${workshop.border} rounded-lg bg-white p-2 flowing-workshop xl:hidden`}
+      class={`absolute w-48 h-36 ${workshop.border} rounded-lg bg-white p-2 flowing-workshop xl:hidden mobile-landscape-only`}
       style={`
         top: ${workshop.y}%;
         --tilt: ${workshop.tilt}deg;
@@ -162,26 +201,43 @@ const desktopWorkshopItems = createWorkshopItems(desktopItemCount, workshopData,
 
   @media (max-width: 1279px) {
     .flowing-workshop-container {
-      /* Default mobile height */
       height: 60vh;
     }
 
-    @media (max-aspect-ratio: 4/3) {
+    @media (min-aspect-ratio: 4/3) {
       .flowing-workshop-container {
         height: 70vh;
       }
     }
 
-    @media (max-aspect-ratio: 3/2) {
+    @media (min-aspect-ratio: 3/2) {
       .flowing-workshop-container {
         height: 80vh;
       }
     }
 
-    @media (max-aspect-ratio: 16/9) {
+    @media (min-aspect-ratio: 16/9) {
       .flowing-workshop-container {
         height: 90vh;
       }
     }
+    
+    .mobile-portrait-only {
+      display: block;
+    }
+    
+    .mobile-landscape-only {
+      display: none;
+    }
+    
+    @media (min-aspect-ratio: 4/3) {
+      .mobile-portrait-only {
+        display: none;
+      }
+      
+      .mobile-landscape-only {
+        display: block;
+      }
+    }
   }
 </style>