Tighten sidebar row spacing on touch devices

Mobile Safari still felt overly spaced after the prior touch-target
fix. Bring projects, agents, top-level nav items, the New Issue
button, and section headers down a notch on coarse pointers, and
shrink the gap between sections. Desktop spacing is unchanged.

- Nav items / New Issue button: py-2 -> py-1.5
- Project / agent rows: py-1.5 -> py-1
- Section headers: py-1.5 -> py-1
- Inter-section gap: gap-4 -> gap-3

Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
DottaandPaperclip committed 2026-05-19 14:26:51 -05:00
1 parent 863d9e3adb
commit c90a7a56ea
5 files changed
+6 -6

No files matched your search

+2 -2
View File
@@ -71,13 +71,13 @@ export function Sidebar() {
</Button>
</div>
<nav className="flex-1 min-h-0 overflow-y-auto scrollbar-auto-hide flex flex-col gap-4 px-3 py-2">
<nav className="flex-1 min-h-0 overflow-y-auto scrollbar-auto-hide flex flex-col gap-4 pointer-coarse:gap-3 px-3 py-2">
<div className="flex flex-col gap-0.5">
{/* New Issue button aligned with nav items */}
<button
onClick={() => openNewIssue()}
data-slot="icon-button"
className="flex items-center gap-2.5 px-3 py-2 text-[13px] font-medium text-muted-foreground hover:bg-accent/50 hover:text-foreground transition-colors"
className="flex items-center gap-2.5 px-3 py-2 pointer-coarse:py-1.5 text-[13px] font-medium text-muted-foreground hover:bg-accent/50 hover:text-foreground transition-colors"
>
<SquarePen className="h-4 w-4 shrink-0" />
<span className="truncate">New Issue</span>
+1 -1
View File
@@ -118,7 +118,7 @@ function SidebarAgentItem({
if (isMobile) setSidebarOpen(false);
}}
className={cn(
"flex min-w-0 flex-1 items-center gap-2.5 px-3 py-1.5 pr-8 text-[13px] font-medium transition-colors",
"flex min-w-0 flex-1 items-center gap-2.5 px-3 py-1.5 pointer-coarse:py-1 pr-8 text-[13px] font-medium transition-colors",
isActive
? "bg-accent text-foreground"
: "text-foreground/80 hover:bg-accent/50 hover:text-foreground"
+1 -1
View File
@@ -41,7 +41,7 @@ export function SidebarNavItem({
onClick={() => { if (isMobile) setSidebarOpen(false); }}
className={({ isActive }) =>
cn(
"flex items-center gap-2.5 px-3 py-2 text-[13px] font-medium transition-colors",
"flex items-center gap-2.5 px-3 py-2 pointer-coarse:py-1.5 text-[13px] font-medium transition-colors",
isActive
? "bg-accent text-foreground"
: "text-foreground/80 hover:bg-accent/50 hover:text-foreground",
+1 -1
View File
@@ -99,7 +99,7 @@ function ProjectItem({
if (isMobile) setSidebarOpen(false);
}}
className={cn(
"flex items-center gap-2.5 px-3 py-1.5 text-[13px] font-medium transition-colors",
"flex items-center gap-2.5 px-3 py-1.5 pointer-coarse:py-1 text-[13px] font-medium transition-colors",
activeProjectRef === routeRef || activeProjectRef === project.id
? "bg-accent text-foreground"
: "text-foreground/80 hover:bg-accent/50 hover:text-foreground",
+1 -1
View File
@@ -151,7 +151,7 @@ function SidebarSectionHeader({
);
return (
<div className="group/sidebar-section px-3 py-1.5">
<div className="group/sidebar-section px-3 py-1.5 pointer-coarse:py-1">
<div className="relative flex min-h-6 min-w-0 items-center gap-1">
{collapsible ? (
<CollapsibleTrigger asChild>