From faed07395ec5154fa40d2677fef99c37c6ff3fb9 Mon Sep 17 00:00:00 2001
From: myrmidex <myrmidex@myrmidex.net>
Date: Sat, 3 Jan 2026 21:25:29 +0100
Subject: [PATCH] feature - 3 - Fix mobile layout for schedule

---
 .../schedule/schedule-calendar.blade.php      | 130 +++++++++++++-----
 .../schedule/schedule-generator.blade.php     |  15 +-
 resources/views/schedule/index.blade.php      |   2 +-
 3 files changed, 109 insertions(+), 38 deletions(-)

diff --git a/resources/views/livewire/schedule/schedule-calendar.blade.php b/resources/views/livewire/schedule/schedule-calendar.blade.php
index 2eb4ff2..ee91eb4 100644
--- a/resources/views/livewire/schedule/schedule-calendar.blade.php
+++ b/resources/views/livewire/schedule/schedule-calendar.blade.php
@@ -32,55 +32,121 @@ class="px-4 py-2 bg-gray-700 text-accent-blue rounded hover:bg-gray-600 transiti
         </button>
     </div>
 
-    <!-- Calendar Grid -->
-    <div class="grid grid-cols-7 gap-2 mb-4">
-        <!-- Days of week headers -->
-        @foreach(['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] as $day)
-            <div class="text-center text-accent-blue font-bold p-2">{{ $day }}</div>
-        @endforeach
+    <!-- Calendar Grid - Desktop -->
+    <div class="hidden md:block">
+        <div class="grid grid-cols-7 gap-2 mb-4">
+            <!-- Days of week headers -->
+            @foreach(['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] as $day)
+                <div class="text-center text-accent-blue font-bold p-2">{{ $day }}</div>
+            @endforeach
+        </div>
+
+        <div class="grid grid-cols-7 gap-2">
+            @foreach($calendarDays as $dayData)
+                <div class="min-h-[120px] border rounded-lg p-2
+                    {{ $dayData['day'] ? 'bg-gray-500' : 'bg-gray-800' }}
+                    {{ $dayData['isToday'] ? 'border-2 border-accent-blue' : 'border-gray-600' }}">
+
+                    @if($dayData['day'])
+                        <!-- Day number -->
+                        <div class="font-bold mb-2 {{ $dayData['isToday'] ? 'text-accent-blue' : 'text-gray-100' }}">
+                            {{ $dayData['day'] }}
+                        </div>
+
+                        <!-- Scheduled dishes -->
+                        @if($dayData['scheduledDishes']->isNotEmpty())
+                            <div class="space-y-1">
+                                @foreach($dayData['scheduledDishes'] as $scheduled)
+                                    <div class="bg-primary rounded p-1 text-xs text-white flex items-center justify-between">
+                                        <div class="flex items-center">
+                                            <div class="w-4 h-4 bg-white text-primary rounded-full flex items-center justify-center text-xs font-bold mr-1">
+                                                {{ strtoupper(substr($scheduled->user->name, 0, 1)) }}
+                                            </div>
+                                            <span class="truncate">{{ $scheduled->userDish?->dish?->name ?? 'Skipped' }}</span>
+                                        </div>
+
+                                        <!-- Action buttons -->
+                                        <div class="flex space-x-1" x-data="{ showActions: false }">
+                                            <button @click="showActions = !showActions"
+                                                    class="text-white hover:text-gray-300">
+                                                ⋮
+                                            </button>
+
+                                            <div x-show="showActions"
+                                                 @click.away="showActions = false"
+                                                 x-cloak
+                                                 class="absolute bg-gray-700 border border-secondary rounded mt-4 ml-4 shadow-lg z-10">
+                                                <button wire:click="regenerateForUserDate('{{ $dayData['date']->format('Y-m-d') }}', {{ $scheduled->user->id }})"
+                                                        class="block w-full text-left px-3 py-1 text-xs hover:bg-gray-600 text-accent-blue">
+                                                    Regenerate
+                                                </button>
+                                                <button wire:click="skipDay('{{ $dayData['date']->format('Y-m-d') }}', {{ $scheduled->user->id }})"
+                                                        class="block w-full text-left px-3 py-1 text-xs hover:bg-gray-600 text-danger">
+                                                    Skip
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                @endforeach
+                            </div>
+                        @else
+                            <div class="text-gray-400 text-xs">No dishes scheduled</div>
+                        @endif
+                    @endif
+                </div>
+            @endforeach
+        </div>
     </div>
 
-    <div class="grid grid-cols-7 gap-2">
+    <!-- Calendar List - Mobile -->
+    <div class="md:hidden space-y-2">
         @foreach($calendarDays as $dayData)
-            <div class="min-h-[120px] border rounded-lg p-2 
-                {{ $dayData['day'] ? 'bg-gray-500' : 'bg-gray-800' }}
-                {{ $dayData['isToday'] ? 'border-2 border-accent-blue' : 'border-gray-600' }}">
-                
-                @if($dayData['day'])
-                    <!-- Day number -->
-                    <div class="font-bold mb-2 {{ $dayData['isToday'] ? 'text-accent-blue' : 'text-gray-100' }}">
-                        {{ $dayData['day'] }}
+            @if($dayData['day'])
+                <div class="border rounded-lg p-3
+                    {{ $dayData['isToday'] ? 'border-2 border-accent-blue bg-gray-600' : 'border-gray-600 bg-gray-500' }}">
+
+                    <!-- Day header -->
+                    <div class="flex items-center justify-between mb-2">
+                        <div class="font-bold {{ $dayData['isToday'] ? 'text-accent-blue' : 'text-gray-100' }}">
+                            {{ $dayData['date']->format('D, M j') }}
+                            @if($dayData['isToday'])
+                                <span class="text-xs ml-2">(Today)</span>
+                            @endif
+                        </div>
                     </div>
-                    
+
                     <!-- Scheduled dishes -->
                     @if($dayData['scheduledDishes']->isNotEmpty())
-                        <div class="space-y-1">
+                        <div class="space-y-2">
                             @foreach($dayData['scheduledDishes'] as $scheduled)
-                                <div class="bg-primary rounded p-1 text-xs text-white flex items-center justify-between">
+                                <div class="bg-primary rounded p-2 text-sm text-white flex items-center justify-between">
                                     <div class="flex items-center">
-                                        <div class="w-4 h-4 bg-white text-primary rounded-full flex items-center justify-center text-xs font-bold mr-1">
+                                        <div class="w-6 h-6 bg-white text-primary rounded-full flex items-center justify-center text-sm font-bold mr-2">
                                             {{ strtoupper(substr($scheduled->user->name, 0, 1)) }}
                                         </div>
-                                        <span class="truncate">{{ $scheduled->userDish?->dish?->name ?? 'Skipped' }}</span>
+                                        <div>
+                                            <div class="font-medium">{{ $scheduled->userDish?->dish?->name ?? 'Skipped' }}</div>
+                                            <div class="text-xs opacity-75">{{ $scheduled->user->name }}</div>
+                                        </div>
                                     </div>
-                                    
+
                                     <!-- Action buttons -->
-                                    <div class="flex space-x-1" x-data="{ showActions: false }">
-                                        <button @click="showActions = !showActions" 
-                                                class="text-white hover:text-gray-300">
+                                    <div class="flex space-x-2" x-data="{ showActions: false }">
+                                        <button @click="showActions = !showActions"
+                                                class="text-white hover:text-gray-300 p-1">
                                             ⋮
                                         </button>
-                                        
-                                        <div x-show="showActions" 
+
+                                        <div x-show="showActions"
                                              @click.away="showActions = false"
                                              x-cloak
-                                             class="absolute bg-gray-700 border border-secondary rounded mt-4 ml-4 shadow-lg z-10">
+                                             class="absolute right-4 bg-gray-700 border border-secondary rounded shadow-lg z-10">
                                             <button wire:click="regenerateForUserDate('{{ $dayData['date']->format('Y-m-d') }}', {{ $scheduled->user->id }})"
-                                                    class="block w-full text-left px-3 py-1 text-xs hover:bg-gray-600 text-accent-blue">
+                                                    class="block w-full text-left px-4 py-2 text-sm hover:bg-gray-600 text-accent-blue">
                                                 Regenerate
                                             </button>
                                             <button wire:click="skipDay('{{ $dayData['date']->format('Y-m-d') }}', {{ $scheduled->user->id }})"
-                                                    class="block w-full text-left px-3 py-1 text-xs hover:bg-gray-600 text-danger">
+                                                    class="block w-full text-left px-4 py-2 text-sm hover:bg-gray-600 text-danger">
                                                 Skip
                                             </button>
                                         </div>
@@ -89,10 +155,10 @@ class="block w-full text-left px-3 py-1 text-xs hover:bg-gray-600 text-danger">
                             @endforeach
                         </div>
                     @else
-                        <div class="text-gray-400 text-xs">No dishes scheduled</div>
+                        <div class="text-gray-400 text-sm">No dishes scheduled</div>
                     @endif
-                @endif
-            </div>
+                </div>
+            @endif
         @endforeach
     </div>
 
diff --git a/resources/views/livewire/schedule/schedule-generator.blade.php b/resources/views/livewire/schedule/schedule-generator.blade.php
index b8118f5..6f0c7c6 100644
--- a/resources/views/livewire/schedule/schedule-generator.blade.php
+++ b/resources/views/livewire/schedule/schedule-generator.blade.php
@@ -1,6 +1,10 @@
-<div class="bg-gray-700 border-2 border-secondary rounded-lg p-6 mb-6">
-    <h3 class="text-lg font-bold text-accent-blue mb-4">Generate Schedule</h3>
-    
+<div class="bg-gray-700 border-2 border-secondary rounded-lg p-6 mb-6" x-data="{ open: window.innerWidth >= 768 }">
+    <button @click="open = !open" class="w-full flex justify-between items-center md:cursor-default">
+        <h3 class="text-lg font-bold text-accent-blue">Generate Schedule</h3>
+        <span class="md:hidden text-accent-blue" x-text="open ? '−' : '+'"></span>
+    </button>
+
+    <div x-show="open" x-collapse class="mt-4 md:!block" x-cloak>
     <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
         <!-- Month Selection -->
         <div>
@@ -86,8 +90,8 @@ class="px-4 py-2 bg-primary text-white rounded hover:bg-secondary transition-col
             <span wire:loading wire:target="generate">Generating...</span>
         </button>
         
-        <button wire:click="clearMonth" 
-                class="px-4 py-2 bg-danger text-white rounded hover:bg-red-700 transition-colors duration-200">
+        <button wire:click="clearMonth"
+                class="px-4 py-2 border-2 border-danger text-danger rounded hover:bg-danger hover:text-white transition-colors duration-200">
             Clear Month
         </button>
     </div>
@@ -102,4 +106,5 @@ class="px-4 py-2 bg-danger text-white rounded hover:bg-red-700 transition-colors
             Generating schedule...
         </div>
     </div>
+    </div>
 </div>
\ No newline at end of file
diff --git a/resources/views/schedule/index.blade.php b/resources/views/schedule/index.blade.php
index 50de20e..5b8cc0b 100644
--- a/resources/views/schedule/index.blade.php
+++ b/resources/views/schedule/index.blade.php
@@ -1,5 +1,5 @@
 <x-layouts.app>
-    <div class="px-4 sm:px-6 lg:px-8">
+    <div class="px-4 sm:px-6 lg:px-8 pb-12">
         <div class="max-w-7xl mx-auto">
             <livewire:schedule.schedule-calendar />
         </div>