aiolabs/webapp
8
0
Fork 0
Code Issues 65 Pull requests Projects Releases Packages Wiki Activity Actions

Fix date strip to show all 7 days on mobile

Browse source 
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>
This commit is contained in:
Padreug 2026-04-20 08:12:11 +02:00
commit 05befc8a24
1 changed files with 3 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/modules/activities/components/DatePickerStrip.vue
View file

@ -40,11 +40,11 @@ function nextWeek() {
<ChevronLeft class="h-4 w-4" /> <ChevronLeft class="h-4 w-4" />
</Button> </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 <button
v-for="day in days" v-for="day in days"
:key="day.toISOString()" :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="{ :class="{
'bg-primary text-primary-foreground': isSelected(day), 'bg-primary text-primary-foreground': isSelected(day),
'bg-muted/50': isToday(day) && !isSelected(day), 'bg-muted/50': isToday(day) && !isSelected(day),
@ -55,7 +55,7 @@ function nextWeek() {
<span class="text-[10px] font-medium uppercase leading-none" <span class="text-[10px] font-medium uppercase leading-none"
:class="isSelected(day) ? 'text-primary-foreground/70' : 'text-muted-foreground'" :class="isSelected(day) ? 'text-primary-foreground/70' : 'text-muted-foreground'"
> >
{{ format(day, 'EEE') }} {{ format(day, 'EEEEE') }}
</span> </span>
<span class="text-sm font-semibold leading-tight mt-0.5"> <span class="text-sm font-semibold leading-tight mt-0.5">
{{ format(day, 'd') }} {{ format(day, 'd') }}