diff --git a/src/lib/ui/components/ServicePanel.svelte b/src/lib/ui/components/ServicePanel.svelte
index 864e09a..6bd5e98 100644
--- a/src/lib/ui/components/ServicePanel.svelte
+++ b/src/lib/ui/components/ServicePanel.svelte
@@ -17,3 +17,14 @@
{/each}
+
+
diff --git a/src/lib/ui/components/ServiceRow.svelte b/src/lib/ui/components/ServiceRow.svelte
index 91d6028..9d69dac 100644
--- a/src/lib/ui/components/ServiceRow.svelte
+++ b/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 {
diff --git a/tests/e2e/dashboard.spec.ts b/tests/e2e/dashboard.spec.ts
index c0d65f6..49b41d8 100644
--- a/tests/e2e/dashboard.spec.ts
+++ b/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(".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");
diff --git a/tests/e2e/dashboard.spec.ts-snapshots/dashboard-desktop-chromium-desktop-linux.png b/tests/e2e/dashboard.spec.ts-snapshots/dashboard-desktop-chromium-desktop-linux.png
index 464f6e2..6ab2c78 100644
Binary files a/tests/e2e/dashboard.spec.ts-snapshots/dashboard-desktop-chromium-desktop-linux.png and b/tests/e2e/dashboard.spec.ts-snapshots/dashboard-desktop-chromium-desktop-linux.png differ
diff --git a/tests/e2e/dashboard.spec.ts-snapshots/dashboard-mobile-chromium-mobile-linux.png b/tests/e2e/dashboard.spec.ts-snapshots/dashboard-mobile-chromium-mobile-linux.png
index 49cc902..f49ae52 100644
Binary files a/tests/e2e/dashboard.spec.ts-snapshots/dashboard-mobile-chromium-mobile-linux.png and b/tests/e2e/dashboard.spec.ts-snapshots/dashboard-mobile-chromium-mobile-linux.png differ