From e72e656e9d21ff245f00389443da46d30e2ea0ea Mon Sep 17 00:00:00 2001
From: Cassian Andor <259291226+andorcassian@users.noreply.github.com>
Date: Tue, 17 Feb 2026 21:44:02 -0800
Subject: [PATCH] fix: improve mobile responsiveness for calendar grid (#46)

- Remove min-width: 10rem from day cells and day-of-week headers
- Abbreviate day names on mobile (Mon vs Monday)
- Reduce cell height on mobile (h-24 vs h-48)
- Reduce padding on mobile for day cells and events
- Hide event descriptions on mobile, truncate titles
- Show compact event count on mobile
- Remove overflow-x-auto wrapper (no longer needed)

Closes #46
---
 resources/views/calendar.blade.php    |  4 ++--
 resources/views/day-of-week.blade.php |  6 +++---
 resources/views/day.blade.php         | 14 +++++++++-----
 resources/views/event.blade.php       |  6 +++---
 4 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/resources/views/calendar.blade.php b/resources/views/calendar.blade.php
index f84b9c4..e528719 100644
--- a/resources/views/calendar.blade.php
+++ b/resources/views/calendar.blade.php
@@ -10,8 +10,8 @@
     </div>
 
     <div class="flex">
-        <div class="overflow-x-auto w-full">
-            <div class="inline-block min-w-full overflow-hidden">
+        <div class="w-full">
+            <div class="w-full overflow-hidden">
 
                 <div class="w-full flex flex-row">
                     @foreach($monthGrid->first() as $day)
diff --git a/resources/views/day-of-week.blade.php b/resources/views/day-of-week.blade.php
index f141b4e..75cb415 100644
--- a/resources/views/day-of-week.blade.php
+++ b/resources/views/day-of-week.blade.php
@@ -1,8 +1,8 @@
-<div class="flex-1 h-12 border -mt-px -ml-px flex items-center justify-center bg-indigo-100 text-gray-900"
-     style="min-width: 10rem;">
+<div class="flex-1 h-12 border -mt-px -ml-px flex items-center justify-center bg-indigo-100 text-gray-900">
 
     <p class="text-sm">
-        {{ $day->format('l') }}
+        <span class="hidden lg:inline">{{ $day->format('l') }}</span>
+        <span class="lg:hidden">{{ $day->format('D') }}</span>
     </p>
 
 </div>
diff --git a/resources/views/day.blade.php b/resources/views/day.blade.php
index 0a7a436..aec2b1a 100644
--- a/resources/views/day.blade.php
+++ b/resources/views/day.blade.php
@@ -14,8 +14,7 @@
         )
     "
     :class="{ '{{ $dragAndDropClasses }}': dragOver }"
-    class="flex-1 h-40 lg:h-48 border border-gray-200 -mt-px -ml-px"
-    style="min-width: 10rem;">
+    class="flex-1 h-24 lg:h-48 border border-gray-200 -mt-px -ml-px">
 
     {{-- Wrapper for Drag and Drop --}}
     <div
@@ -26,22 +25,27 @@ class="w-full h-full"
             @if($dayClickEnabled)
                 wire:click="onDayClick({{ $day->year }}, {{ $day->month }}, {{ $day->day }})"
             @endif
-            class="w-full h-full p-2 {{ $dayInMonth ? $isToday ? 'bg-yellow-100' : ' bg-white ' : 'bg-gray-100' }} flex flex-col">
+            class="w-full h-full p-1 lg:p-2 {{ $dayInMonth ? $isToday ? 'bg-yellow-100' : ' bg-white ' : 'bg-gray-100' }} flex flex-col">
 
             {{-- Number of Day --}}
             <div class="flex items-center">
                 <p class="text-sm {{ $dayInMonth ? ' font-medium ' : '' }}">
                     {{ $day->format('j') }}
                 </p>
-                <p class="text-xs text-gray-600 ml-4">
+                <p class="text-xs text-gray-600 ml-4 hidden lg:block">
                     @if($events->isNotEmpty())
                         {{ $events->count() }} {{ Str::plural('event', $events->count()) }}
                     @endif
                 </p>
+                <p class="text-xs text-gray-600 ml-1 lg:hidden">
+                    @if($events->isNotEmpty())
+                        {{ $events->count() }}
+                    @endif
+                </p>
             </div>
 
             {{-- Events --}}
-            <div class="p-2 my-2 flex-1 overflow-y-auto">
+            <div class="p-0.5 lg:p-2 my-1 lg:my-2 flex-1 overflow-y-auto">
                 <div class="grid grid-cols-1 grid-flow-row gap-2">
                     @foreach($events as $event)
                         <div
diff --git a/resources/views/event.blade.php b/resources/views/event.blade.php
index e3ea5b0..a66a9d8 100644
--- a/resources/views/event.blade.php
+++ b/resources/views/event.blade.php
@@ -2,7 +2,7 @@
     @if($eventClickEnabled)
         wire:click.stop="onEventClick('{{ $event['id']  }}')"
     @endif
-    class="py-2 px-3 shadow-md cursor-pointer
+    class="py-1 px-1.5 lg:py-2 lg:px-3 shadow-md cursor-pointer
         @if($event['is_multiday'] ?? false)
             @if($event['is_first_day'] ?? false)
                 rounded-l-lg rounded-r-none border-r-0
@@ -17,7 +17,7 @@ class="py-2 px-3 shadow-md cursor-pointer
         @endif
     ">
 
-    <p class="text-sm font-medium">
+    <p class="text-xs lg:text-sm font-medium truncate">
         {{ $event['title'] }}
         @if(($event['is_multiday'] ?? false) && ($event['is_first_day'] ?? false))
             <span class="text-xs text-gray-500 font-normal">
@@ -27,7 +27,7 @@ class="py-2 px-3 shadow-md cursor-pointer
     </p>
 
     @if($event['is_first_day'] ?? true)
-        <p class="mt-2 text-xs">
+        <p class="mt-1 lg:mt-2 text-xs hidden lg:block">
             {{ $event['description'] ?? 'No description' }}
         </p>
     @endif