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>
This commit is contained in:
@@ -118,7 +118,7 @@ export default function ProjectsPage() {
|
||||
Upload Project
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogContent className="max-w-[95vw] sm:max-w-[425px]">
|
||||
<form onSubmit={handleUpload}>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Upload Project Version</DialogTitle>
|
||||
@@ -126,7 +126,7 @@ export default function ProjectsPage() {
|
||||
Upload a Python egg file for your Scrapy project
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="gap-4 py-4">
|
||||
<div className="space-y-4 py-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="project">Project Name</Label>
|
||||
<Input
|
||||
@@ -156,10 +156,11 @@ export default function ProjectsPage() {
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<DialogFooter className="gap-2 sm:gap-0">
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={uploadVersionMutation.isPending}
|
||||
className="w-full sm:w-auto"
|
||||
>
|
||||
{uploadVersionMutation.isPending
|
||||
? "Uploading..."
|
||||
@@ -185,90 +186,94 @@ export default function ProjectsPage() {
|
||||
))}
|
||||
</div>
|
||||
) : projects?.projects && projects.projects.length > 0 ? (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Project Name</TableHead>
|
||||
<TableHead>Versions</TableHead>
|
||||
<TableHead className="text-right">Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{projects.projects.map((project) => (
|
||||
<TableRow
|
||||
key={project}
|
||||
onClick={() => setSelectedProject(project)}
|
||||
className="cursor-pointer"
|
||||
>
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-2">
|
||||
<FolderKanban className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="font-medium">{project}</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{selectedProject === project && versions ? (
|
||||
<Badge variant="secondary">
|
||||
{versions.versions.length} version(s)
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge variant="outline">Click to load</Badge>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<Dialog
|
||||
open={deleteDialogOpen && selectedProject === project}
|
||||
onOpenChange={(open) => {
|
||||
setDeleteDialogOpen(open);
|
||||
if (open) setSelectedProject(project);
|
||||
}}
|
||||
>
|
||||
<DialogTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setSelectedProject(project);
|
||||
}}
|
||||
>
|
||||
<Trash2 className="h-4 w-4 text-destructive" />
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Delete Project</DialogTitle>
|
||||
<DialogDescription>
|
||||
Are you sure you want to delete "{project}"? This
|
||||
action cannot be undone.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setDeleteDialogOpen(false)}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={() =>
|
||||
deleteProjectMutation.mutate(project)
|
||||
}
|
||||
disabled={deleteProjectMutation.isPending}
|
||||
>
|
||||
{deleteProjectMutation.isPending
|
||||
? "Deleting..."
|
||||
: "Delete"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</TableCell>
|
||||
<div className="overflow-x-auto">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Project Name</TableHead>
|
||||
<TableHead>Versions</TableHead>
|
||||
<TableHead className="text-right">Actions</TableHead>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{projects.projects.map((project) => (
|
||||
<TableRow
|
||||
key={project}
|
||||
onClick={() => setSelectedProject(project)}
|
||||
className="cursor-pointer"
|
||||
>
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-2 whitespace-nowrap">
|
||||
<FolderKanban className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="font-medium">{project}</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{selectedProject === project && versions ? (
|
||||
<Badge variant="secondary" className="whitespace-nowrap">
|
||||
{versions.versions.length} version(s)
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge variant="outline" className="whitespace-nowrap">Click to load</Badge>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<Dialog
|
||||
open={deleteDialogOpen && selectedProject === project}
|
||||
onOpenChange={(open) => {
|
||||
setDeleteDialogOpen(open);
|
||||
if (open) setSelectedProject(project);
|
||||
}}
|
||||
>
|
||||
<DialogTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setSelectedProject(project);
|
||||
}}
|
||||
>
|
||||
<Trash2 className="h-4 w-4 text-destructive" />
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="max-w-[95vw] sm:max-w-[425px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Delete Project</DialogTitle>
|
||||
<DialogDescription>
|
||||
Are you sure you want to delete "{project}"? This
|
||||
action cannot be undone.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter className="gap-2 sm:gap-0">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setDeleteDialogOpen(false)}
|
||||
className="w-full sm:w-auto"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={() =>
|
||||
deleteProjectMutation.mutate(project)
|
||||
}
|
||||
disabled={deleteProjectMutation.isPending}
|
||||
className="w-full sm:w-auto"
|
||||
>
|
||||
{deleteProjectMutation.isPending
|
||||
? "Deleting..."
|
||||
: "Delete"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center py-12 text-center">
|
||||
<AlertCircle className="mb-4 h-12 w-12 text-muted-foreground" />
|
||||
|
||||
Reference in New Issue
Block a user