src/lib/ui/components/ServicePanel.svelte

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

tests/e2e/dashboard.spec.ts

@@ -106,49 +106,6 @@ 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");