rohskiddo/UMBRA
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Merge feature/mobile-responsive into main

Browse Source 
Comprehensive mobile-responsive UI across all frontend pages:
- Global font scaling, responsive grids, progressive disclosure
- Mobile card views, touch-optimized inputs, bottom-sheet DatePicker
- Admin portal responsive tables, evenly spaced tab nav
- KanbanBoard touch drag-and-drop, FullCalendar mobile styling
- isDesktop media query guards for detail panels (no dual mount)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Kyle 2026-03-11 03:14:58 +08:00
commit e51b09f9c5
41 changed files with 1088 additions and 769 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/index.html
View File

@ -3,6 +3,10 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="theme-color" content="#09090b" />
<meta name="mobile-web-app-capable" content="yes" />
<title>UMBRA</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

4
frontend/src/App.tsx
View File

@ -21,7 +21,7 @@ function ProtectedRoute({ children }: { children: React.ReactNode }) {
if (isLoading) {
return (
<div className="flex h-screen items-center justify-center">
<div className="flex h-dvh items-center justify-center">
<div className="text-muted-foreground">Loading...</div>
</div>
);
@ -39,7 +39,7 @@ function AdminRoute({ children }: { children: React.ReactNode }) {
if (isLoading) {
return (
<div className="flex h-screen items-center justify-center">
<div className="flex h-dvh items-center justify-center">
<div className="text-muted-foreground">Loading...</div>
</div>
);

28
frontend/src/components/admin/AdminDashboardPage.tsx
View File

@ -23,9 +23,9 @@ export default function AdminDashboardPage() {
dashboard ? dashboard.total_users - dashboard.active_users : null;
return (
<div className="px-6 py-6 space-y-6 animate-fade-in">
<div className="px-4 md:px-6 py-6 space-y-6 animate-fade-in">
{/* Stats grid */}
<div className="grid gap-2.5 grid-cols-2 lg:grid-cols-5">
<div className="grid gap-2.5 grid-cols-2 md:grid-cols-3 lg:grid-cols-5">
{isLoading ? (
Array.from({ length: 5 }).map((_, i) => (
<Card key={i}>
@ -94,10 +94,10 @@ export default function AdminDashboardPage() {
<table className="w-full text-sm">
<thead>
<tr className="border-b border-border bg-card-elevated/50">
<th className="px-5 py-2.5 text-left text-[11px] uppercase tracking-wider text-muted-foreground font-medium">
<th className="px-3 lg:px-5 py-2.5 text-left text-[11px] uppercase tracking-wider text-muted-foreground font-medium">
Username
</th>
<th className="px-5 py-2.5 text-left text-[11px] uppercase tracking-wider text-muted-foreground font-medium">
<th className="px-3 lg:px-5 py-2.5 text-left text-[11px] uppercase tracking-wider text-muted-foreground font-medium">
When
</th>
</tr>
@ -111,8 +111,8 @@ export default function AdminDashboardPage() {
idx % 2 === 0 ? '' : 'bg-card-elevated/25'
)}
>
<td className="px-5 py-2.5 font-medium">{entry.username}</td>
<td className="px-5 py-2.5 text-xs text-muted-foreground">
<td className="px-3 lg:px-5 py-2.5 font-medium">{entry.username}</td>
<td className="px-3 lg:px-5 py-2.5 text-xs text-muted-foreground">
{getRelativeTime(entry.last_login_at)}
</td>
</tr>
@ -142,16 +142,16 @@ export default function AdminDashboardPage() {
<table className="w-full text-sm">
<thead>
<tr className="border-b border-border bg-card-elevated/50">
<th className="px-5 py-2.5 text-left text-[11px] uppercase tracking-wider text-muted-foreground font-medium">
<th className="px-3 lg:px-5 py-2.5 text-left text-[11px] uppercase tracking-wider text-muted-foreground font-medium">
Action
</th>
<th className="px-5 py-2.5 text-left text-[11px] uppercase tracking-wider text-muted-foreground font-medium">
<th className="px-3 lg:px-5 py-2.5 text-left text-[11px] uppercase tracking-wider text-muted-foreground font-medium hidden sm:table-cell">
Actor
</th>
<th className="px-5 py-2.5 text-left text-[11px] uppercase tracking-wider text-muted-foreground font-medium">
<th className="px-3 lg:px-5 py-2.5 text-left text-[11px] uppercase tracking-wider text-muted-foreground font-medium hidden sm:table-cell">
Target
</th>
<th className="px-5 py-2.5 text-left text-[11px] uppercase tracking-wider text-muted-foreground font-medium">
<th className="px-3 lg:px-5 py-2.5 text-left text-[11px] uppercase tracking-wider text-muted-foreground font-medium">
When
</th>
</tr>
@ -165,7 +165,7 @@ export default function AdminDashboardPage() {
idx % 2 === 0 ? '' : 'bg-card-elevated/25'
)}
>
<td className="px-5 py-2.5">
<td className="px-3 lg:px-5 py-2.5">
<span
className={cn(
'text-[9px] px-1.5 py-0.5 rounded font-medium uppercase tracking-wide whitespace-nowrap',
@ -175,15 +175,15 @@ export default function AdminDashboardPage() {
{entry.action}
</span>
</td>
<td className="px-5 py-2.5 text-xs font-medium">
<td className="px-3 lg:px-5 py-2.5 text-xs font-medium hidden sm:table-cell">
{entry.actor_username ?? (
<span className="text-muted-foreground italic">system</span>
)}
</td>
<td className="px-5 py-2.5 text-xs text-muted-foreground">
<td className="px-3 lg:px-5 py-2.5 text-xs text-muted-foreground hidden sm:table-cell">
{entry.target_username ?? '—'}
</td>
<td className="px-5 py-2.5 text-xs text-muted-foreground whitespace-nowrap">
<td className="px-3 lg:px-5 py-2.5 text-xs text-muted-foreground whitespace-nowrap">
{getRelativeTime(entry.created_at)}
</td>
</tr>

18
frontend/src/components/admin/AdminPortal.tsx
View File

@ -17,32 +17,34 @@ export default function AdminPortal() {
return (
<div className="flex flex-col h-full animate-fade-in">
{/* Portal header with tab navigation */}
<div className="shrink-0 border-b bg-card">
<div className="px-6 h-16 flex items-center gap-4">
<div className="flex items-center gap-2 mr-6">
<div className="shrink-0 border-b bg-card overflow-hidden">
<div className="px-3 md:px-6 h-14 md:h-16 flex items-center gap-2 md:gap-4">
<div className="flex items-center gap-2 shrink-0">
<div className="p-1.5 rounded-md bg-red-500/10">
<ShieldCheck className="h-5 w-5 text-red-400" />
</div>
<h1 className="font-heading text-2xl font-bold tracking-tight">Admin Portal</h1>
<h1 className="font-heading text-base md:text-2xl font-bold tracking-tight">Admin</h1>
</div>
{/* Horizontal tab navigation */}
<nav className="flex items-center gap-1 h-full">
<nav className="flex items-center justify-evenly flex-1 h-full min-w-0 overflow-x-auto">
{tabs.map(({ label, path, icon: Icon }) => {
const isActive = location.pathname.startsWith(path);
return (
<NavLink
key={path}
to={path}
title={label}
aria-label={label}
className={cn(
'flex items-center gap-2 px-4 h-full text-sm font-medium transition-colors duration-150 border-b-2 -mb-px',
'flex items-center justify-center gap-1.5 px-2.5 md:px-4 h-full text-sm font-medium transition-colors duration-150 border-b-2 -mb-px whitespace-nowrap',
isActive
? 'text-accent border-accent'
: 'text-muted-foreground hover:text-foreground border-transparent'
)}
>
<Icon className="h-4 w-4" />
{label}
<Icon className="h-4 w-4 shrink-0" />
<span className="hidden sm:inline">{label}</span>
</NavLink>
);
})}

28
frontend/src/components/admin/ConfigPage.tsx
View File

@ -54,7 +54,7 @@ export default function ConfigPage() {
const totalPages = data ? Math.ceil(data.total / PER_PAGE) : 1;
return (
<div className="px-6 py-6 space-y-6 animate-fade-in">
<div className="px-4 md:px-6 py-6 space-y-6 animate-fade-in">
<Card>
<CardHeader className="flex-row items-center justify-between flex-wrap gap-3">
<div className="flex items-center gap-2">
@ -75,7 +75,7 @@ export default function ConfigPage() {
<Filter className="h-3.5 w-3.5 text-muted-foreground" />
<span className="text-xs text-muted-foreground">Filter:</span>
</div>
<div className="w-52">
<div className="w-36 sm:w-52">
<Select
value={filterAction}
onChange={(e) => {
@ -129,22 +129,22 @@ export default function ConfigPage() {
<table className="w-full text-sm">
<thead>
<tr className="border-b border-border bg-card-elevated/50">
<th className="px-5 py-3 text-left text-[11px] uppercase tracking-wider text-muted-foreground font-medium">
<th className="px-3 lg:px-5 py-3 text-left text-[11px] uppercase tracking-wider text-muted-foreground font-medium">
Time
</th>
<th className="px-5 py-3 text-left text-[11px] uppercase tracking-wider text-muted-foreground font-medium">
<th className="px-3 lg:px-5 py-3 text-left text-[11px] uppercase tracking-wider text-muted-foreground font-medium hidden sm:table-cell">
Actor
</th>
<th className="px-5 py-3 text-left text-[11px] uppercase tracking-wider text-muted-foreground font-medium">
<th className="px-3 lg:px-5 py-3 text-left text-[11px] uppercase tracking-wider text-muted-foreground font-medium">
Action
</th>
<th className="px-5 py-3 text-left text-[11px] uppercase tracking-wider text-muted-foreground font-medium">
<th className="px-3 lg:px-5 py-3 text-left text-[11px] uppercase tracking-wider text-muted-foreground font-medium hidden sm:table-cell">
Target
</th>
<th className="px-5 py-3 text-left text-[11px] uppercase tracking-wider text-muted-foreground font-medium">
<th className="px-3 lg:px-5 py-3 text-left text-[11px] uppercase tracking-wider text-muted-foreground font-medium hidden lg:table-cell">
IP
</th>
<th className="px-5 py-3 text-left text-[11px] uppercase tracking-wider text-muted-foreground font-medium">
<th className="px-3 lg:px-5 py-3 text-left text-[11px] uppercase tracking-wider text-muted-foreground font-medium hidden lg:table-cell">
Detail
</th>
</tr>
@ -158,15 +158,15 @@ export default function ConfigPage() {
idx % 2 === 0 ? '' : 'bg-card-elevated/25'
)}
>
<td className="px-5 py-3 text-xs text-muted-foreground whitespace-nowrap">
<td className="px-3 lg:px-5 py-3 text-xs text-muted-foreground whitespace-nowrap">
{getRelativeTime(entry.created_at)}
</td>
<td className="px-5 py-3 text-xs font-medium">
<td className="px-3 lg:px-5 py-3 text-xs font-medium hidden sm:table-cell">
{entry.actor_username ?? (
<span className="text-muted-foreground italic">system</span>
)}
</td>
<td className="px-5 py-3">
<td className="px-3 lg:px-5 py-3">
<span
className={cn(
'text-[9px] px-1.5 py-0.5 rounded font-medium uppercase tracking-wide whitespace-nowrap',
@ -176,13 +176,13 @@ export default function ConfigPage() {
{entry.action}
</span>
</td>
<td className="px-5 py-3 text-xs text-muted-foreground">
<td className="px-3 lg:px-5 py-3 text-xs text-muted-foreground hidden sm:table-cell">
{entry.target_username ?? '—'}
</td>
<td className="px-5 py-3 text-xs text-muted-foreground font-mono">
<td className="px-3 lg:px-5 py-3 text-xs text-muted-foreground font-mono hidden lg:table-cell">
{entry.ip_address ?? '—'}
</td>
<td className="px-5 py-3 text-xs text-muted-foreground max-w-xs truncate">
<td className="px-3 lg:px-5 py-3 text-xs text-muted-foreground max-w-xs truncate hidden lg:table-cell">
{entry.detail ?? '—'}
</td>
</tr>

50
frontend/src/components/admin/IAMPage.tsx
View File

@ -95,7 +95,7 @@ export default function IAMPage() {
: null;
return (
<div className="px-6 py-6 space-y-6 animate-fade-in">
<div className="px-4 md:px-6 py-6 space-y-6 animate-fade-in">
{/* Stats row */}
<div className="grid gap-2.5 grid-cols-2 lg:grid-cols-4">
<StatCard
@ -125,7 +125,7 @@ export default function IAMPage() {
{/* User table */}
<Card>
<CardHeader className="flex-row items-center justify-between gap-3">
<CardHeader className="flex-row items-center justify-between flex-wrap gap-2 md:gap-3">
<div className="flex items-center gap-2">
<div className="p-1.5 rounded-md bg-accent/10">
<Users className="h-4 w-4 text-accent" />
@ -139,12 +139,12 @@ export default function IAMPage() {
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
placeholder="Search users..."
className="pl-8 h-8 w-48 text-xs"
className="pl-8 h-8 w-32 sm:w-48 text-xs"
/>
</div>
<Button size="sm" onClick={() => setCreateOpen(true)}>
<Plus className="h-4 w-4" />
Create User
<span className="hidden sm:inline">Create User</span>
</Button>
</div>
</CardHeader>
@ -160,38 +160,38 @@ export default function IAMPage() {
{searchQuery ? 'No users match your search.' : 'No users found.'}
</p>
) : (
<div>
<div className="overflow-x-auto">
<table className="w-full text-sm">
<thead>
<tr className="border-b border-border bg-card-elevated/50">
<th className="px-5 py-3 text-left text-[11px] uppercase tracking-wider text-muted-foreground font-medium">
<th className="px-3 lg:px-5 py-3 text-left text-[11px] uppercase tracking-wider text-muted-foreground font-medium">
Username
</th>
<th className="px-5 py-3 text-left text-[11px] uppercase tracking-wider text-muted-foreground font-medium">
<th className="px-3 lg:px-5 py-3 text-left text-[11px] uppercase tracking-wider text-muted-foreground font-medium hidden lg:table-cell">
Umbral Name
</th>
<th className="px-5 py-3 text-left text-[11px] uppercase tracking-wider text-muted-foreground font-medium">
<th className="px-3 lg:px-5 py-3 text-left text-[11px] uppercase tracking-wider text-muted-foreground font-medium hidden lg:table-cell">
Email
</th>
<th className="px-5 py-3 text-left text-[11px] uppercase tracking-wider text-muted-foreground font-medium">
<th className="px-3 lg:px-5 py-3 text-left text-[11px] uppercase tracking-wider text-muted-foreground font-medium">
Role
</th>
<th className="px-5 py-3 text-left text-[11px] uppercase tracking-wider text-muted-foreground font-medium">
<th className="px-3 lg:px-5 py-3 text-left text-[11px] uppercase tracking-wider text-muted-foreground font-medium">
Status
</th>
<th className="px-5 py-3 text-left text-[11px] uppercase tracking-wider text-muted-foreground font-medium">
<th className="px-3 lg:px-5 py-3 text-left text-[11px] uppercase tracking-wider text-muted-foreground font-medium hidden lg:table-cell">
Last Login
</th>
<th className="px-5 py-3 text-left text-[11px] uppercase tracking-wider text-muted-foreground font-medium">
<th className="px-3 lg:px-5 py-3 text-left text-[11px] uppercase tracking-wider text-muted-foreground font-medium hidden lg:table-cell">
MFA
</th>
<th className="px-5 py-3 text-left text-[11px] uppercase tracking-wider text-muted-foreground font-medium">
<th className="px-3 lg:px-5 py-3 text-left text-[11px] uppercase tracking-wider text-muted-foreground font-medium hidden lg:table-cell">
Sessions
</th>
<th className="px-5 py-3 text-left text-[11px] uppercase tracking-wider text-muted-foreground font-medium">
<th className="px-3 lg:px-5 py-3 text-left text-[11px] uppercase tracking-wider text-muted-foreground font-medium hidden lg:table-cell">
Created
</th>
<th className="px-5 py-3 text-right text-[11px] uppercase tracking-wider text-muted-foreground font-medium">
<th className="px-3 lg:px-5 py-3 text-right text-[11px] uppercase tracking-wider text-muted-foreground font-medium">
Actions
</th>
</tr>
@ -211,17 +211,17 @@ export default function IAMPage() {
)
)}
>
<td className="px-5 py-3 font-medium">{user.username}</td>
<td className="px-5 py-3 text-muted-foreground text-xs">
<td className="px-3 lg:px-5 py-3 font-medium">{user.username}</td>
<td className="px-3 lg:px-5 py-3 text-muted-foreground text-xs hidden lg:table-cell">
{user.umbral_name || user.username}
</td>
<td className="px-5 py-3 text-muted-foreground text-xs">
<td className="px-3 lg:px-5 py-3 text-muted-foreground text-xs hidden lg:table-cell">
{user.email || '—'}
</td>
<td className="px-5 py-3">
<td className="px-3 lg:px-5 py-3">
<RoleBadge role={user.role} />
</td>
<td className="px-5 py-3">
<td className="px-3 lg:px-5 py-3">
<span
className={cn(
'text-[9px] px-1.5 py-0.5 rounded font-medium uppercase tracking-wide',
@ -233,10 +233,10 @@ export default function IAMPage() {
{user.is_active ? 'Active' : 'Disabled'}
</span>
</td>
<td className="px-5 py-3 text-muted-foreground text-xs">
<td className="px-3 lg:px-5 py-3 text-muted-foreground text-xs hidden lg:table-cell">
{user.last_login_at ? getRelativeTime(user.last_login_at) : '—'}
</td>
<td className="px-5 py-3">
<td className="px-3 lg:px-5 py-3 hidden lg:table-cell">
{user.totp_enabled ? (
<span className="text-[9px] px-1.5 py-0.5 rounded font-medium uppercase tracking-wide bg-green-500/15 text-green-400">
On
@ -249,13 +249,13 @@ export default function IAMPage() {
<span className="text-muted-foreground text-xs">—</span>
)}
</td>
<td className="px-5 py-3 text-muted-foreground text-xs tabular-nums">
<td className="px-3 lg:px-5 py-3 text-muted-foreground text-xs tabular-nums hidden lg:table-cell">
{user.active_sessions}
</td>
<td className="px-5 py-3 text-muted-foreground text-xs">
<td className="px-3 lg:px-5 py-3 text-muted-foreground text-xs hidden lg:table-cell">
{getRelativeTime(user.created_at)}
</td>
<td className="px-5 py-3 text-right" onClick={(e) => e.stopPropagation()}>
<td className="px-3 lg:px-5 py-3 text-right" onClick={(e) => e.stopPropagation()}>
<UserActionsMenu user={user} currentUsername={authStatus?.username ?? null} />
</td>
</tr>

2
frontend/src/components/admin/UserActionsMenu.tsx
View File

@ -147,7 +147,7 @@ export default function UserActionsMenu({ user, currentUsername }: UserActionsMe
{roleSubmenuOpen && (
<div
className="absolute right-full top-0 z-50 min-w-[180px] rounded-lg border bg-card shadow-lg py-1"
className="absolute left-0 top-full sm:left-auto sm:right-full sm:top-0 z-50 min-w-[180px] rounded-lg border bg-card shadow-lg py-1"
onMouseEnter={() => setRoleSubmenuOpen(true)}
onMouseLeave={() => setRoleSubmenuOpen(false)}
>

16
frontend/src/components/admin/UserDetailSection.tsx
View File

@ -71,15 +71,15 @@ export default function UserDetailSection({ userId, onClose }: UserDetailSection
if (isLoading) {
return (
<div className="grid grid-cols-4 gap-4">
<Card className="col-span-1">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 md:gap-4">
<Card>
<CardContent className="p-5 space-y-3">
{Array.from({ length: 5 }).map((_, i) => (
<Skeleton key={i} className="h-5 w-full" />
))}
</CardContent>
</Card>
<Card className="col-span-1">
<Card>
<CardContent className="p-5 space-y-3">
{Array.from({ length: 7 }).map((_, i) => (
<Skeleton key={i} className="h-5 w-full" />
@ -109,9 +109,9 @@ export default function UserDetailSection({ userId, onClose }: UserDetailSection
if (!user) return null;
return (
<div className="grid grid-cols-4 gap-4">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 md:gap-4">
{/* User Information (read-only) */}
<Card className="col-span-1">
<Card>
<CardHeader className="flex-row items-center justify-between pb-3">
<div className="flex items-center gap-2">
<div className="p-1.5 rounded-md bg-accent/10">
@ -152,7 +152,7 @@ export default function UserDetailSection({ userId, onClose }: UserDetailSection
</Card>
{/* Security & Permissions */}
<Card className="col-span-1">
<Card>
<CardHeader className="pb-3">
<div className="flex items-center gap-2">
<div className="p-1.5 rounded-md bg-accent/10">
@ -168,7 +168,7 @@ export default function UserDetailSection({ userId, onClose }: UserDetailSection
<Select
value={user.role}
onChange={(e) => handleRoleChange(e.target.value as UserRole)}
className="h-6 text-xs py-0 px-1.5 w-auto min-w-[120px]"
className="h-6 text-xs py-0 px-1.5 w-auto min-w-[100px] sm:min-w-[120px]"
disabled={updateRole.isPending}
>
<option value="admin">Admin</option>
@ -221,7 +221,7 @@ export default function UserDetailSection({ userId, onClose }: UserDetailSection
</Card>
{/* Sharing Stats */}
<Card className="col-span-1">
<Card>
<CardHeader className="pb-3">
<div className="flex items-center gap-2">
<div className="p-1.5 rounded-md bg-accent/10">

53
frontend/src/components/calendar/CalendarPage.tsx
View File

@ -1,4 +1,5 @@
import { useState, useRef, useEffect, useMemo, useCallback } from 'react';
import { useMediaQuery } from '@/hooks/useMediaQuery';
import { useLocation } from 'react-router-dom';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { toast } from 'sonner';
@ -7,7 +8,7 @@ import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import interactionPlugin from '@fullcalendar/interaction';
import type { EventClickArg, DateSelectArg, EventDropArg, DatesSetArg } from '@fullcalendar/core';
import { ChevronLeft, ChevronRight, Plus, Search } from 'lucide-react';
import { ChevronLeft, ChevronRight, PanelLeft, Plus, Search } from 'lucide-react';
import api, { getErrorMessage } from '@/lib/api';
import axios from 'axios';
import type { CalendarEvent, EventTemplate, Location as LocationType, CalendarPermission } from '@/types';
@ -15,6 +16,8 @@ import { useCalendars } from '@/hooks/useCalendars';
import { useSettings } from '@/hooks/useSettings';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Select } from '@/components/ui/select';
import { Sheet, SheetContent, SheetClose } from '@/components/ui/sheet';
import CalendarSidebar from './CalendarSidebar';
import EventDetailPanel from './EventDetailPanel';
import type { CreateDefaults } from './EventDetailPanel';
@ -161,13 +164,8 @@ export default function CalendarPage() {
const panelOpen = panelMode !== 'closed';
// Track desktop breakpoint to prevent dual EventDetailPanel mount
const [isDesktop, setIsDesktop] = useState(() => window.matchMedia('(min-width: 1024px)').matches);
useEffect(() => {
const mql = window.matchMedia('(min-width: 1024px)');
const handler = (e: MediaQueryListEvent) => setIsDesktop(e.matches);
mql.addEventListener('change', handler);
return () => mql.removeEventListener('change', handler);
}, []);
const isDesktop = useMediaQuery('(min-width: 1024px)');
const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
// Continuously resize calendar during panel open/close CSS transition
useEffect(() => {
@ -190,6 +188,8 @@ export default function CalendarPage() {
if (!el) return;
let debounceTimer: ReturnType<typeof setTimeout> | null = null;
const handleWheel = (e: WheelEvent) => {
// Skip wheel navigation on touch devices (let them scroll normally)
if ('ontouchstart' in window) return;
const api = calendarRef.current?.getApi();
if (!api || api.view.type !== 'dayGridMonth') return;
e.preventDefault();
@ -475,15 +475,29 @@ export default function CalendarPage() {
return (
<div className="flex h-full overflow-hidden animate-fade-in">
<div className="hidden lg:flex lg:flex-row shrink-0">
<CalendarSidebar ref={sidebarRef} onUseTemplate={handleUseTemplate} onSharedVisibilityChange={setVisibleSharedIds} width={sidebarWidth} />
<div
onMouseDown={handleSidebarMouseDown}
className="w-1 shrink-0 cursor-col-resize hover:bg-accent/30 active:bg-accent/50 transition-colors duration-150"
/>
</div>
{!isDesktop && (
<Sheet open={mobileSidebarOpen} onOpenChange={setMobileSidebarOpen}>
<SheetContent className="w-72 p-0">
<SheetClose onClick={() => setMobileSidebarOpen(false)} />
<CalendarSidebar onUseTemplate={(tmpl) => { setMobileSidebarOpen(false); handleUseTemplate(tmpl); }} onSharedVisibilityChange={setVisibleSharedIds} width={288} />
</SheetContent>
</Sheet>
)}
<div ref={calendarContainerRef} className="flex-1 flex flex-col overflow-hidden">
{/* Custom toolbar */}
<div className="border-b bg-card px-6 h-16 flex items-center gap-4 shrink-0">
<div className="border-b bg-card px-4 md:px-6 min-h-[4rem] flex items-center gap-2 md:gap-4 flex-wrap py-2 md:py-0 md:h-16 md:flex-nowrap shrink-0">
<Button variant="ghost" size="icon" className="h-8 w-8 lg:hidden" onClick={() => setMobileSidebarOpen(true)}>
<PanelLeft className="h-4 w-4" />
</Button>
<div className="flex items-center gap-1">
<Button variant="ghost" size="icon" className="h-8 w-8" onClick={navigatePrev}>
<ChevronLeft className="h-4 w-4" />
@ -496,7 +510,17 @@ export default function CalendarPage() {
Today
</Button>
<div className="flex items-center rounded-md border border-border overflow-hidden">
<Select
value={currentView}
onChange={(e) => changeView(e.target.value as CalendarView)}
className="h-8 text-sm w-auto pr-8 md:hidden"
>
{(Object.entries(viewLabels) as [CalendarView, string][]).map(([view, label]) => (
<option key={view} value={view}>{label}</option>
))}
</Select>
<div className="hidden md:flex items-center rounded-md border border-border overflow-hidden">
{(Object.entries(viewLabels) as [CalendarView, string][]).map(([view, label]) => (
<button
key={view}
@ -516,7 +540,7 @@ export default function CalendarPage() {
))}
</div>
<h2 className="text-lg font-semibold font-heading">{calendarTitle}</h2>
<h2 className="text-sm sm:text-lg font-semibold font-heading truncate min-w-0 flex-shrink">{calendarTitle}</h2>
<div className="flex-1" />
@ -529,7 +553,7 @@ export default function CalendarPage() {
onChange={(e) => setEventSearch(e.target.value)}
onFocus={() => setSearchFocused(true)}
onBlur={() => setTimeout(() => setSearchFocused(false), 200)}
className="w-52 h-8 pl-8 text-sm ring-inset"
className="w-32 sm:w-52 h-8 pl-8 text-sm ring-inset"
/>
{searchFocused && searchResults.length > 0 && (
<div className="absolute z-50 mt-1 w-72 right-0 rounded-md border bg-popover shadow-lg overflow-hidden">
@ -558,8 +582,7 @@ export default function CalendarPage() {
</div>
<Button size="sm" onClick={handleCreateNew}>
<Plus className="mr-2 h-4 w-4" />
Create Event
<Plus className="h-4 w-4 md:mr-2" /><span className="hidden md:inline">Create Event</span>
</Button>
</div>
@ -621,7 +644,7 @@ export default function CalendarPage() {
onClick={handlePanelClose}
>
<div
className="fixed inset-y-0 right-0 w-full sm:w-[400px] bg-card border-l border-border shadow-lg"
className="fixed inset-y-0 right-0 w-full sm:w-[400px] bg-card border-l border-border shadow-lg overflow-y-auto"
onClick={(e) => e.stopPropagation()}
>
<EventDetailPanel

6
frontend/src/components/calendar/CalendarSidebar.tsx
View File

@ -131,7 +131,7 @@ const CalendarSidebar = forwardRef<HTMLDivElement, CalendarSidebarProps>(functio
<span className="text-sm text-foreground truncate flex-1">{cal.name}</span>
<button
onClick={() => handleEdit(cal)}
className="opacity-0 group-hover:opacity-100 transition-opacity duration-150 text-muted-foreground hover:text-foreground"
className="opacity-100 md:opacity-0 md:group-hover:opacity-100 transition-opacity duration-150 text-muted-foreground hover:text-foreground"
>
<Pencil className="h-3.5 w-3.5" />
</button>
@ -184,7 +184,7 @@ const CalendarSidebar = forwardRef<HTMLDivElement, CalendarSidebarProps>(functio
setEditingTemplate(tmpl);
setShowTemplateForm(true);
}}
className="opacity-0 group-hover:opacity-100 transition-opacity duration-150 text-muted-foreground hover:text-foreground"
className="opacity-100 md:opacity-0 md:group-hover:opacity-100 transition-opacity duration-150 text-muted-foreground hover:text-foreground"
>
<Pencil className="h-3 w-3" />
</button>
@ -194,7 +194,7 @@ const CalendarSidebar = forwardRef<HTMLDivElement, CalendarSidebarProps>(functio
if (!window.confirm(`Delete template "${tmpl.name}"?`)) return;
deleteTemplateMutation.mutate(tmpl.id);
}}
className="opacity-0 group-hover:opacity-100 transition-opacity duration-150 text-muted-foreground hover:text-destructive"
className="opacity-100 md:opacity-0 md:group-hover:opacity-100 transition-opacity duration-150 text-muted-foreground hover:text-destructive"
>
<Trash2 className="h-3 w-3" />
</button>

4
frontend/src/components/calendar/SharedCalendarSection.tsx
View File

@ -73,7 +73,7 @@ export default function SharedCalendarSection({
<button
type="button"
onClick={() => onEditCalendar?.(cal)}
className="opacity-0 group-hover:opacity-100 transition-opacity duration-150 text-muted-foreground hover:text-foreground"
className="opacity-100 md:opacity-0 md:group-hover:opacity-100 transition-opacity duration-150 text-muted-foreground hover:text-foreground"
>
<Pencil className="h-3.5 w-3.5" />
</button>
@ -104,7 +104,7 @@ export default function SharedCalendarSection({
<span className="text-sm text-foreground truncate flex-1">{m.calendar_name}</span>
<button
onClick={() => setSettingsFor(m)}
className="opacity-0 group-hover:opacity-100 transition-opacity duration-150 text-muted-foreground hover:text-foreground"
className="opacity-100 md:opacity-0 md:group-hover:opacity-100 transition-opacity duration-150 text-muted-foreground hover:text-foreground"
>
<Pencil className="h-3.5 w-3.5" />
</button>

14
frontend/src/components/dashboard/DashboardPage.tsx
View File

@ -86,13 +86,13 @@ export default function DashboardPage() {
if (isLoading) {
return (
<div className="flex flex-col h-full">
<div className="px-6 py-6">
<div className="px-4 md:px-6 py-6">
<div className="animate-pulse space-y-2">
<div className="h-8 w-48 rounded bg-muted" />
<div className="h-4 w-32 rounded bg-muted" />
</div>
</div>
<div className="flex-1 overflow-y-auto px-6 pb-6">
<div className="flex-1 overflow-y-auto px-4 md:px-6 pb-6">
<DashboardSkeleton />
</div>
</div>
@ -110,7 +110,7 @@ export default function DashboardPage() {
return (
<div className="flex flex-col h-full">
{/* Header — greeting + date + quick add */}
<div className="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)}
@ -156,8 +156,8 @@ export default function DashboardPage() {
</div>
</div>
<div className="flex-1 overflow-y-auto px-6 pb-6">
<div className="space-y-5">
<div className="flex-1 overflow-y-auto px-4 md:px-6 pb-6">
<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} />
)}

2
frontend/src/components/dashboard/StatsWidget.tsx
View File

@ -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}

4
frontend/src/components/dashboard/TrackedProjectsWidget.tsx
View File

@ -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}

4
frontend/src/components/dashboard/UpcomingWidget.tsx
View File

@ -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' :

8
frontend/src/components/dashboard/WeekTimeline.tsx
View File

@ -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'
)}
>

4
frontend/src/components/layout/AppLayout.tsx
View File

@ -22,7 +22,7 @@ export default function AppLayout() {
<LockProvider>
<AlertsProvider>
<NotificationProvider>
<div className="flex h-screen overflow-hidden bg-background">
<div className="flex h-dvh overflow-hidden bg-background">
<Sidebar
collapsed={collapsed}
onToggle={() => {
@ -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>

34
frontend/src/components/locations/LocationsPage.tsx
View File

@ -1,4 +1,5 @@
import { useState, useMemo, useRef, useEffect } from 'react';
import { useMediaQuery } from '@/hooks/useMediaQuery';
import { Plus, MapPin, Phone, Mail, Tag, AlignLeft } from 'lucide-react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { toast } from 'sonner';
@ -19,6 +20,7 @@ import LocationForm from './LocationForm';
export default function LocationsPage() {
const queryClient = useQueryClient();
const isDesktop = useMediaQuery('(min-width: 1024px)');
const [selectedLocationId, setSelectedLocationId] = useState<number | null>(null);
const [showForm, setShowForm] = useState(false);
@ -285,10 +287,10 @@ export default function LocationsPage() {
return (
<div className="flex flex-col h-full animate-fade-in">
{/* Header */}
<div className="border-b bg-card px-6 h-16 flex items-center gap-4 shrink-0">
<h1 className="font-heading text-2xl font-bold tracking-tight">Locations</h1>
<div className="border-b bg-card px-4 md:px-6 min-h-[4rem] flex items-center gap-2 md:gap-4 flex-wrap py-2 md:py-0 md:h-16 md:flex-nowrap shrink-0">
<h1 className="font-heading text-xl md:text-2xl font-bold tracking-tight">Locations</h1>
<div className="flex-1 min-w-0">
<div className="w-full md:flex-1 md:w-auto min-w-0 order-last md:order-none">
<CategoryFilterBar
categories={orderedCategories}
activeFilters={activeFilters}
@ -305,8 +307,7 @@ export default function LocationsPage() {
</div>
<Button onClick={() => setShowForm(true)} size="sm" aria-label="Add location">
<Plus className="mr-2 h-4 w-4" />
Add Location
<Plus className="h-4 w-4 md:mr-2" /><span className="hidden md:inline">Add Location</span>
</Button>
</div>
@ -320,7 +321,7 @@ export default function LocationsPage() {
panelOpen ? 'w-full lg:w-[55%]' : 'w-full'
}`}
>
<div className="px-6 pb-6 pt-5">
<div className="px-4 md:px-6 pb-6 pt-5">
{isLoading ? (
<EntityTable<Location>
columns={columns}
@ -357,26 +358,37 @@ export default function LocationsPage() {
sortDir={sortDir}
onSort={handleSort}
visibilityMode={visibilityMode}
mobileCardRender={(location) => (
<div className={`rounded-lg border p-3 transition-colors ${selectedLocationId === location.id ? 'border-accent/40 bg-accent/5' : 'border-border bg-card hover:bg-card-elevated'}`}>
<div className="flex items-center justify-between mb-1">
<span className="font-medium text-sm truncate flex-1">{location.name}</span>
{location.category && <span className="text-xs text-muted-foreground">{location.category}</span>}
</div>
{location.address && (
<p className="text-xs text-muted-foreground truncate">{location.address}</p>
)}
</div>
)}
/>
)}
</div>
</div>
{/* Detail panel (desktop) */}
{panelOpen && isDesktop && (
<div
className={`overflow-hidden transition-all duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] ${
panelOpen ? 'hidden lg:block lg:w-[45%]' : 'w-0 opacity-0'
}`}
className="overflow-hidden transition-all duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] w-[45%]"
>
{renderPanel()}
</div>
)}
</div>
</div>
{/* Mobile detail panel overlay */}
{panelOpen && selectedLocation && (
{panelOpen && selectedLocation && !isDesktop && (
<div
className="lg:hidden fixed inset-0 z-50 bg-background/80 backdrop-blur-sm"
className="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm"
onClick={() => setSelectedLocationId(null)}
>
<div

6
frontend/src/components/notifications/NotificationsPage.tsx
View File

@ -162,7 +162,7 @@ export default function NotificationsPage() {
return (
<div className="flex flex-col h-full animate-fade-in">
{/* Page header */}
<div className="border-b bg-card px-6 h-16 flex items-center justify-between shrink-0">
<div className="border-b bg-card px-4 md:px-6 h-16 flex items-center justify-between shrink-0">
<div className="flex items-center gap-3">
<Bell className="h-5 w-5 text-accent" aria-hidden="true" />
<h1 className="text-xl font-semibold font-heading">Notifications</h1>
@ -227,7 +227,7 @@ export default function NotificationsPage() {
key={notification.id}
onClick={() => handleNotificationClick(notification)}
className={cn(
'flex items-start gap-3 px-6 py-3.5 transition-colors hover:bg-card-elevated group cursor-pointer',
'flex items-start gap-3 px-4 md:px-6 py-3.5 transition-colors hover:bg-card-elevated group cursor-pointer',
!notification.is_read && 'bg-card'
)}
>
@ -316,7 +316,7 @@ export default function NotificationsPage() {
<span className="text-[11px] text-muted-foreground tabular-nums">
{formatDistanceToNow(new Date(notification.created_at), { addSuffix: true })}
</span>
<div className="flex items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
<div className="flex items-center gap-0.5 opacity-100 md:opacity-0 md:group-hover:opacity-100 transition-opacity">
{!notification.is_read && (
<button
onClick={(e) => { e.stopPropagation(); handleMarkRead(notification.id); }}

39
frontend/src/components/people/PeoplePage.tsx
View File

@ -1,4 +1,5 @@
import { useState, useMemo, useRef, useEffect } from 'react';
import { useMediaQuery } from '@/hooks/useMediaQuery';
import { Plus, Users, Star, Cake, Phone, Mail, MapPin, Tag, Building2, Briefcase, AlignLeft, Ghost, ChevronDown, Unlink, Link2, User2 } from 'lucide-react';
import type { LucideIcon } from 'lucide-react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
@ -214,6 +215,7 @@ const panelFields: PanelField[] = [
export default function PeoplePage() {
const queryClient = useQueryClient();
const tableContainerRef = useRef<HTMLDivElement>(null);
const isDesktop = useMediaQuery('(min-width: 1024px)');
const [selectedPersonId, setSelectedPersonId] = useState<number | null>(null);
const [showForm, setShowForm] = useState(false);
@ -555,9 +557,9 @@ export default function PeoplePage() {
return (
<div className="flex flex-col h-full animate-fade-in">
{/* Header */}
<div className="border-b bg-card px-6 h-16 flex items-center gap-4 shrink-0">
<h1 className="font-heading text-2xl font-bold tracking-tight">People</h1>
<div className="flex-1 min-w-0">
<div className="border-b bg-card px-4 md:px-6 min-h-[4rem] flex items-center gap-2 md:gap-4 flex-wrap py-2 md:py-0 md:h-16 md:flex-nowrap shrink-0">
<h1 className="font-heading text-xl md:text-2xl font-bold tracking-tight">People</h1>
<div className="w-full md:flex-1 md:w-auto min-w-0 order-last md:order-none">
<CategoryFilterBar
activeFilters={activeFilters}
pinnedLabel="Favourites"
@ -587,8 +589,7 @@ export default function PeoplePage() {
aria-label="Add person"
className="rounded-r-none"
>
<Plus className="mr-2 h-4 w-4" />
Add Person
<Plus className="h-4 w-4 md:mr-2" /><span className="hidden md:inline">Add Person</span>
</Button>
<Button
size="sm"
@ -622,7 +623,7 @@ export default function PeoplePage() {
<div className="flex-1 overflow-hidden flex flex-col">
{/* Stat bar */}
{!isLoading && people.length > 0 && (
<div className="px-6 pt-4 pb-2 flex items-start gap-6 shrink-0">
<div className="px-4 md:px-6 pt-4 pb-2 flex items-start gap-6 shrink-0">
<div className="flex gap-6 shrink-0">
<StatCounter
icon={Users}
@ -665,7 +666,7 @@ export default function PeoplePage() {
{/* Pending requests */}
{hasRequests && (
<div className="px-6 pb-3">
<div className="px-4 md:px-6 pb-3">
<div className="flex items-center gap-2 mb-2">
<span className="text-xs text-muted-foreground uppercase tracking-wider font-medium">
Pending Requests
@ -706,7 +707,7 @@ export default function PeoplePage() {
panelOpen ? 'w-full lg:w-[55%]' : 'w-full'
}`}
>
<div className="px-6 pb-6">
<div className="px-4 md:px-6 pb-6">
{isLoading ? (
<EntityTable<Person>
columns={columns}
@ -745,26 +746,38 @@ export default function PeoplePage() {
sortDir={sortDir}
onSort={handleSort}
visibilityMode={visibilityMode}
mobileCardRender={(person) => (
<div className={`rounded-lg border p-3 transition-colors ${selectedPersonId === person.id ? 'border-accent/40 bg-accent/5' : 'border-border bg-card hover:bg-card-elevated'}`}>
<div className="flex items-center justify-between mb-1">
<span className="font-medium text-sm truncate flex-1">{person.name}</span>
{person.category && <span className="text-xs text-muted-foreground">{person.category}</span>}
</div>
<div className="flex items-center gap-2 text-xs text-muted-foreground">
{person.email && <span className="truncate">{person.email}</span>}
{person.phone && <span>{person.phone}</span>}
</div>
</div>
)}
/>
)}
</div>
</div>
{/* Detail panel (desktop) */}
{panelOpen && isDesktop && (
<div
className={`overflow-hidden transition-all duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] ${
panelOpen ? 'hidden lg:block lg:w-[45%]' : 'w-0 opacity-0'
}`}
className="overflow-hidden transition-all duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] w-[45%]"
>
{renderPanel()}
</div>
)}
</div>
</div>
{/* Mobile detail panel overlay */}
{panelOpen && selectedPerson && (
{panelOpen && selectedPerson && !isDesktop && (
<div
className="lg:hidden fixed inset-0 z-50 bg-background/80 backdrop-blur-sm"
className="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm"
onClick={() => setSelectedPersonId(null)}
>
<div

6
frontend/src/components/projects/KanbanBoard.tsx
View File

@ -2,6 +2,7 @@ import {
DndContext,
closestCorners,
PointerSensor,
TouchSensor,
useSensor,
useSensors,
type DragEndEvent,
@ -53,7 +54,7 @@ function KanbanColumn({
return (
<div
ref={setNodeRef}
className={`flex-1 min-w-[200px] rounded-lg border transition-colors duration-150 ${
className={`flex-1 min-w-[160px] md:min-w-[200px] rounded-lg border transition-colors duration-150 ${
isOver ? 'border-accent/40 bg-accent/5' : 'border-border bg-card/50'
}`}
>
@ -152,7 +153,8 @@ export default function KanbanBoard({
onBackToAllTasks,
}: KanbanBoardProps) {
const sensors = useSensors(
useSensor(PointerSensor, { activationConstraint: { distance: 5 } })
useSensor(PointerSensor, { activationConstraint: { distance: 5 } }) ,
useSensor(TouchSensor, { activationConstraint: { delay: 200, tolerance: 5 } })
);
// Subtask view is driven by kanbanParentTask (decoupled from selected task)

51
frontend/src/components/projects/ProjectDetail.tsx
View File

@ -1,4 +1,5 @@
import { useState, useMemo, useCallback } from 'react';
import { useMediaQuery } from '@/hooks/useMediaQuery';
import { useParams, useNavigate } from 'react-router-dom';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { toast } from 'sonner';
@ -257,6 +258,8 @@ export default function ProjectDetail() {
}
}, [topLevelTasks, sortMode, sortSubtasks]);
const isDesktop = useMediaQuery('(min-width: 1024px)');
const selectedTask = useMemo(() => {
if (!selectedTaskId) return null;
// Search top-level and subtasks
@ -345,13 +348,13 @@ export default function ProjectDetail() {
if (isLoading) {
return (
<div className="flex flex-col h-full animate-fade-in">
<div className="border-b bg-card px-6 h-16 flex items-center gap-4 shrink-0">
<div className="border-b bg-card px-4 md:px-6 min-h-[4rem] flex items-center gap-2 md:gap-4 flex-wrap py-2 md:py-0 md:h-16 md:flex-nowrap shrink-0">
<Button variant="ghost" size="icon" onClick={() => navigate('/projects')}>
<ArrowLeft className="h-5 w-5" />
</Button>
<h1 className="font-heading text-2xl font-bold tracking-tight flex-1">Loading...</h1>
<h1 className="font-heading text-xl md:text-2xl font-bold tracking-tight flex-1">Loading...</h1>
</div>
<div className="flex-1 overflow-y-auto px-6 py-5">
<div className="flex-1 overflow-y-auto px-4 md:px-6 py-5">
<ListSkeleton rows={4} />
</div>
</div>
@ -375,14 +378,14 @@ export default function ProjectDetail() {
return (
<div className="flex flex-col h-full animate-fade-in">
{/* Header */}
<div className="border-b bg-card px-6 h-16 flex items-center gap-4 shrink-0">
<div className="border-b bg-card px-4 md:px-6 h-16 flex items-center gap-2 md:gap-4 shrink-0">
<Button variant="ghost" size="icon" onClick={() => navigate('/projects')}>
<ArrowLeft className="h-5 w-5" />
</Button>
<h1 className="font-heading text-2xl font-bold tracking-tight flex-1 truncate">
<h1 className="font-heading text-xl md:text-2xl font-bold tracking-tight flex-1 truncate min-w-0">
{project.name}
</h1>
<Badge className={statusColors[project.status]}>
<Badge className={`shrink-0 hidden sm:inline-flex ${statusColors[project.status]}`}>
{statusLabels[project.status]}
</Badge>
<Button
@ -390,34 +393,32 @@ export default function ProjectDetail() {
size="icon"
onClick={() => toggleTrackMutation.mutate()}
disabled={toggleTrackMutation.isPending}
className={project.is_tracked ? 'text-accent' : 'text-muted-foreground'}
className={`shrink-0 ${project.is_tracked ? 'text-accent' : 'text-muted-foreground'}`}
title={project.is_tracked ? 'Untrack project' : 'Track project'}
>
<Pin className={`h-4 w-4 ${project.is_tracked ? 'fill-current' : ''}`} />
</Button>
<Button variant="outline" size="sm" onClick={() => setShowProjectForm(true)}>
<Pencil className="mr-2 h-3.5 w-3.5" />
Edit
<Button variant="outline" size="sm" className="shrink-0" onClick={() => setShowProjectForm(true)}>
<Pencil className="h-3.5 w-3.5 md:mr-2" /><span className="hidden md:inline">Edit</span>
</Button>
<Button
variant="ghost"
size="sm"
className="text-destructive hover:bg-destructive/10"
className="shrink-0 text-destructive hover:bg-destructive/10"
onClick={() => {
if (!window.confirm('Delete this project and all its tasks?')) return;
deleteProjectMutation.mutate();
}}
disabled={deleteProjectMutation.isPending}
>
<Trash2 className="mr-2 h-3.5 w-3.5" />
Delete
<Trash2 className="h-3.5 w-3.5 md:mr-2" /><span className="hidden md:inline">Delete</span>
</Button>
</div>
{/* Content area */}
<div className="flex-1 overflow-hidden flex flex-col">
{/* Summary section - scrolls with left panel on small, fixed on large */}
<div className="px-6 py-5 space-y-5 shrink-0 overflow-y-auto max-h-[50vh] lg:max-h-none lg:overflow-visible">
<div className="px-4 md:px-6 py-5 space-y-5 shrink-0 overflow-y-auto max-h-[50vh] lg:max-h-none lg:overflow-visible">
{/* Description */}
{project.description && (
<p className="text-sm text-muted-foreground">{project.description}</p>
@ -426,7 +427,7 @@ export default function ProjectDetail() {
{/* Project Summary Card */}
<Card className="bg-gradient-to-br from-accent/[0.03] to-transparent">
<CardContent className="p-5">
<div className="flex items-center gap-6">
<div className="flex flex-col sm:flex-row sm:items-center gap-4 sm:gap-6">
<div className="flex-1">
<div className="flex items-baseline justify-between mb-2">
<span className="text-sm text-muted-foreground">Overall Progress</span>
@ -444,7 +445,7 @@ export default function ProjectDetail() {
{completedTasks} of {totalTasks} tasks completed
</p>
</div>
<div className="w-px h-16 bg-border" />
<div className="hidden sm:block w-px h-16 bg-border" />
<div className="flex items-center gap-5">
<div className="text-center">
<div className="p-1.5 rounded-md bg-blue-500/10 mx-auto w-fit mb-1">
@ -490,7 +491,7 @@ export default function ProjectDetail() {
</div>
{/* Task list header + view controls */}
<div className="px-6 pb-3 flex items-center justify-between shrink-0">
<div className="px-4 md:px-6 pb-3 flex items-center justify-between flex-wrap gap-2 shrink-0">
<h2 className="font-heading text-lg font-semibold">Tasks</h2>
<div className="flex items-center gap-2">
{/* View toggle */}
@ -544,7 +545,7 @@ export default function ProjectDetail() {
<div className="flex-1 overflow-hidden flex">
{/* Left panel: task list or kanban */}
<div className={`overflow-y-auto transition-all duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] ${selectedTaskId ? 'w-full lg:w-[55%]' : 'w-full'}`}>
<div className="px-6 pb-6">
<div className="px-4 md:px-6 pb-6">
{topLevelTasks.length === 0 ? (
<EmptyState
icon={ListChecks}
@ -599,7 +600,7 @@ export default function ProjectDetail() {
/>
{/* Expanded subtasks */}
{isExpanded && hasSubtasks && (
<div className="ml-10 mt-0.5 space-y-0.5">
<div className="ml-5 sm:ml-10 mt-0.5 space-y-0.5">
{task.subtasks.map((subtask) => (
<TaskRow
key={subtask.id}
@ -630,11 +631,10 @@ export default function ProjectDetail() {
</div>
</div>
{/* Right panel: task detail (hidden on small screens) */}
{/* Right panel: task detail (desktop only) */}
{selectedTaskId && isDesktop && (
<div
className={`overflow-hidden transition-all duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] border-l border-border bg-card ${
selectedTaskId ? 'hidden lg:flex lg:w-[45%]' : 'w-0 opacity-0 border-l-0'
}`}
className="overflow-hidden transition-all duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] border-l border-border bg-card flex w-[45%]"
>
<div className="flex-1 overflow-hidden min-w-[360px]">
<TaskDetailPanel
@ -647,12 +647,13 @@ export default function ProjectDetail() {
/>
</div>
</div>
)}
</div>
</div>
{/* Mobile: show detail panel as overlay when task selected on small screens */}
{selectedTaskId && selectedTask && (
<div className="lg:hidden fixed inset-0 z-50 bg-background/80 backdrop-blur-sm">
{selectedTaskId && selectedTask && !isDesktop && (
<div className="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm">
<div className="fixed inset-y-0 right-0 w-full sm:w-[400px] bg-card border-l border-border shadow-lg">
<div className="flex items-center justify-between px-4 py-3 border-b border-border">
<span className="text-sm font-medium text-muted-foreground">Task Details</span>

49
frontend/src/components/projects/ProjectsPage.tsx
View File

@ -5,6 +5,7 @@ import { useQuery } from '@tanstack/react-query';
import api from '@/lib/api';
import type { Project } from '@/types';
import { Button } from '@/components/ui/button';
import { Select } from '@/components/ui/select';
import { Input } from '@/components/ui/input';
import { Card, CardContent } from '@/components/ui/card';
import { GridSkeleton } from '@/components/ui/skeleton';
@ -70,10 +71,19 @@ export default function ProjectsPage() {
return (
<div className="flex flex-col h-full animate-fade-in">
{/* Header */}
<div className="border-b bg-card px-6 h-16 flex items-center gap-4 shrink-0">
<h1 className="font-heading text-2xl font-bold tracking-tight">Projects</h1>
<div className="border-b bg-card px-4 md:px-6 min-h-[4rem] flex items-center gap-2 md:gap-4 flex-wrap py-2 md:py-0 md:h-16 md:flex-nowrap shrink-0">
<h1 className="font-heading text-xl md:text-2xl font-bold tracking-tight">Projects</h1>
<div className="flex items-center rounded-md border border-border overflow-hidden ml-4">
<Select
value={statusFilter}
onChange={(e) => setStatusFilter(e.target.value as typeof statusFilter)}
className="h-8 text-sm w-auto pr-8 md:hidden"
>
{statusFilters.map((sf) => (
<option key={sf.value} value={sf.value}>{sf.label}</option>
))}
</Select>
<div className="hidden md:flex items-center rounded-md border border-border overflow-hidden ml-4">
{statusFilters.map((sf) => (
<button
key={sf.value}
@ -101,50 +111,49 @@ export default function ProjectsPage() {
placeholder="Search..."
value={search}
onChange={(e) => setSearch(e.target.value)}
className="w-52 h-8 pl-8 text-sm"
className="w-32 sm:w-52 h-8 pl-8 text-sm"
/>
</div>
<Button onClick={() => setShowForm(true)} size="sm">
<Plus className="mr-2 h-4 w-4" />
New Project
<Plus className="h-4 w-4 md:mr-2" /><span className="hidden md:inline">New Project</span>
</Button>
</div>
<div className="flex-1 overflow-y-auto px-6 py-5">
<div className="flex-1 overflow-y-auto px-4 md:px-6 py-5">
{/* Summary stats */}
{!isLoading && projects.length > 0 && (
<div className="grid gap-2.5 grid-cols-3 mb-5">
<div className="grid gap-1.5 md:gap-2.5 grid-cols-3 mb-5">
<Card className="bg-gradient-to-br from-accent/[0.03] to-transparent">
<CardContent className="p-4 flex items-center gap-3">
<div className="p-1.5 rounded-md bg-blue-500/10">
<CardContent className="p-2.5 md:p-4 flex items-center gap-2 md:gap-3">
<div className="p-1.5 rounded-md bg-blue-500/10 hidden sm:block">
<Layers className="h-4 w-4 text-blue-400" />
</div>
<div>
<p className="text-[10px] tracking-wider uppercase text-muted-foreground">Total</p>
<p className="font-heading text-xl font-bold tabular-nums">{projects.length}</p>
<p className="text-[9px] md:text-[10px] tracking-wider uppercase text-muted-foreground">Total</p>
<p className="font-heading text-lg md:text-xl font-bold tabular-nums">{projects.length}</p>
</div>
</CardContent>
</Card>
<Card className="bg-gradient-to-br from-accent/[0.03] to-transparent">
<CardContent className="p-4 flex items-center gap-3">
<div className="p-1.5 rounded-md bg-purple-500/10">
<CardContent className="p-2.5 md:p-4 flex items-center gap-2 md:gap-3">
<div className="p-1.5 rounded-md bg-purple-500/10 hidden sm:block">
<PlayCircle className="h-4 w-4 text-purple-400" />
</div>
<div>
<p className="text-[10px] tracking-wider uppercase text-muted-foreground">In Progress</p>
<p className="font-heading text-xl font-bold tabular-nums">{inProgressCount}</p>
<p className="text-[9px] md:text-[10px] tracking-wider uppercase text-muted-foreground">In Progress</p>
<p className="font-heading text-lg md:text-xl font-bold tabular-nums">{inProgressCount}</p>
</div>
</CardContent>
</Card>
<Card className="bg-gradient-to-br from-accent/[0.03] to-transparent">
<CardContent className="p-4 flex items-center gap-3">
<div className="p-1.5 rounded-md bg-green-500/10">
<CardContent className="p-2.5 md:p-4 flex items-center gap-2 md:gap-3">
<div className="p-1.5 rounded-md bg-green-500/10 hidden sm:block">
<CheckCircle2 className="h-4 w-4 text-green-400" />
</div>
<div>
<p className="text-[10px] tracking-wider uppercase text-muted-foreground">Completed</p>
<p className="font-heading text-xl font-bold tabular-nums">{completedCount}</p>
<p className="text-[9px] md:text-[10px] tracking-wider uppercase text-muted-foreground">Completed</p>
<p className="font-heading text-lg md:text-xl font-bold tabular-nums">{completedCount}</p>
</div>
</CardContent>
</Card>

4
frontend/src/components/projects/TaskDetailPanel.tsx
View File

@ -484,7 +484,7 @@ export default function TaskDetailPanel({
<Button
variant="ghost"
size="icon"
className="h-5 w-5 opacity-0 group-hover:opacity-100 transition-opacity text-muted-foreground hover:text-destructive shrink-0"
className="h-5 w-5 opacity-100 md:opacity-0 md:group-hover:opacity-100 transition-opacity text-muted-foreground hover:text-destructive shrink-0"
onClick={(e) => {
e.stopPropagation();
handleDeleteSubtask(subtask.id, subtask.title);
@ -527,7 +527,7 @@ export default function TaskDetailPanel({
<Button
variant="ghost"
size="icon"
className="h-5 w-5 opacity-0 group-hover:opacity-100 transition-opacity text-muted-foreground hover:text-destructive"
className="h-5 w-5 opacity-100 md:opacity-0 md:group-hover:opacity-100 transition-opacity text-muted-foreground hover:text-destructive"
onClick={() => {
if (!window.confirm('Delete this comment?')) return;
deleteCommentMutation.mutate(comment.id);

20
frontend/src/components/projects/TaskRow.tsx
View File

@ -52,7 +52,7 @@ export default function TaskRow({
return (
<div
className={`relative flex items-center gap-2 px-3 py-2 rounded-lg cursor-pointer transition-colors duration-150 ${
className={`relative flex items-center gap-1.5 sm:gap-2 px-2 sm:px-3 py-2 rounded-lg cursor-pointer transition-colors duration-150 ${
isSelected
? 'bg-accent/5 border-l-2 border-accent'
: 'border-l-2 border-transparent hover:bg-card-elevated'
@ -108,18 +108,18 @@ export default function TaskRow({
</span>
{/* Metadata columns */}
<Badge className={`text-[9px] px-1.5 py-0.5 shrink-0 w-16 text-center ${taskStatusColors[task.status]}`}>
<Badge className={`text-[9px] px-1.5 py-0.5 shrink-0 w-16 text-center hidden sm:inline-flex ${taskStatusColors[task.status]}`}>
{task.status.replace('_', ' ')}
</Badge>
<Badge
className={`text-[9px] px-1.5 py-0.5 rounded-full shrink-0 w-14 text-center ${priorityColors[task.priority]}`}
className={`text-[9px] px-1.5 py-0.5 rounded-full shrink-0 w-14 text-center hidden sm:inline-flex ${priorityColors[task.priority]}`}
>
{task.priority}
</Badge>
<span
className={`text-[11px] shrink-0 tabular-nums w-12 text-right ${
className={`text-[11px] shrink-0 tabular-nums w-12 text-right hidden sm:block ${
task.due_date
? isOverdue ? 'text-red-400' : 'text-muted-foreground'
: 'text-transparent'
@ -128,12 +128,22 @@ export default function TaskRow({
{task.due_date ? format(parseISO(task.due_date), 'MMM d') : '—'}
</span>
<span className={`text-[11px] shrink-0 tabular-nums w-8 text-right ${
<span className={`text-[11px] shrink-0 tabular-nums w-8 text-right hidden sm:block ${
hasSubtasks ? 'text-muted-foreground' : 'text-transparent'
}`}>
{hasSubtasks ? `${completedSubtasks}/${task.subtasks.length}` : '—'}
</span>
{/* Mobile-only: compact priority dot + overdue indicator */}
<div className="flex items-center gap-1.5 sm:hidden shrink-0">
<div className={`h-2 w-2 rounded-full ${
task.priority === 'high' ? 'bg-red-400' :
task.priority === 'medium' ? 'bg-yellow-400' :
task.priority === 'low' ? 'bg-green-400' : 'bg-gray-500'
}`} />
{isOverdue && <span className="text-[10px] text-red-400 tabular-nums">{task.due_date ? format(parseISO(task.due_date), 'M/d') : ''}</span>}
</div>
{/* Subtask progress bar */}
{hasSubtasks && (
<div className="absolute bottom-0 left-0 right-0 h-[2px] bg-secondary/50 rounded-full overflow-hidden">

22
frontend/src/components/reminders/ReminderItem.tsx
View File

@ -73,14 +73,14 @@ export default function ReminderItem({ reminder, onEdit }: ReminderItemProps) {
return (
<div
className={cn(
'flex items-center gap-3 px-3 py-2 rounded-md transition-colors duration-150',
'flex items-start md:items-center gap-2 md:gap-3 px-3 py-2 rounded-md transition-colors duration-150',
'hover:bg-card-elevated',
reminder.is_dismissed && 'opacity-50'
)}
>
<Bell
className={cn(
'h-4 w-4 shrink-0',
'h-4 w-4 shrink-0 mt-0.5 md:mt-0',
isOverdue
? 'text-red-400'
: reminder.is_dismissed
@ -89,9 +89,11 @@ export default function ReminderItem({ reminder, onEdit }: ReminderItemProps) {
)}
/>
{/* Content wrapper — stacks on mobile, inline on desktop */}
<div className="flex-1 min-w-0 flex flex-col md:flex-row md:items-center gap-1 md:gap-3">
<span
className={cn(
'text-sm font-medium truncate flex-1 min-w-0 cursor-pointer',
'text-sm font-medium truncate cursor-pointer md:flex-1 md:min-w-0',
reminder.is_dismissed && 'line-through text-muted-foreground'
)}
onClick={() => onEdit(reminder)}
@ -99,6 +101,7 @@ export default function ReminderItem({ reminder, onEdit }: ReminderItemProps) {
{reminder.title}
</span>
<div className="flex items-center gap-1.5 flex-wrap">
{reminder.recurrence_rule && (
<span className="text-[9px] px-1.5 py-0.5 rounded font-medium uppercase tracking-wide bg-purple-500/15 text-purple-400 shrink-0">
{recurrenceLabels[reminder.recurrence_rule] || reminder.recurrence_rule}
@ -115,14 +118,18 @@ export default function ReminderItem({ reminder, onEdit }: ReminderItemProps) {
{format(remindDate, 'MMM d, h:mm a')}
</span>
)}
</div>
</div>
{/* Actions */}
<div className="flex items-center gap-0.5 shrink-0">
{!reminder.is_dismissed && (
<Button
variant="ghost"
size="icon"
onClick={() => dismissMutation.mutate()}
disabled={dismissMutation.isPending}
className="h-7 w-7 shrink-0 hover:bg-orange-500/10 hover:text-orange-400"
className="h-7 w-7 hover:bg-orange-500/10 hover:text-orange-400"
aria-label="Dismiss reminder"
>
<BellOff className="h-3 w-3" />
@ -133,7 +140,7 @@ export default function ReminderItem({ reminder, onEdit }: ReminderItemProps) {
variant="ghost"
size="icon"
onClick={() => onEdit(reminder)}
className="h-7 w-7 shrink-0"
className="h-7 w-7"
aria-label="Edit reminder"
>
<Pencil className="h-3 w-3" />
@ -145,7 +152,7 @@ export default function ReminderItem({ reminder, onEdit }: ReminderItemProps) {
aria-label="Confirm delete"
onClick={handleDelete}
disabled={deleteMutation.isPending}
className="h-7 shrink-0 px-2 bg-destructive/20 text-destructive text-[11px] font-medium"
className="h-7 px-2 bg-destructive/20 text-destructive text-[11px] font-medium"
>
Sure?
</Button>
@ -156,11 +163,12 @@ export default function ReminderItem({ reminder, onEdit }: ReminderItemProps) {
aria-label="Delete reminder"
onClick={handleDelete}
disabled={deleteMutation.isPending}
className="h-7 w-7 shrink-0 hover:bg-destructive/10 hover:text-destructive"
className="h-7 w-7 hover:bg-destructive/10 hover:text-destructive"
>
<Trash2 className="h-3 w-3" />
</Button>
)}
</div>
</div>
);
}

66
frontend/src/components/reminders/RemindersPage.tsx
View File

@ -1,4 +1,5 @@
import { useState, useMemo, useEffect } from 'react';
import { useMediaQuery } from '@/hooks/useMediaQuery';
import { useLocation } from 'react-router-dom';
import { Plus, Bell, BellOff, AlertCircle, Search } from 'lucide-react';
import { useQuery } from '@tanstack/react-query';
@ -6,6 +7,7 @@ import { isPast, isToday, parseISO } from 'date-fns';
import api from '@/lib/api';
import type { Reminder } from '@/types';
import { Button } from '@/components/ui/button';
import { Select } from '@/components/ui/select';
import { Input } from '@/components/ui/input';
import { Card, CardContent } from '@/components/ui/card';
import { ListSkeleton } from '@/components/ui/skeleton';
@ -23,6 +25,8 @@ type StatusFilter = (typeof statusFilters)[number]['value'];
export default function RemindersPage() {
const location = useLocation();
const isDesktop = useMediaQuery('(min-width: 1024px)');
// Panel state
const [selectedReminderId, setSelectedReminderId] = useState<number | null>(null);
const [panelMode, setPanelMode] = useState<'closed' | 'view' | 'create'>('closed');
@ -99,10 +103,19 @@ export default function RemindersPage() {
return (
<div className="flex flex-col h-full animate-fade-in">
{/* Header */}
<div className="border-b bg-card px-6 h-16 flex items-center gap-4 shrink-0">
<h1 className="font-heading text-2xl font-bold tracking-tight">Reminders</h1>
<div className="border-b bg-card px-4 md:px-6 min-h-[4rem] flex items-center gap-2 md:gap-4 flex-wrap py-2 md:py-0 md:h-16 md:flex-nowrap shrink-0">
<h1 className="font-heading text-xl md:text-2xl font-bold tracking-tight">Reminders</h1>
<div className="flex items-center rounded-md border border-border overflow-hidden ml-4">
<Select
value={filter}
onChange={(e) => setFilter(e.target.value as typeof filter)}
className="h-8 text-sm w-auto pr-8 md:hidden"
>
{statusFilters.map((sf) => (
<option key={sf.value} value={sf.value}>{sf.label}</option>
))}
</Select>
<div className="hidden md:flex items-center rounded-md border border-border overflow-hidden ml-4">
{statusFilters.map((sf) => (
<button
key={sf.value}
@ -125,19 +138,18 @@ export default function RemindersPage() {
<div className="flex-1" />
<div className="relative">
<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" />
<Input
placeholder="Search..."
value={search}
onChange={(e) => setSearch(e.target.value)}
className="w-52 h-8 pl-8 text-sm ring-inset"
className="w-28 sm:w-52 h-8 pl-8 text-sm ring-inset"
/>
</div>
<Button onClick={handleCreateNew} size="sm">
<Plus className="mr-2 h-4 w-4" />
Add Reminder
<Button onClick={handleCreateNew} size="sm" className="shrink-0">
<Plus className="h-4 w-4 md:mr-2" /><span className="hidden md:inline">Add Reminder</span>
</Button>
</div>
@ -148,46 +160,46 @@ export default function RemindersPage() {
panelOpen ? 'w-full lg:w-[55%]' : 'w-full'
}`}
>
<div className="px-6 py-5">
<div className="px-4 md:px-6 py-5">
{/* Summary stats */}
{!isLoading && reminders.length > 0 && (
<div className="grid gap-2.5 grid-cols-3 mb-5">
<div className="grid gap-1.5 md:gap-2.5 grid-cols-3 mb-5">
<Card className="bg-gradient-to-br from-accent/[0.03] to-transparent">
<CardContent className="p-4 flex items-center gap-3">
<div className="p-1.5 rounded-md bg-orange-500/10">
<CardContent className="p-2.5 md:p-4 flex items-center gap-2 md:gap-3">
<div className="p-1.5 rounded-md bg-orange-500/10 hidden sm:block">
<Bell className="h-4 w-4 text-orange-400" />
</div>
<div>
<p className="text-[10px] tracking-wider uppercase text-muted-foreground">
<p className="text-[9px] md:text-[10px] tracking-wider uppercase text-muted-foreground">
Active
</p>
<p className="font-heading text-xl font-bold tabular-nums">{activeCount}</p>
<p className="font-heading text-lg md:text-xl font-bold tabular-nums">{activeCount}</p>
</div>
</CardContent>
</Card>
<Card className="bg-gradient-to-br from-accent/[0.03] to-transparent">
<CardContent className="p-4 flex items-center gap-3">
<div className="p-1.5 rounded-md bg-red-500/10">
<CardContent className="p-2.5 md:p-4 flex items-center gap-2 md:gap-3">
<div className="p-1.5 rounded-md bg-red-500/10 hidden sm:block">
<AlertCircle className="h-4 w-4 text-red-400" />
</div>
<div>
<p className="text-[10px] tracking-wider uppercase text-muted-foreground">
<p className="text-[9px] md:text-[10px] tracking-wider uppercase text-muted-foreground">
Overdue
</p>
<p className="font-heading text-xl font-bold tabular-nums">{overdueCount}</p>
<p className="font-heading text-lg md:text-xl font-bold tabular-nums">{overdueCount}</p>
</div>
</CardContent>
</Card>
<Card className="bg-gradient-to-br from-accent/[0.03] to-transparent">
<CardContent className="p-4 flex items-center gap-3">
<div className="p-1.5 rounded-md bg-gray-500/10">
<CardContent className="p-2.5 md:p-4 flex items-center gap-2 md:gap-3">
<div className="p-1.5 rounded-md bg-gray-500/10 hidden sm:block">
<BellOff className="h-4 w-4 text-gray-400" />
</div>
<div>
<p className="text-[10px] tracking-wider uppercase text-muted-foreground">
<p className="text-[9px] md:text-[10px] tracking-wider uppercase text-muted-foreground">
Dismissed
</p>
<p className="font-heading text-xl font-bold tabular-nums">{dismissedCount}</p>
<p className="font-heading text-lg md:text-xl font-bold tabular-nums">{dismissedCount}</p>
</div>
</CardContent>
</Card>
@ -207,10 +219,9 @@ export default function RemindersPage() {
</div>
{/* Detail panel (desktop) */}
{panelOpen && isDesktop && (
<div
className={`overflow-hidden transition-all duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] ${
panelOpen ? 'hidden lg:block lg:w-[45%]' : 'w-0 opacity-0'
}`}
className="overflow-hidden transition-all duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] w-[45%]"
>
<ReminderDetailPanel
reminder={panelMode === 'view' ? selectedReminder : null}
@ -219,12 +230,13 @@ export default function RemindersPage() {
onSaved={panelMode === 'create' ? handlePanelClose : undefined}
/>
</div>
)}
</div>
{/* Mobile detail panel overlay */}
{panelOpen && (
{panelOpen && !isDesktop && (
<div
className="lg:hidden fixed inset-0 z-50 bg-background/80 backdrop-blur-sm"
className="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm"
onClick={handlePanelClose}
>
<div

2
frontend/src/components/settings/SettingsPage.tsx
View File

@ -344,7 +344,7 @@ export default function SettingsPage() {
return (
<div className="flex flex-col h-full animate-fade-in">
{/* Page header — matches Stage 4-5 pages */}
<div className="border-b bg-card px-6 h-16 flex items-center gap-3 shrink-0">
<div className="border-b bg-card px-4 md:px-6 h-16 flex items-center gap-3 shrink-0">
<Settings className="h-5 w-5 text-accent" aria-hidden="true" />
<h1 className="text-xl font-semibold font-heading">Settings</h1>
</div>

53
frontend/src/components/shared/CategoryFilterBar.tsx
View File

@ -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
className="flex items-center gap-1.5 overflow-x-auto transition-all duration-200 ease-out"
style={{
maxWidth: otherOpen ? '100vw' : '0px',
opacity: otherOpen ? 1 : 0,
overflow: 'hidden',
}}
>
{/* Search */}
<div className="flex-1" />
<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-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>
);
}

2
frontend/src/components/shared/CopyableField.tsx
View File

@ -27,7 +27,7 @@ export default function CopyableField({ value, icon: Icon, label }: CopyableFiel
type="button"
onClick={handleCopy}
aria-label={`Copy ${label || value}`}
className="opacity-0 group-hover:opacity-100 transition-opacity duration-150 p-0.5 rounded text-muted-foreground hover:text-foreground shrink-0"
className="opacity-100 md:opacity-0 md:group-hover:opacity-100 transition-opacity duration-150 p-0.5 rounded text-muted-foreground hover:text-foreground shrink-0"
>
{copied ? <Check className="h-3.5 w-3.5" /> : <Copy className="h-3.5 w-3.5" />}
</button>

43
frontend/src/components/shared/EntityTable.tsx
View File

@ -1,6 +1,7 @@
import React from 'react';
import { ArrowUpDown, ArrowUp, ArrowDown } from 'lucide-react';
import type { VisibilityMode } from '@/hooks/useTableVisibility';
import { useMediaQuery } from '@/hooks/useMediaQuery';
export interface ColumnDef<T> {
key: string;
@ -28,6 +29,7 @@ interface EntityTableProps<T extends { id: number }> {
onSort: (key: string) => void;
visibilityMode: VisibilityMode;
loading?: boolean;
mobileCardRender?: (item: T) => React.ReactNode;
}
const LEVEL_ORDER: VisibilityMode[] = ['essential', 'filtered', 'all'];
@ -127,10 +129,51 @@ export function EntityTable<T extends { id: number }>({
onSort,
visibilityMode,
loading = false,
mobileCardRender,
}: EntityTableProps<T>) {
const visibleColumns = columns.filter((col) => isVisible(col.visibilityLevel, visibilityMode));
const colCount = visibleColumns.length;
const showPinnedSection = showPinned && pinnedRows.length > 0;
const isMobile = useMediaQuery('(max-width: 767px)');
if (isMobile && mobileCardRender) {
return (
<div className="space-y-2">
{loading ? (
Array.from({ length: 6 }).map((_, i) => (
<div key={i} className="animate-pulse rounded-lg bg-card border border-border p-4 h-20" />
))
) : (
<>
{showPinnedSection && (
<>
<p className="text-[11px] uppercase tracking-wider text-muted-foreground font-medium pt-2">{pinnedLabel}</p>
{pinnedRows.map((item) => (
<div key={item.id} onClick={() => onRowClick(item.id)} className="cursor-pointer" role="button" tabIndex={0} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onRowClick(item.id); } }}>
{mobileCardRender(item)}
</div>
))}
</>
)}
{groups.map((group) => (
<React.Fragment key={group.label}>
{group.rows.length > 0 && (
<>
<p className="text-[11px] uppercase tracking-wider text-muted-foreground font-medium pt-2">{group.label}</p>
{group.rows.map((item) => (
<div key={item.id} onClick={() => onRowClick(item.id)} className="cursor-pointer" role="button" tabIndex={0} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onRowClick(item.id); } }}>
{mobileCardRender(item)}
</div>
))}
</>
)}
</React.Fragment>
))}
</>
)}
</div>
);
}
return (
<div className="w-full">

28
frontend/src/components/todos/TodoItem.tsx
View File

@ -52,7 +52,6 @@ export default function TodoItem({ todo, onEdit }: TodoItemProps) {
await api.delete(`/todos/${todo.id}`);
},
onMutate: async () => {
// Optimistic removal
await queryClient.cancelQueries({ queryKey: ['todos'] });
const previous = queryClient.getQueryData<Todo[]>(['todos']);
queryClient.setQueryData<Todo[]>(['todos'], (old) =>
@ -65,7 +64,6 @@ export default function TodoItem({ todo, onEdit }: TodoItemProps) {
toast.success('Todo deleted');
},
onError: (_err, _vars, context) => {
// Rollback on failure
if (context?.previous) {
queryClient.setQueryData(['todos'], context.previous);
}
@ -87,7 +85,7 @@ export default function TodoItem({ todo, onEdit }: TodoItemProps) {
return (
<div
className={cn(
'flex items-center gap-3 px-3 py-2 rounded-md transition-colors duration-150',
'flex items-start md:items-center gap-2 md:gap-3 px-3 py-2 rounded-md transition-colors duration-150',
'hover:bg-card-elevated',
todo.completed && 'opacity-50'
)}
@ -96,11 +94,15 @@ export default function TodoItem({ todo, onEdit }: TodoItemProps) {
checked={todo.completed}
onChange={() => toggleMutation.mutate()}
disabled={toggleMutation.isPending}
className="mt-0.5 md:mt-0"
/>
{/* Content wrapper — stacks on mobile, inline on desktop */}
<div className="flex-1 min-w-0 flex flex-col md:flex-row md:items-center gap-1 md:gap-3">
{/* Title row — always takes full width on mobile */}
<span
className={cn(
'text-sm font-medium truncate flex-1 min-w-0 cursor-pointer',
'text-sm font-medium truncate cursor-pointer md:flex-1 md:min-w-0',
todo.completed && 'line-through text-muted-foreground'
)}
onClick={() => onEdit(todo)}
@ -108,7 +110,8 @@ export default function TodoItem({ todo, onEdit }: TodoItemProps) {
{todo.title}
</span>
{/* Inline pills */}
{/* Metadata row — wraps on second line on mobile */}
<div className="flex items-center gap-1.5 flex-wrap">
<span
className={cn(
'text-[9px] px-1.5 py-0.5 rounded-full font-medium shrink-0',
@ -130,14 +133,13 @@ export default function TodoItem({ todo, onEdit }: TodoItemProps) {
</span>
)}
{/* Date / time / reset info — right-aligned cluster */}
{showResetInfo ? (
<div className="flex items-center gap-1 text-[11px] text-purple-400 shrink-0">
<RefreshCw className="h-3 w-3" />
<span>
Resets {format(resetDate, 'EEE dd/MM')}
{nextDueDate && (
<> · Due {format(nextDueDate, 'dd/MM')}{todo.due_time ? ` ${todo.due_time.slice(0, 5)}` : ''}</>
<>{' \u00b7 '}Due {format(nextDueDate, 'dd/MM')}{todo.due_time ? ` ${todo.due_time.slice(0, 5)}` : ''}</>
)}
</span>
</div>
@ -151,7 +153,7 @@ export default function TodoItem({ todo, onEdit }: TodoItemProps) {
)}
>
{isOverdue ? <AlertCircle className="h-3 w-3" /> : <Calendar className="h-3 w-3" />}
{isOverdue ? 'Overdue · ' : isDueToday ? 'Today · ' : ''}
{isOverdue ? 'Overdue \u00b7 ' : isDueToday ? 'Today \u00b7 ' : ''}
{format(dueDate, 'MMM d')}
</span>
)}
@ -163,9 +165,12 @@ export default function TodoItem({ todo, onEdit }: TodoItemProps) {
)}
</>
)}
</div>
</div>
{/* Actions */}
<Button variant="ghost" size="icon" onClick={() => onEdit(todo)} className="h-7 w-7 shrink-0" aria-label="Edit todo">
<div className="flex items-center gap-0.5 shrink-0">
<Button variant="ghost" size="icon" onClick={() => onEdit(todo)} className="h-7 w-7" aria-label="Edit todo">
<Pencil className="h-3 w-3" />
</Button>
{confirmingDelete ? (
@ -174,7 +179,7 @@ export default function TodoItem({ todo, onEdit }: TodoItemProps) {
aria-label="Confirm delete"
onClick={handleDelete}
disabled={deleteMutation.isPending}
className="h-7 shrink-0 px-2 bg-destructive/20 text-destructive text-[11px] font-medium"
className="h-7 px-2 bg-destructive/20 text-destructive text-[11px] font-medium"
>
Sure?
</Button>
@ -185,11 +190,12 @@ export default function TodoItem({ todo, onEdit }: TodoItemProps) {
aria-label="Delete todo"
onClick={handleDelete}
disabled={deleteMutation.isPending}
className="h-7 w-7 shrink-0 hover:bg-destructive/10 hover:text-destructive"
className="h-7 w-7 hover:bg-destructive/10 hover:text-destructive"
>
<Trash2 className="h-3 w-3" />
</Button>
)}
</div>
</div>
);
}

62
frontend/src/components/todos/TodosPage.tsx
View File

@ -1,4 +1,5 @@
import { useState, useMemo, useEffect } from 'react';
import { useMediaQuery } from '@/hooks/useMediaQuery';
import { useLocation } from 'react-router-dom';
import { Plus, CheckSquare, CheckCircle2, AlertCircle } from 'lucide-react';
import { useQuery } from '@tanstack/react-query';
@ -6,6 +7,7 @@ import api from '@/lib/api';
import type { Todo } from '@/types';
import { isTodoOverdue } from '@/lib/utils';
import { Button } from '@/components/ui/button';
import { Select } from '@/components/ui/select';
import { Card, CardContent } from '@/components/ui/card';
import { ListSkeleton } from '@/components/ui/skeleton';
import { CategoryFilterBar } from '@/components/shared';
@ -24,6 +26,8 @@ const priorityFilters = [
export default function TodosPage() {
const location = useLocation();
const isDesktop = useMediaQuery('(min-width: 1024px)');
// Panel state
const [selectedTodoId, setSelectedTodoId] = useState<number | null>(null);
const [panelMode, setPanelMode] = useState<'closed' | 'view' | 'create'>('closed');
@ -128,11 +132,20 @@ export default function TodosPage() {
return (
<div className="flex flex-col h-full animate-fade-in">
{/* Header */}
<div className="border-b bg-card px-6 h-16 flex items-center gap-4 shrink-0">
<h1 className="font-heading text-2xl font-bold tracking-tight">Todos</h1>
<div className="border-b bg-card px-4 md:px-6 min-h-[4rem] flex items-center gap-2 md:gap-4 flex-wrap py-2 md:py-0 md:h-16 md:flex-nowrap shrink-0">
<h1 className="font-heading text-xl md:text-2xl font-bold tracking-tight">Todos</h1>
{/* Priority filter */}
<div className="flex items-center rounded-md border border-border overflow-hidden ml-4">
<Select
value={priorityFilter}
onChange={(e) => setPriorityFilter(e.target.value as typeof priorityFilter)}
className="h-8 text-sm w-auto pr-8 md:hidden"
>
{priorityFilters.map((pf) => (
<option key={pf.value} value={pf.value}>{pf.label}</option>
))}
</Select>
<div className="hidden md:flex items-center rounded-md border border-border overflow-hidden ml-4">
{priorityFilters.map((pf) => (
<button
key={pf.value}
@ -154,7 +167,7 @@ export default function TodosPage() {
</div>
{/* Category filter bar (All + Completed + Categories with drag) */}
<div className="flex-1 min-w-0">
<div className="w-full md:flex-1 md:w-auto min-w-0 order-last md:order-none">
<CategoryFilterBar
activeFilters={activeFilters}
pinnedLabel="Completed"
@ -171,8 +184,7 @@ export default function TodosPage() {
</div>
<Button onClick={handleCreateNew} size="sm">
<Plus className="mr-2 h-4 w-4" />
Add Todo
<Plus className="h-4 w-4 md:mr-2" /><span className="hidden md:inline">Add Todo</span>
</Button>
</div>
@ -183,46 +195,46 @@ export default function TodosPage() {
panelOpen ? 'w-full lg:w-[55%]' : 'w-full'
}`}
>
<div className="px-6 py-5">
<div className="px-4 md:px-6 py-5">
{/* Summary stats */}
{!isLoading && todos.length > 0 && (
<div className="grid gap-2.5 grid-cols-3 mb-5">
<div className="grid gap-1.5 md:gap-2.5 grid-cols-3 mb-5">
<Card className="bg-gradient-to-br from-accent/[0.03] to-transparent">
<CardContent className="p-4 flex items-center gap-3">
<div className="p-1.5 rounded-md bg-blue-500/10">
<CardContent className="p-2.5 md:p-4 flex items-center gap-2 md:gap-3">
<div className="p-1.5 rounded-md bg-blue-500/10 hidden sm:block">
<CheckSquare className="h-4 w-4 text-blue-400" />
</div>
<div>
<p className="text-[10px] tracking-wider uppercase text-muted-foreground">
<p className="text-[9px] md:text-[10px] tracking-wider uppercase text-muted-foreground">
Open
</p>
<p className="font-heading text-xl font-bold tabular-nums">{totalCount}</p>
<p className="font-heading text-lg md:text-xl font-bold tabular-nums">{totalCount}</p>
</div>
</CardContent>
</Card>
<Card className="bg-gradient-to-br from-accent/[0.03] to-transparent">
<CardContent className="p-4 flex items-center gap-3">
<div className="p-1.5 rounded-md bg-green-500/10">
<CardContent className="p-2.5 md:p-4 flex items-center gap-2 md:gap-3">
<div className="p-1.5 rounded-md bg-green-500/10 hidden sm:block">
<CheckCircle2 className="h-4 w-4 text-green-400" />
</div>
<div>
<p className="text-[10px] tracking-wider uppercase text-muted-foreground">
<p className="text-[9px] md:text-[10px] tracking-wider uppercase text-muted-foreground">
Completed
</p>
<p className="font-heading text-xl font-bold tabular-nums">{completedCount}</p>
<p className="font-heading text-lg md:text-xl font-bold tabular-nums">{completedCount}</p>
</div>
</CardContent>
</Card>
<Card className="bg-gradient-to-br from-accent/[0.03] to-transparent">
<CardContent className="p-4 flex items-center gap-3">
<div className="p-1.5 rounded-md bg-red-500/10">
<CardContent className="p-2.5 md:p-4 flex items-center gap-2 md:gap-3">
<div className="p-1.5 rounded-md bg-red-500/10 hidden sm:block">
<AlertCircle className="h-4 w-4 text-red-400" />
</div>
<div>
<p className="text-[10px] tracking-wider uppercase text-muted-foreground">
<p className="text-[9px] md:text-[10px] tracking-wider uppercase text-muted-foreground">
Overdue
</p>
<p className="font-heading text-xl font-bold tabular-nums">{overdueCount}</p>
<p className="font-heading text-lg md:text-xl font-bold tabular-nums">{overdueCount}</p>
</div>
</CardContent>
</Card>
@ -242,10 +254,9 @@ export default function TodosPage() {
</div>
{/* Detail panel (desktop) */}
{panelOpen && isDesktop && (
<div
className={`overflow-hidden transition-all duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] ${
panelOpen ? 'hidden lg:block lg:w-[45%]' : 'w-0 opacity-0'
}`}
className="overflow-hidden transition-all duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] w-[45%]"
>
<TodoDetailPanel
todo={panelMode === 'view' ? selectedTodo : null}
@ -254,12 +265,13 @@ export default function TodosPage() {
onSaved={panelMode === 'create' ? handlePanelClose : undefined}
/>
</div>
)}
</div>
{/* Mobile detail panel overlay */}
{panelOpen && (
{panelOpen && !isDesktop && (
<div
className="lg:hidden fixed inset-0 z-50 bg-background/80 backdrop-blur-sm"
className="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm"
onClick={handlePanelClose}
>
<div

2
frontend/src/components/ui/button.tsx
View File

@ -18,7 +18,7 @@ const buttonVariants = cva(
default: 'h-10 px-4 py-2',
sm: 'h-9 rounded-md px-3',
lg: 'h-11 rounded-md px-8',
icon: 'h-10 w-10',
icon: 'h-10 w-10 min-h-[44px] min-w-[44px] md:min-h-0 md:min-w-0',
},
},
defaultVariants: {

6
frontend/src/components/ui/date-picker.tsx
View File

@ -2,6 +2,7 @@ import * as React from 'react';
import { createPortal } from 'react-dom';
import { Calendar, ChevronLeft, ChevronRight, Clock } from 'lucide-react';
import { cn } from '@/lib/utils';
import { useMediaQuery } from '@/hooks/useMediaQuery';
// ── Browser detection (stable — checked once at module load) ──
@ -127,6 +128,7 @@ const DatePicker = React.forwardRef<HTMLButtonElement, DatePickerProps>(
const blurTimeoutRef = React.useRef<ReturnType<typeof setTimeout>>();
const [pos, setPos] = React.useState<{ top: number; left: number }>({ top: 0, left: 0 });
const isMobile = useMediaQuery('(max-width: 767px)');
React.useImperativeHandle(ref, () => triggerRef.current!);
@ -324,8 +326,8 @@ const DatePicker = React.forwardRef<HTMLButtonElement, DatePickerProps>(
<div
ref={popupRef}
onMouseDown={(e) => e.stopPropagation()}
style={{ position: 'fixed', top: pos.top, left: pos.left, zIndex: 60 }}
className="w-[280px] rounded-lg border border-input bg-card shadow-lg animate-fade-in"
style={isMobile ? { position: 'fixed', bottom: 0, left: 0, right: 0, zIndex: 60 } : { position: 'fixed', top: pos.top, left: pos.left, zIndex: 60 }}
className={isMobile ? 'w-full rounded-t-lg border border-input bg-card shadow-lg animate-fade-in pb-[env(safe-area-inset-bottom)]' : 'w-[280px] rounded-lg border border-input bg-card shadow-lg animate-fade-in'}
>
{/* Month/Year nav */}
<div className="flex items-center justify-between px-3 pt-3 pb-2">

2
frontend/src/components/ui/input.tsx
View File

@ -9,7 +9,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
<input
type={type}
className={cn(
'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base md:text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
className
)}
ref={ref}

2
frontend/src/components/ui/select.tsx
View File

@ -10,7 +10,7 @@ const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
<div className="relative">
<select
className={cn(
'flex h-10 w-full appearance-none rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 invalid:ring-red-500 invalid:border-red-500',
'flex h-10 w-full appearance-none rounded-md border border-input bg-background px-3 py-2 text-base md:text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 invalid:ring-red-500 invalid:border-red-500',
className
)}
ref={ref}

2
frontend/src/components/ui/sheet.tsx
View File

@ -60,7 +60,7 @@ const Sheet: React.FC<SheetProps> = ({ open, onOpenChange, children }) => {
role="dialog"
aria-modal="true"
className={cn(
'fixed right-0 top-0 h-full w-full max-w-[540px] transition-transform duration-350',
'fixed right-0 top-0 h-full w-full sm:max-w-[540px] transition-transform duration-350',
visible ? 'translate-x-0' : 'translate-x-full'
)}
style={{ transitionTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)' }}

16
frontend/src/hooks/useMediaQuery.ts Normal file
View File

@ -0,0 +1,16 @@
import { useState, useEffect } from 'react';
export function useMediaQuery(query: string): boolean {
const [matches, setMatches] = useState(() =>
typeof window !== 'undefined' ? window.matchMedia(query).matches : false
);
useEffect(() => {
const mql = window.matchMedia(query);
const handler = (e: MediaQueryListEvent) => setMatches(e.matches);
mql.addEventListener('change', handler);
return () => mql.removeEventListener('change', handler);
}, [query]);
return matches;
}

148
frontend/src/index.css
View File

@ -193,6 +193,74 @@
font-weight: 600;
}
/* ── FullCalendar "+more" popover fixes ── */
.fc .fc-more-popover {
background-color: hsl(0 0% 5%);
border-color: hsl(0 0% 14.9%);
border-radius: 0.5rem;
min-width: 220px;
box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.5);
}
.fc .fc-more-popover .fc-popover-header {
background-color: hsl(0 0% 7%);
color: hsl(0 0% 98%);
padding: 8px 12px;
border-radius: 0.5rem 0.5rem 0 0;
}
.fc .fc-more-popover .fc-popover-body {
padding: 8px;
}
/* Fix broken close icon — replace font icon with a CSS X */
.fc .fc-more-popover .fc-popover-close {
font-size: 0;
width: 24px;
height: 24px;
position: relative;
opacity: 0.7;
cursor: pointer;
}
.fc .fc-more-popover .fc-popover-close:hover {
opacity: 1;
}
.fc .fc-more-popover .fc-popover-close::before,
.fc .fc-more-popover .fc-popover-close::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 14px;
height: 2px;
background-color: hsl(0 0% 98%);
border-radius: 1px;
}
.fc .fc-more-popover .fc-popover-close::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.fc .fc-more-popover .fc-popover-close::after {
transform: translate(-50%, -50%) rotate(-45deg);
}
@media (max-width: 767px) {
.fc .fc-more-popover {
min-width: 200px;
}
.fc .fc-more-popover .fc-popover-body {
padding: 6px;
}
.fc .fc-more-popover .fc-daygrid-event {
font-size: 0.7rem;
padding: 2px 6px;
margin-bottom: 2px;
}
}
/* ── Chromium native date picker icon fix (safety net) ── */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
@ -223,6 +291,86 @@ form[data-submitted] input:invalid + button {
box-shadow: 0 0 0 2px hsl(0 62.8% 50% / 0.25);
}
/* ── 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 */
}
}
/* ── Mobile touch optimisation ── */
@media (max-width: 767px) {
button, a, [role="button"], input, select, textarea {
touch-action: manipulation;
}
}
/* ── FullCalendar mobile overrides ── */
@media (max-width: 767px) {
.fc .fc-daygrid-event {
font-size: 0.6rem;
padding: 0 2px;
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.6rem;
}
.fc .fc-timegrid-event .fc-event-main {
padding: 1px 2px;
}
.fc .fc-daygrid-day-number {
font-size: 0.7rem;
padding: 2px 4px;
}
.fc .fc-col-header-cell-cushion {
font-size: 0.65rem;
padding: 3px 2px;
}
.fc .fc-timegrid-slot-label {
font-size: 0.6rem;
}
.fc .fc-daygrid-more-link {
font-size: 0.625rem;
}
}
/* ── Ambient background animations ── */
@keyframes drift-1 {

1
frontend/tailwind.config.ts
View File

@ -1,6 +1,7 @@
import type { Config } from 'tailwindcss';
export default {
future: { hoverOnlyWhenSupported: true },
darkMode: ['class'],
content: [
'./index.html',