test(e2e): adds scrollbar compensation test and scopes footer selector

Author: wgordon17

e2e/smoke.spec.ts

@@ -165,6 +165,36 @@ test("switching tabs changes active tab indicator", async ({ page }) => {
   await expect(actionsTab).toHaveAttribute("aria-selected", "true");
 });
 
+test("fixed elements compensate for scrollbar width when scroll is locked", async ({ page }) => {
+  await setupAuth(page);
+  await page.goto("/dashboard");
+
+  const navbar = page.locator(".navbar");
+  const footer = page.locator(".app-footer");
+  await expect(navbar).toBeVisible();
+  await expect(footer).toBeVisible();
+
+  // Baseline: navbar 0.5rem (8px) from daisyUI, footer 0px (no base padding)
+  expect(parseFloat(await navbar.evaluate((el) => getComputedStyle(el).paddingRight))).toBeCloseTo(8, 0);
+  expect(parseFloat(await footer.evaluate((el) => getComputedStyle(el).paddingRight))).toBeCloseTo(0, 0);
+
+  // Simulate solid-prevent-scroll setting --scrollbar-width on body
+  await page.evaluate(() => {
+    document.body.style.setProperty("--scrollbar-width", "15px");
+  });
+
+  // Navbar: 8px + 15px = 23px, footer: 0px + 15px = 15px
+  expect(parseFloat(await navbar.evaluate((el) => getComputedStyle(el).paddingRight))).toBeCloseTo(23, 0);
+  expect(parseFloat(await footer.evaluate((el) => getComputedStyle(el).paddingRight))).toBeCloseTo(15, 0);
+
+  // Clear — both return to baseline
+  await page.evaluate(() => {
+    document.body.style.removeProperty("--scrollbar-width");
+  });
+  expect(parseFloat(await navbar.evaluate((el) => getComputedStyle(el).paddingRight))).toBeCloseTo(8, 0);
+  expect(parseFloat(await footer.evaluate((el) => getComputedStyle(el).paddingRight))).toBeCloseTo(0, 0);
+});
+
 test("dashboard shows empty state with no data", async ({ page }) => {
   await setupAuth(page);
   await page.goto("/dashboard");

src/app/components/dashboard/DashboardPage.tsx

@@ -428,7 +428,7 @@ export default function DashboardPage() {
           </main>
         </div>
 
-        <footer class="fixed bottom-0 left-0 right-0 z-30 border-t border-base-300 bg-base-100 py-3 text-xs text-base-content/50">
+        <footer class="app-footer fixed bottom-0 left-0 right-0 z-30 border-t border-base-300 bg-base-100 py-3 text-xs text-base-content/50">
           <div class="max-w-6xl mx-auto w-full px-4 grid grid-cols-3 items-center">
             <div />
             <div class="flex items-center justify-center gap-3">

src/app/index.css

@@ -114,7 +114,7 @@
 .navbar {
   padding-right: calc(0.5rem + var(--scrollbar-width, 0px));
 }
-footer {
+.app-footer {
   padding-right: var(--scrollbar-width, 0px);
 }