diff --git a/src/lib/ui/components/ServicePanel.svelte b/src/lib/ui/components/ServicePanel.svelte index 6bd5e98..864e09a 100644 --- a/src/lib/ui/components/ServicePanel.svelte +++ b/src/lib/ui/components/ServicePanel.svelte @@ -17,14 +17,3 @@ {/each} - - diff --git a/src/lib/ui/components/ServiceRow.svelte b/src/lib/ui/components/ServiceRow.svelte index 9d69dac..91d6028 100644 --- a/src/lib/ui/components/ServiceRow.svelte +++ b/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; - border: 0; - border-bottom: var(--ui-border); - background: transparent; + min-height: 2.35rem; + border: var(--ui-border); + background: rgba(12, 13, 12, 0.72); 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); - background: rgba(244, 244, 244, 0.035); + border-color: var(--ui-color-accent); } .service-row__main { diff --git a/tests/e2e/dashboard.spec.ts b/tests/e2e/dashboard.spec.ts index 49b41d8..c0d65f6 100644 --- a/tests/e2e/dashboard.spec.ts +++ b/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(".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 6ab2c78..464f6e2 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 f49ae52..49cc902 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