Sebastian Krüger
c8184b0984
Implemented complete mobile styling improvements for Scrapy UI: - Mobile-responsive sidebar with hamburger menu (Sheet component) - Sidebar hidden on mobile, slides in from left as overlay - Auto-closes on navigation - Mobile header with hamburger button, title, and theme toggle - Layout switches from horizontal to vertical flexbox on mobile - Reduced container padding on mobile (p-4 vs p-6) - All tables wrapped in horizontal scroll containers - Added whitespace-nowrap to prevent text wrapping in table cells - Optimized all dialogs for mobile: - Responsive width: max-w-[95vw] on mobile, max-w-[425px] on desktop - Full-width buttons on mobile - Proper gap spacing in footers - Text wrapping for long content (break-all for Job IDs) - Dashboard cards already responsive with grid breakpoints App now works flawlessly on mobile devices! 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
33 lines
953 B
TypeScript
33 lines
953 B
TypeScript
import { Sidebar, MobileSidebar } from "@/components/sidebar";
|
|
import { Providers } from "@/components/providers";
|
|
import { ThemeToggle } from "@/components/theme-toggle";
|
|
|
|
export default function DashboardLayout({
|
|
children,
|
|
}: {
|
|
children: React.ReactNode;
|
|
}) {
|
|
return (
|
|
<Providers>
|
|
<div className="flex h-screen flex-col overflow-hidden md:flex-row">
|
|
{/* Mobile Header */}
|
|
<header className="flex h-16 items-center justify-between border-b bg-card px-4 md:hidden">
|
|
<div className="flex items-center gap-3">
|
|
<MobileSidebar />
|
|
<h1 className="text-lg font-bold">Scrapy UI</h1>
|
|
</div>
|
|
<ThemeToggle />
|
|
</header>
|
|
|
|
{/* Desktop Sidebar */}
|
|
<Sidebar />
|
|
|
|
{/* Main Content */}
|
|
<main className="flex-1 overflow-y-auto">
|
|
<div className="container p-4 md:p-6">{children}</div>
|
|
</main>
|
|
</div>
|
|
</Providers>
|
|
);
|
|
}
|