Mobile UI polish: global font scaling, tighter dashboard, cleaner calendar

Scale down all content text on mobile via .mobile-scale CSS class (excludes
navbar/UMBRA title). Hide calendar event times in month view (Google Calendar
style). Restructure CategoryFilterBar so categories display on a separate row
when toggled instead of being hidden behind the search bar. Reduce dashboard
widget density with hidden badges and tighter spacing on small screens.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/components/dashboard/DashboardPage.tsx

@@ -110,7 +110,7 @@ export default function DashboardPage() {
   return (
     <div className="flex flex-col h-full">
       {/* Header — greeting + date + quick add */}
-      <div className="px-4 md:px-6 pt-6 pb-2 flex items-center justify-between">
+      <div className="px-4 md:px-6 pt-4 sm:pt-6 pb-1 sm:pb-2 flex items-center justify-between">
         <div>
           <h1 className="font-heading text-3xl font-bold tracking-tight animate-fade-in">
             {getGreeting(settings?.preferred_name || undefined)}
@@ -157,7 +157,7 @@ export default function DashboardPage() {
       </div>
 
       <div className="flex-1 overflow-y-auto px-4 md:px-6 pb-6">
-        <div className="space-y-5">
+        <div className="space-y-3 sm:space-y-5">
           {/* Week Timeline */}
           {upcomingData && (
             <div className="animate-slide-up">
@@ -187,7 +187,7 @@ export default function DashboardPage() {
           <AlertBanner alerts={alerts} onDismiss={dismissAlert} onSnooze={snoozeAlert} />
 
           {/* Main Content — 2 columns */}
-          <div className="grid gap-5 lg:grid-cols-5 animate-slide-up" style={{ animationDelay: '100ms', animationFillMode: 'backwards' }}>
+          <div className="grid gap-3 sm:gap-5 lg:grid-cols-5 animate-slide-up" style={{ animationDelay: '100ms', animationFillMode: 'backwards' }}>
             {/* Left: Upcoming feed (wider) */}
             <div className="lg:col-span-3 flex flex-col">
               {upcomingData && upcomingData.items.length > 0 ? (
@@ -207,7 +207,7 @@ export default function DashboardPage() {
             </div>
 
             {/* Right: Countdown + Today's events + todos stacked */}
-            <div className="lg:col-span-2 flex flex-col gap-5">
+            <div className="lg:col-span-2 flex flex-col gap-3 sm:gap-5">
               {data.starred_events.length > 0 && (
                 <CountdownWidget events={data.starred_events} />
               )}

frontend/src/components/dashboard/StatsWidget.tsx

@@ -42,7 +42,7 @@ export default function StatsWidget({ projectStats, totalIncompleteTodos, weathe
   ];
 
   return (
-    <div className="grid gap-2.5 grid-cols-2 lg:grid-cols-4">
+    <div className="grid gap-1.5 sm:gap-2.5 grid-cols-2 sm:grid-cols-4">
       {statCards.map((stat) => (
         <Card
           key={stat.label}

frontend/src/components/dashboard/TrackedProjectsWidget.tsx

@@ -86,7 +86,7 @@ export default function TrackedProjectsWidget() {
                       <span className="text-[11px] text-muted-foreground truncate block">{task.parent_task_title}</span>
                     )}
                   </div>
-                  <span className="text-[11px] text-muted-foreground truncate shrink-0 max-w-[5rem]">{task.project_name}</span>
+                  <span className="text-[11px] text-muted-foreground truncate shrink-0 max-w-[5rem] hidden sm:block">{task.project_name}</span>
                   <span className={cn(
                     'text-xs shrink-0 whitespace-nowrap tabular-nums',
                     overdue ? 'text-red-400' : isToday(dueDate) ? 'text-accent' : 'text-muted-foreground'
@@ -94,7 +94,7 @@ export default function TrackedProjectsWidget() {
                     {isToday(dueDate) ? 'Today' : format(dueDate, 'MMM d')}
                   </span>
                   <span className={cn(
-                    'text-[9px] font-semibold px-1.5 py-0.5 rounded shrink-0',
+                    'text-[9px] font-semibold px-1.5 py-0.5 rounded shrink-0 hidden sm:block',
                     statusBadgeColors[task.status] || 'bg-gray-500/10 text-gray-400'
                   )}>
                     {statusLabels[task.status] || task.status}

frontend/src/components/dashboard/UpcomingWidget.tsx

@@ -75,11 +75,11 @@ export default function UpcomingWidget({ items, days = 7 }: UpcomingWidgetProps)
                         ? format(new Date(item.datetime), 'MMM d, h:mm a')
                         : format(new Date(item.date), 'MMM d')}
                     </span>
-                    <span className={cn('text-[9px] font-semibold uppercase tracking-wider shrink-0 w-14 text-right', config.color)}>
+                    <span className={cn('text-[9px] font-semibold uppercase tracking-wider shrink-0 w-14 text-right hidden sm:block', config.color)}>
                       {config.label}
                     </span>
                     <span className={cn(
-                      'text-[9px] font-semibold px-1.5 py-0.5 rounded shrink-0 w-14 text-center',
+                      'text-[9px] font-semibold px-1.5 py-0.5 rounded shrink-0 w-14 text-center hidden sm:block',
                       item.priority === 'high' ? 'bg-red-500/10 text-red-400' :
                       item.priority === 'medium' ? 'bg-yellow-500/10 text-yellow-400' :
                       item.priority === 'low' ? 'bg-green-500/10 text-green-400' :

frontend/src/components/dashboard/WeekTimeline.tsx

@@ -39,13 +39,13 @@ export default function WeekTimeline({ items }: WeekTimelineProps) {
   }, [weekStart, today, items]);
 
   return (
-    <div className="flex items-stretch gap-2">
+    <div className="flex items-stretch gap-1 sm:gap-2">
       {days.map((day) => (
         <div
           key={day.key}
           onClick={() => navigate('/calendar', { state: { date: day.key, view: 'timeGridDay' } })}
           className={cn(
-            'flex-1 flex flex-col items-center gap-1.5 rounded-lg py-3 px-2 transition-all duration-200 border cursor-pointer',
+            'flex-1 flex flex-col items-center gap-1 sm:gap-1.5 rounded-lg py-2 sm:py-3 px-1 sm:px-2 transition-all duration-200 border cursor-pointer',
             day.isToday
               ? 'bg-accent/10 border-accent/30 shadow-[0_0_12px_hsl(var(--accent-color)/0.15)]'
               : day.isPast
@@ -55,7 +55,7 @@ export default function WeekTimeline({ items }: WeekTimelineProps) {
         >
           <span
             className={cn(
-              'text-[11px] font-medium uppercase tracking-wider',
+              'text-[9px] sm:text-[11px] font-medium uppercase tracking-wider',
               day.isToday ? 'text-accent' : 'text-muted-foreground'
             )}
           >
@@ -63,7 +63,7 @@ export default function WeekTimeline({ items }: WeekTimelineProps) {
           </span>
           <span
             className={cn(
-              'font-heading text-lg font-semibold leading-none',
+              'font-heading text-sm sm:text-lg font-semibold leading-none',
               day.isToday ? 'text-accent' : 'text-foreground'
             )}
           >

frontend/src/components/layout/AppLayout.tsx

@@ -41,7 +41,7 @@ export default function AppLayout() {
                 </Button>
                 <h1 className="text-lg font-bold text-accent ml-3">UMBRA</h1>
               </div>
-              <main className="flex-1 overflow-y-auto">
+              <main className="flex-1 overflow-y-auto mobile-scale">
                 <Outlet />
               </main>
             </div>

frontend/src/components/shared/CategoryFilterBar.tsx

@@ -146,7 +146,9 @@ export default function CategoryFilterBar({
   };
 
   return (
-    <div className="flex items-center gap-2 overflow-x-auto">
+    <div className="flex flex-col gap-2 md:flex-row md:items-center md:gap-2">
+      {/* Top row: pills + search */}
+      <div className="flex items-center gap-2 overflow-x-auto min-w-0 flex-1">
         {/* All pill */}
         <button
           type="button"
@@ -193,9 +195,8 @@ export default function CategoryFilterBar({
           </button>
         ))}
 
-      {/* Categories pill + expandable chips */}
+        {/* Categories pill */}
         {categories.length > 0 && (
-        <>
           <button
             type="button"
             onClick={() => setOtherOpen((p) => !p)}
@@ -207,15 +208,27 @@ export default function CategoryFilterBar({
               Categories
             </span>
           </button>
+        )}
 
-          <div
+        {/* Search */}
-            className="flex items-center gap-1.5 overflow-x-auto transition-all duration-200 ease-out"
+        <div className="flex-1" />
-            style={{
+        <div className="relative shrink-0">
-              maxWidth: otherOpen ? '100vw' : '0px',
+          <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground pointer-events-none" />
-              opacity: otherOpen ? 1 : 0,
+          <Input
-              overflow: 'hidden',
+            ref={searchInputRef}
-            }}
+            type="search"
-          >
+            placeholder="Search..."
+            value={searchValue}
+            onChange={(e) => onSearchChange(e.target.value)}
+            className="w-28 sm:w-52 h-8 pl-8 text-sm ring-inset"
+            aria-label="Search"
+          />
+        </div>
+      </div>
+
+      {/* Expanded categories row — shows below on mobile, inline on desktop */}
+      {categories.length > 0 && otherOpen && (
+        <div className="flex items-center gap-1.5 overflow-x-auto pb-1 md:pb-0">
           {/* "All" chip inside categories — non-draggable */}
           {onSelectAllCategories && (
             <button
@@ -260,25 +273,7 @@ export default function CategoryFilterBar({
             </SortableContext>
           </DndContext>
         </div>
-        </>
       )}
-
-      {/* Spacer */}
-      <div className="flex-1" />
-
-      {/* Search */}
-      <div className="relative shrink-0">
-        <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground pointer-events-none" />
-        <Input
-          ref={searchInputRef}
-          type="search"
-          placeholder="Search..."
-          value={searchValue}
-          onChange={(e) => onSearchChange(e.target.value)}
-          className="w-52 h-8 pl-8 text-sm ring-inset"
-          aria-label="Search"
-        />
-      </div>
     </div>
   );
 }

frontend/src/index.css

@@ -224,16 +224,54 @@ form[data-submitted] input:invalid + button {
 }
 
 
+/* ── Global mobile content scaling ── */
+/* Scales down all page content text on mobile. Navbar and UMBRA title are excluded
+   because they live outside .mobile-scale and use their own sizing. */
+@media (max-width: 767px) {
+  .mobile-scale {
+    font-size: 0.8125rem; /* 13px base instead of 16px */
+  }
+  .mobile-scale h1 {
+    font-size: 1.375rem !important; /* 22px instead of 30px */
+  }
+  .mobile-scale h2 {
+    font-size: 1.125rem !important;
+  }
+  .mobile-scale .text-sm {
+    font-size: 0.6875rem; /* 11px */
+  }
+  .mobile-scale .text-xs {
+    font-size: 0.625rem; /* 10px — floor for readability */
+  }
+  .mobile-scale .text-lg {
+    font-size: 0.9375rem; /* 15px */
+  }
+  .mobile-scale .text-xl {
+    font-size: 1.0625rem; /* 17px */
+  }
+  .mobile-scale .text-2xl {
+    font-size: 1.1875rem; /* 19px */
+  }
+  .mobile-scale .text-3xl {
+    font-size: 1.375rem; /* 22px */
+  }
+}
+
 /* ── FullCalendar mobile overrides ── */
 @media (max-width: 767px) {
   .fc .fc-daygrid-event {
-    font-size: 0.65rem;
+    font-size: 0.6rem;
     padding: 0 2px;
-    line-height: 1.3;
+    line-height: 1.25;
+  }
+
+  /* Hide event times in month view on mobile — Google Calendar style */
+  .fc .fc-daygrid-event .fc-event-time {
+    display: none;
   }
 
   .fc .fc-timegrid-event {
-    font-size: 0.65rem;
+    font-size: 0.6rem;
   }
 
   .fc .fc-timegrid-event .fc-event-main {
@@ -241,21 +279,21 @@ form[data-submitted] input:invalid + button {
   }
 
   .fc .fc-daygrid-day-number {
-    font-size: 0.75rem;
+    font-size: 0.7rem;
     padding: 2px 4px;
   }
 
   .fc .fc-col-header-cell-cushion {
-    font-size: 0.7rem;
+    font-size: 0.65rem;
-    padding: 4px 2px;
+    padding: 3px 2px;
   }
 
   .fc .fc-timegrid-slot-label {
-    font-size: 0.65rem;
+    font-size: 0.6rem;
   }
 
   .fc .fc-daygrid-more-link {
-    font-size: 0.6rem;
+    font-size: 0.55rem;
   }
 }
 /* ── Ambient background animations ── */