TopDogLabs/gantt-board
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make Project Hub responsive for mobile devices

Browse Source 
- Header: Smaller text on mobile, hide stats on small screens
- Layout: Stack sidebar above content on mobile, side-by-side on desktop
- Kanban: 1 column on mobile, 2 on tablet, 4 on desktop
- Task dialog: Stack type/priority/status on mobile
- Dialogs: Use 95vw width with max-width for better mobile fit
This commit is contained in:
Matt Bruce 2026-02-18 09:41:23 -06:00
parent 7badcb8bba
commit dbf68e4640
1 changed files with 14 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/app/page.tsx
View File

@ -109,26 +109,26 @@ export default function Home() {
<div className="max-w-[1800px] mx-auto px-4 py-4">
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
<h1 className="text-xl md:text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
OpenClaw Project Hub
</h1>
<p className="text-sm text-slate-400 mt-1">
<p className="text-xs md:text-sm text-slate-400 mt-1">
Track ideas, tasks, bugs, and plans — with threaded notes
</p>
</div>
<div className="flex items-center gap-2">
<span className="text-sm text-slate-400">
{tasks.length} tasks across {projects.length} projects
<span className="hidden md:inline text-sm text-slate-400">
{tasks.length} tasks · {projects.length} projects
</span>
</div>
</div>
</div>
</header>
<div className="max-w-[1800px] mx-auto px-4 py-6">
<div className="flex gap-6">
<div className="max-w-[1800px] mx-auto px-4 py-4 md:py-6">
<div className="flex flex-col lg:flex-row gap-4 lg:gap-6">
{/* Sidebar - Projects */}
<aside className="w-64 shrink-0">
<aside className="w-full lg:w-64 shrink-0">
<Card className="bg-slate-900 border-slate-800">
<CardHeader className="pb-3">
<CardTitle className="text-sm font-semibold text-slate-400 uppercase tracking-wider">
@ -213,23 +213,23 @@ export default function Home() {
<main className="flex-1 min-w-0">
{selectedProject ? (
<>
<div className="flex items-center justify-between mb-6">
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 md:mb-6">
<div>
<h2 className="text-xl font-semibold text-white">
<h2 className="text-lg md:text-xl font-semibold text-white">
{selectedProject.name}
</h2>
<p className="text-sm text-slate-400">
{projectTasks.length} tasks · {projectTasks.filter((t) => t.status === "done").length} done
</p>
</div>
<Button onClick={() => setNewTaskOpen(true)}>
<Button onClick={() => setNewTaskOpen(true)} className="w-full sm:w-auto">
<Plus className="w-4 h-4 mr-2" />
Add Task
</Button>
</div>
{/* Kanban Columns */}
<div className="grid grid-cols-4 gap-4">
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
{statusColumns.map((status) => {
const columnTasks = projectTasks.filter((t) => t.status === status)
return (
@ -339,7 +339,7 @@ export default function Home() {
{/* New Task Dialog */}
<Dialog open={newTaskOpen} onOpenChange={setNewTaskOpen}>
<DialogContent className="bg-slate-900 border-slate-800 text-white max-w-lg">
<DialogContent className="bg-slate-900 border-slate-800 text-white w-[95vw] max-w-lg max-h-[90vh] overflow-y-auto">
<DialogHeader>
<DialogTitle>New Task</DialogTitle>
</DialogHeader>
@ -364,7 +364,7 @@ export default function Home() {
rows={3}
/>
</div>
<div className="grid grid-cols-3 gap-4">
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
<div>
<Label>Type</Label>
<select
@ -424,7 +424,7 @@ export default function Home() {
{/* Task Detail Dialog with Comments */}
<Dialog open={!!selectedTaskId} onOpenChange={() => selectTask(null)}>
<DialogContent className="bg-slate-900 border-slate-800 text-white max-w-2xl max-h-[85vh] overflow-y-auto">
<DialogContent className="bg-slate-900 border-slate-800 text-white w-[95vw] max-w-2xl max-h-[90vh] overflow-y-auto p-4 md:p-6">
{selectedTask && (
<>
<DialogHeader>