From 05befc8a247a4ce4cc4c0e6d867a41aabc6196d0 Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Mon, 20 Apr 2026 08:12:11 +0200
Subject: [PATCH] Fix date strip to show all 7 days on mobile

Use CSS grid (grid-cols-7) instead of flex with min-width so all days
always fit. Single-letter day names (M T W T F S S) instead of
three-letter abbreviations to save horizontal space.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/modules/activities/components/DatePickerStrip.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/modules/activities/components/DatePickerStrip.vue b/src/modules/activities/components/DatePickerStrip.vue
index b9ea5cb..b692960 100644
--- a/src/modules/activities/components/DatePickerStrip.vue
+++ b/src/modules/activities/components/DatePickerStrip.vue
@@ -40,11 +40,11 @@ function nextWeek() {
       <ChevronLeft class="h-4 w-4" />
     </Button>
 
-    <div class="flex gap-1 overflow-x-auto flex-1 justify-center">
+    <div class="grid grid-cols-7 flex-1 gap-0.5">
       <button
         v-for="day in days"
         :key="day.toISOString()"
-        class="flex flex-col items-center px-2.5 py-1.5 rounded-lg min-w-[3rem] transition-colors"
+        class="flex flex-col items-center py-1.5 rounded-lg transition-colors"
         :class="{
           'bg-primary text-primary-foreground': isSelected(day),
           'bg-muted/50': isToday(day) && !isSelected(day),
@@ -55,7 +55,7 @@ function nextWeek() {
         <span class="text-[10px] font-medium uppercase leading-none"
           :class="isSelected(day) ? 'text-primary-foreground/70' : 'text-muted-foreground'"
         >
-          {{ format(day, 'EEE') }}
+          {{ format(day, 'EEEEE') }}
         </span>
         <span class="text-sm font-semibold leading-tight mt-0.5">
           {{ format(day, 'd') }}