From 1bbb98aaa9e6cd47d8ce0d3478bf3635f16d7771 Mon Sep 17 00:00:00 2001
From: Dotta <bippadotta@protonmail.com>
Date: Thu, 5 Mar 2026 18:57:48 -0600
Subject: [PATCH] fix(ui): add mobile properties toggle on project detail page

On mobile, the sidebar panel toggle was hidden (md:flex only). Add a
mobile-visible SlidersHorizontal button that opens a bottom Sheet drawer
with ProjectProperties, matching the existing pattern from IssueDetail.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 ui/src/pages/ProjectDetail.tsx | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/ui/src/pages/ProjectDetail.tsx b/ui/src/pages/ProjectDetail.tsx
index df9774a1..2a568445 100644
--- a/ui/src/pages/ProjectDetail.tsx
+++ b/ui/src/pages/ProjectDetail.tsx
@@ -18,6 +18,8 @@ import { IssuesList } from "../components/IssuesList";
 import { PageSkeleton } from "../components/PageSkeleton";
 import { projectRouteRef, cn } from "../lib/utils";
 import { Button } from "@/components/ui/button";
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet";
+import { ScrollArea } from "@/components/ui/scroll-area";
 import { SlidersHorizontal } from "lucide-react";
 
 /* ── Top-level tab types ── */
@@ -198,6 +200,7 @@ export function ProjectDetail() {
   const { companies, selectedCompanyId, setSelectedCompanyId } = useCompany();
   const { openPanel, closePanel, panelVisible, setPanelVisible } = usePanel();
   const { setBreadcrumbs } = useBreadcrumbs();
+  const [mobilePropsOpen, setMobilePropsOpen] = useState(false);
   const queryClient = useQueryClient();
   const navigate = useNavigate();
   const location = useLocation();
@@ -311,6 +314,15 @@ export function ProjectDetail() {
           as="h2"
           className="text-xl font-bold"
         />
+        <Button
+          variant="ghost"
+          size="icon-xs"
+          className="ml-auto md:hidden shrink-0"
+          onClick={() => setMobilePropsOpen(true)}
+          title="Properties"
+        >
+          <SlidersHorizontal className="h-4 w-4" />
+        </Button>
         <Button
           variant="ghost"
           size="icon-xs"
@@ -364,6 +376,20 @@ export function ProjectDetail() {
       {activeTab === "list" && project?.id && resolvedCompanyId && (
         <ProjectIssuesList projectId={project.id} companyId={resolvedCompanyId} />
       )}
+
+      {/* Mobile properties drawer */}
+      <Sheet open={mobilePropsOpen} onOpenChange={setMobilePropsOpen}>
+        <SheetContent side="bottom" className="max-h-[85dvh] pb-[env(safe-area-inset-bottom)]">
+          <SheetHeader>
+            <SheetTitle className="text-sm">Properties</SheetTitle>
+          </SheetHeader>
+          <ScrollArea className="flex-1 overflow-y-auto">
+            <div className="px-4 pb-4">
+              <ProjectProperties project={project} onUpdate={(data) => updateProject.mutate(data)} />
+            </div>
+          </ScrollArea>
+        </SheetContent>
+      </Sheet>
     </div>
   );
 }