Merge pull request #24 from codex/dense-bookmark-dividers

fix(dashboard): compact bookmark dividers

src/lib/ui/components/ServicePanel.svelte

@@ -17,3 +17,14 @@
   {/each}
   </Panel>
 </div>
+
+<style>
+  .service-panel :global(.panel__body) {
+    gap: 0;
+    padding-block: 0.24rem 0.42rem;
+  }
+
+  .service-panel :global(.status-strip) {
+    margin-bottom: 0.16rem;
+  }
+</style>

src/lib/ui/components/ServiceRow.svelte

@@ -42,31 +42,33 @@
   .service-row {
     display: grid;
     grid-template-columns: auto minmax(0, 1fr) auto;
-    gap: 0.42rem;
+    gap: 0.24rem;
     align-items: center;
-    min-height: 2.35rem;
-    border: var(--ui-border);
-    background: rgba(12, 13, 12, 0.72);
+    min-height: 2.02rem;
+    border: 0;
+    border-bottom: var(--ui-border);
+    background: transparent;
     color: inherit;
-    padding: 0.3rem 0.38rem;
+    padding: 0.14rem 0;
     text-decoration: none;
   }
 
   .service-row[data-severity="warning"] {
-    border-color: color-mix(in srgb, var(--ui-color-warning), transparent 54%);
+    border-bottom-color: color-mix(in srgb, var(--ui-color-warning), transparent 54%);
   }
 
   .service-row[data-severity="danger"],
   .service-row[data-severity="unavailable"] {
-    border-color: color-mix(in srgb, var(--ui-color-danger), transparent 50%);
+    border-bottom-color: color-mix(in srgb, var(--ui-color-danger), transparent 50%);
   }
 
   .service-row[data-severity="loading"] {
-    border-color: color-mix(in srgb, var(--ui-color-accent), transparent 56%);
+    border-bottom-color: color-mix(in srgb, var(--ui-color-accent), transparent 56%);
   }
 
   .service-row:where(a):hover {
-    border-color: var(--ui-color-accent);
+    border-bottom-color: var(--ui-color-accent);
+    background: rgba(244, 244, 244, 0.035);
   }
 
   .service-row__main {

tests/e2e/dashboard.spec.ts

@@ -106,6 +106,49 @@ test.describe("dashboard page QA gate", () => {
     expect(metrics.clippedItems).toEqual([]);
   });
 
+  test("renders bookmark rows as a compact divider list", async ({ page }, testInfo) => {
+    test.skip(testInfo.project.name !== "chromium-desktop");
+
+    await page.goto("/");
+
+    const bookmarkDensity = await page.evaluate(() => {
+      const panelBody = document.querySelector(".service-panel .panel__body");
+      const rows = Array.from(document.querySelectorAll<HTMLElement>(".service-panel .service-row"));
+      const first = rows[0];
+      const second = rows[1];
+      if (!panelBody || !first || !second) {
+        throw new Error("expected at least two bookmark rows");
+      }
+
+      const bodyStyle = window.getComputedStyle(panelBody);
+      const rowStyle = window.getComputedStyle(first);
+      const firstRect = first.getBoundingClientRect();
+      const secondRect = second.getBoundingClientRect();
+
+      return {
+        backgroundColor: rowStyle.backgroundColor,
+        borderBottomWidth: Number.parseFloat(rowStyle.borderBottomWidth),
+        borderLeftWidth: Number.parseFloat(rowStyle.borderLeftWidth),
+        borderRightWidth: Number.parseFloat(rowStyle.borderRightWidth),
+        columnGap: Number.parseFloat(rowStyle.columnGap),
+        paddingBottom: Number.parseFloat(rowStyle.paddingBottom),
+        paddingTop: Number.parseFloat(rowStyle.paddingTop),
+        panelGap: Number.parseFloat(bodyStyle.rowGap),
+        rowGap: secondRect.top - firstRect.bottom,
+      };
+    });
+
+    expect(bookmarkDensity.panelGap).toBe(0);
+    expect(bookmarkDensity.rowGap).toBeLessThanOrEqual(1);
+    expect(bookmarkDensity.paddingTop).toBeLessThanOrEqual(3);
+    expect(bookmarkDensity.paddingBottom).toBeLessThanOrEqual(3);
+    expect(bookmarkDensity.columnGap).toBeLessThanOrEqual(4);
+    expect(bookmarkDensity.borderBottomWidth).toBeGreaterThanOrEqual(1);
+    expect(bookmarkDensity.borderLeftWidth).toBe(0);
+    expect(bookmarkDensity.borderRightWidth).toBe(0);
+    expect(bookmarkDensity.backgroundColor).toBe("rgba(0, 0, 0, 0)");
+  });
+
   test("keeps the first screen usable on mobile", async ({ page }, testInfo) => {
     test.skip(testInfo.project.name !== "chromium-mobile");