valknar/scrapy-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add comprehensive mobile responsiveness

Browse Source 
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>
This commit is contained in:
Sebastian Krüger
2025-11-05 05:47:41 +01:00
parent 971ef5426d
commit c8184b0984
7 changed files with 475 additions and 267 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/layout.tsx
View File

@@ -24,10 +24,8 @@ export default function RootLayout({
children: React.ReactNode;
}>) {
return (
<html lang="en" suppressHydrationWarning>
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
<html lang="en" className={`${geistSans.className} ${geistMono.className} antialiased`} suppressHydrationWarning>
<body>
<ThemeProvider
attribute="class"
defaultTheme="system"