From d7314aa8b080bf708b76527946ef1852cfcc3c5a Mon Sep 17 00:00:00 2001
From: Linus Rath <139418639+rathlinus@users.noreply.github.com>
Date: Tue, 3 Nov 2026 05:44:10 +0100
Subject: [PATCH] fix: fit the calendar view names on the smallest phones
 instead of sliding them under the buttons

---
 components/calendar/calendar-toolbar.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/components/calendar/calendar-toolbar.tsx b/components/calendar/calendar-toolbar.tsx
index 75fb07763..9e001bb3f 100644
--- a/components/calendar/calendar-toolbar.tsx
+++ b/components/calendar/calendar-toolbar.tsx
@@ -280,13 +280,14 @@ export function CalendarToolbar({
             {/* Each pill is as wide as its label plus an even share of the rest, so a
                 long label ("جدول الأعمال", "Aufgaben") neither wraps nor touches the edge. */}
             <div className="flex items-center gap-1.5">
-              <div className="flex flex-1 border border-border rounded-md overflow-hidden">
+              {/* Past the row's room (Finnish, a large text size) the pills scroll rather than slide under the buttons. */}
+              <div className="flex flex-1 min-w-0 border border-border rounded-md overflow-x-auto scroll-hidden">
                 {views.map((v) => (
                   <button
                     key={v}
                     onClick={() => onViewModeChange(v)}
                     className={cn(
-                      "flex-auto min-h-11 px-1.5 text-[0.6875rem] font-medium transition-colors touch-manipulation",
+                      "flex-auto shrink-0 whitespace-nowrap min-h-11 px-1.5 text-[0.6875rem] font-medium transition-colors touch-manipulation",
                       v === viewMode
                         ? "bg-primary text-primary-foreground"
                         : "text-muted-foreground active:bg-muted"
@@ -303,8 +304,9 @@ export function CalendarToolbar({
                   <Search />
                 </IconButton>
               )}
+              {/* On the smallest phones the view names need its room; the drawer lists the calendars too. */}
               {calendars && selectedCalendarIds && onToggleVisibility && (
-                <div className="relative" ref={dropdownRef}>
+                <div className="relative max-[22.5rem]:hidden" ref={dropdownRef}>
                   <IconButton
                     size="icon-lg"
                     variant="outline"