diff --git a/frontend/src/components/Button.tsx b/frontend/src/components/Button.tsx index fe6f106e3..e4bcc04fd 100644 --- a/frontend/src/components/Button.tsx +++ b/frontend/src/components/Button.tsx @@ -26,9 +26,9 @@ export function Button({ }; const sizes = { - sm: 'px-3 py-1.5 text-sm gap-1.5', - md: 'px-4 py-2 text-sm gap-2', - lg: 'px-6 py-3 text-base gap-2', + sm: 'px-3 py-1.5 text-sm gap-1.5 min-h-[44px] md:min-h-0', + md: 'px-4 py-2 text-sm gap-2 min-h-[44px] md:min-h-0', + lg: 'px-6 py-3 text-base gap-2 min-h-[48px] md:min-h-0', }; return ( diff --git a/frontend/src/components/Dashboard.tsx b/frontend/src/components/Dashboard.tsx index 3cf38a658..28661cedd 100644 --- a/frontend/src/components/Dashboard.tsx +++ b/frontend/src/components/Dashboard.tsx @@ -93,7 +93,7 @@ function SortableWidget({ className="cursor-grab active:cursor-grabbing p-1 hover:bg-bambu-dark-tertiary rounded transition-colors" title="Drag to reorder" > - +

{title}

diff --git a/frontend/src/components/ExternalLinksSettings.tsx b/frontend/src/components/ExternalLinksSettings.tsx index 1aae299ff..d794480b6 100644 --- a/frontend/src/components/ExternalLinksSettings.tsx +++ b/frontend/src/components/ExternalLinksSettings.tsx @@ -117,7 +117,7 @@ export function ExternalLinksSettings() { draggedId === link.id ? 'opacity-50' : '' }`} > - +
diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx index 45b2c3f1c..1991affd7 100644 --- a/frontend/src/components/Layout.tsx +++ b/frontend/src/components/Layout.tsx @@ -1,12 +1,13 @@ import { useState, useEffect, useCallback, useRef } from 'react'; import { NavLink, Outlet, useNavigate, useLocation } from 'react-router-dom'; -import { Printer, Archive, Calendar, BarChart3, Cloud, Settings, Sun, Moon, ChevronLeft, ChevronRight, Keyboard, Github, GripVertical, ArrowUpCircle, Wrench, X, type LucideIcon } from 'lucide-react'; +import { Printer, Archive, Calendar, BarChart3, Cloud, Settings, Sun, Moon, ChevronLeft, ChevronRight, Keyboard, Github, GripVertical, ArrowUpCircle, Wrench, X, Menu, type LucideIcon } from 'lucide-react'; import { useTranslation } from 'react-i18next'; import { useTheme } from '../contexts/ThemeContext'; import { KeyboardShortcutsModal } from './KeyboardShortcutsModal'; import { useQuery } from '@tanstack/react-query'; import { api } from '../api/client'; import { getIconByName } from './IconPicker'; +import { useIsMobile } from '../hooks/useIsMobile'; interface NavItem { id: string; @@ -63,10 +64,12 @@ export function Layout() { const location = useLocation(); const { theme, toggleTheme } = useTheme(); const { t } = useTranslation(); + const isMobile = useIsMobile(); const [sidebarExpanded, setSidebarExpanded] = useState(() => { const stored = localStorage.getItem('sidebarExpanded'); return stored !== 'false'; }); + const [mobileDrawerOpen, setMobileDrawerOpen] = useState(false); const [showShortcuts, setShowShortcuts] = useState(false); const [sidebarOrder, setSidebarOrder] = useState(getSidebarOrder); const [draggedId, setDraggedId] = useState(null); @@ -219,6 +222,13 @@ export function Layout() { localStorage.setItem('sidebarExpanded', String(sidebarExpanded)); }, [sidebarExpanded]); + // Close mobile drawer on navigation + useEffect(() => { + if (isMobile) { + setMobileDrawerOpen(false); + } + }, [location.pathname, isMobile]); + // Global keyboard shortcuts for navigation const handleKeyDown = useCallback((e: KeyboardEvent) => { const target = e.target as HTMLElement; @@ -259,16 +269,46 @@ export function Layout() { return (
- {/* Sidebar */} -