Files
scrapy-ui/app/layout.tsx
Sebastian Krüger c8184b0984 feat: Add comprehensive mobile responsiveness
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>
2025-11-05 05:47:41 +01:00

41 lines
987 B
TypeScript

import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import { ThemeProvider } from "@/components/theme-provider";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
export const metadata: Metadata = {
title: "Scrapy UI - Scrapyd Management Interface",
description: "Manage and monitor your Scrapyd scraping projects",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en" className={`${geistSans.className} ${geistMono.className} antialiased`} suppressHydrationWarning>
<body>
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
{children}
</ThemeProvider>
</body>
</html>
);
}