Fix mobile project sidebar top spacing

Co-Authored-By: Paperclip <noreply@paperclip.ing>

ui/src/components/SidebarProjects.test.tsx

@@ -19,6 +19,8 @@ const mockAuthApi = vi.hoisted(() => ({
 const mockOpenNewProject = vi.hoisted(() => vi.fn());
 const mockSetSidebarOpen = vi.hoisted(() => vi.fn());
 const mockPersistOrder = vi.hoisted(() => vi.fn());
+const mockSidebarState = vi.hoisted(() => ({ isMobile: false }));
+const mockPointerState = vi.hoisted(() => ({ fine: true }));
 
 vi.mock("@/lib/router", () => ({
   Link: ({ children, to, ...props }: { children: ReactNode; to: string }) => (
@@ -63,7 +65,7 @@ vi.mock("../context/DialogContext", () => ({
 
 vi.mock("../context/SidebarContext", () => ({
   useSidebar: () => ({
-    isMobile: false,
+    isMobile: mockSidebarState.isMobile,
     setSidebarOpen: mockSetSidebarOpen,
   }),
 }));
@@ -192,6 +194,23 @@ describe("SidebarProjects", () => {
       defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
     });
     localStorage.clear();
+    mockSidebarState.isMobile = false;
+    mockPointerState.fine = true;
+    Object.defineProperty(window, "matchMedia", {
+      writable: true,
+      value: vi.fn().mockImplementation((query: string) => ({
+        matches: query.includes("(hover: hover)") && query.includes("(pointer: fine)")
+          ? mockPointerState.fine
+          : false,
+        media: query,
+        onchange: null,
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+      })),
+    });
     mockProjectsApi.list.mockResolvedValue([
       makeProject({
         id: "project-a",
@@ -254,6 +273,25 @@ describe("SidebarProjects", () => {
 
     expect(projectLinkLabels(container)).toEqual(["Bravo", "Alpha", "Charlie"]);
     expect(container.querySelector('[data-testid="project-slot-project-b"]')).toBeTruthy();
+    expect(container.querySelector('[aria-roledescription="sortable"]')).toBeTruthy();
+  });
+
+  it("uses plain project rows for top mode on mobile", async () => {
+    mockSidebarState.isMobile = true;
+
+    await renderSidebarProjects();
+
+    expect(projectLinkLabels(container)).toEqual(["Bravo", "Alpha", "Charlie"]);
+    expect(container.querySelector('[aria-roledescription="sortable"]')).toBeNull();
+  });
+
+  it("uses plain project rows for top mode on coarse pointer screens", async () => {
+    mockPointerState.fine = false;
+
+    await renderSidebarProjects();
+
+    expect(projectLinkLabels(container)).toEqual(["Bravo", "Alpha", "Charlie"]);
+    expect(container.querySelector('[aria-roledescription="sortable"]')).toBeNull();
   });
 
   it("uses the heading for section menu and the plus button for project creation", async () => {

ui/src/components/SidebarProjects.tsx

@@ -41,6 +41,7 @@ const PROJECT_SORT_CHOICES: SidebarSectionRadioChoice[] = [
   { value: "alphabetical", label: "Alphabetical" },
   { value: "recent", label: "Recent" },
 ];
+const REORDER_POINTER_MEDIA = "(hover: hover) and (pointer: fine)";
 
 type ProjectItemProps = {
   activeProjectRef: string | null;
@@ -74,6 +75,26 @@ function sortProjects(projects: Project[], sortMode: ProjectSidebarSortMode): Pr
   return sorted;
 }
 
+function hasFineReorderPointer() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return true;
+  return window.matchMedia(REORDER_POINTER_MEDIA).matches;
+}
+
+function useFineReorderPointer() {
+  const [matches, setMatches] = useState(hasFineReorderPointer);
+
+  useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
+    const query = window.matchMedia(REORDER_POINTER_MEDIA);
+    const onChange = (event: MediaQueryListEvent) => setMatches(event.matches);
+    setMatches(query.matches);
+    query.addEventListener("change", onChange);
+    return () => query.removeEventListener("change", onChange);
+  }, []);
+
+  return matches;
+}
+
 function ProjectItem({
   activeProjectRef,
   companyId,
@@ -167,6 +188,7 @@ export function SidebarProjects() {
   const { selectedCompany, selectedCompanyId } = useCompany();
   const { openNewProject } = useDialogActions();
   const { isMobile, setSidebarOpen } = useSidebar();
+  const fineReorderPointer = useFineReorderPointer();
   const location = useLocation();
 
   const { data: projects } = useQuery({
@@ -209,6 +231,7 @@ export function SidebarProjects() {
     [orderedProjects, sortMode],
   );
   const isTopMode = sortMode === "top";
+  const canReorderProjects = isTopMode && !isMobile && fineReorderPointer;
 
   const projectMatch = location.pathname.match(/^\/(?:[^/]+\/)?projects\/([^/]+)/);
   const activeProjectRef = projectMatch?.[1] ?? null;
@@ -310,7 +333,7 @@ export function SidebarProjects() {
         onRadioValueChange: persistSortMode,
       }}
     >
-      {isTopMode ? (
+      {canReorderProjects ? (
         <DndContext
           sensors={sensors}
           collisionDetection={closestCenter}