Put sidebar spacing on a 16/32 scale

src/components/AppSidebar.svelte

@@ -51,7 +51,7 @@
   const { sidebarData, activeRepo = undefined }: Props = $props();
 
   const toggleShortcut = isMac() ? "⌘B" : "Ctrl+B";
-  const dragStripHeight = isMac() ? "2.75rem" : "1.75rem";
+  const dragStripHeight = isMac() ? "2rem" : "1.75rem";
 
   const mini = $derived(collapsed.value);
 
@@ -423,14 +423,17 @@
   .nav {
     flex: 1;
     overflow: visible;
-    padding: 0.5rem;
+    /* No top padding: the 2rem drag strip above is already the gap. */
+    padding: 0 0.5rem 0.5rem;
     display: flex;
     flex-direction: column;
     gap: 0.25rem;
     min-height: 0;
   }
   .bottom {
-    padding: 0.5rem;
+    /* Tighter on top: the nav's padding and the scroll area's fade runway
+       already sit above. */
+    padding: 0.25rem 0.5rem 0.5rem;
     display: flex;
     flex-direction: column;
     gap: 0.25rem;

src/components/SidebarRepoList.svelte

@@ -421,6 +421,10 @@
     display: flex;
     flex-direction: column;
     gap: 0.25rem;
+  }
+  /* Runway for the scroll area's fade, so the first and last rows are not
+     masked at rest. Cancelled by the negative margin on `.repos-scroll`. */
+  .repos-list.scrolling {
     padding: 0.5rem 0;
   }
   .pinned-list.empty {
@@ -433,7 +437,9 @@
     font: var(--txt-body-m-regular);
     font-variant-ligatures: none;
     color: var(--color-text-secondary);
-    padding: 0.5rem 0 0.25rem 0.5rem;
+    /* No bottom padding: the 2rem action buttons already leave a row's worth
+       of slack under the label. */
+    padding: 1rem 0 0 0.5rem;
     display: flex;
     align-items: center;
     gap: 0.25rem;
@@ -1004,8 +1010,8 @@
 
 {#if reposExpanded.value && !sidebarCollapsed.value}
   <ScrollArea
-    style="flex: 1; min-height: 0; mask-image: linear-gradient(to bottom, transparent 0, black 0.5rem, black calc(100% - 0.5rem), transparent 100%);">
-    <div class="repos-list">
+    style="flex: 1; min-height: 0; margin-top: -0.5rem; mask-image: linear-gradient(to bottom, transparent 0, black 0.5rem, black calc(100% - 0.5rem), transparent 100%);">
+    <div class="repos-list scrolling">
       {#each unpinnedFilteredRepos as repo (repo.rid)}
         <div
           class="repo-row-group"