Fixed footer and watermark overlapping cards on narrow screens

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 1.1.5
+
+#### 🐛 Bug Fix
+
+- Fixed the fixed corner watermark and bottom-left footer links overlapping card content once the window is too narrow to fit them in the margins; they now flow below the page instead of floating on top of it, and the redundant BBQS watermark logo (already shown in the header) is hidden ([#73](https://github.com/brain-bbqs/bbqs-uploader/pull/73))
+
 ## 1.1.4
 
 #### 🚀 Enhancement

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bbqs-uploader",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "description": "A fully static, backend-free web page for uploading files to an existing dandiset on the EMBER Archive.",
   "type": "module",
   "license": "MIT",

src/style.css

@@ -1523,3 +1523,36 @@ ul.human-subjects-body {
     flex-direction: column;
   }
 }
+
+/* main caps out at an 828px-wide content box (860px max-width minus its own 1rem/16px side
+   padding); below that, it's centered with (viewport - 860) / 2 px of margin on each side. The
+   footer bar's left column (the "What's New"/bug-report/version stack) is ~270px wide including
+   its own left offset, so cards stop clearing it once that margin drops under ~270px, i.e. around
+   a 1368px-wide viewport (measured against the built page; the CON logo's own margin need is
+   smaller, ~1178px, so it's covered by the same threshold). Below that point, as the page scrolls,
+   the fixed corner watermark and footer bar end up pinned on top of card content instead of
+   framing it. Take them out of fixed positioning so they sit in normal document flow instead (the
+   watermark logo is dropped entirely, since the header already shows the same BBQS logo). The
+   1400px threshold below leaves a little slack past the measured 1368px for footer-text width
+   drifting with future version strings. */
+@media (max-width: 1400px) {
+  .brand-watermark-link {
+    display: none;
+  }
+
+  main {
+    padding-bottom: 2rem;
+  }
+
+  .page-footer-bar {
+    position: static;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+    padding: 1rem 1rem 1.5rem;
+  }
+
+  .footer-left {
+    align-items: center;
+  }
+}

tests/integration/smoke.spec.ts

@@ -4,6 +4,10 @@ import { dropFile } from "./helpers/drop";
 
 test.describe("BBQS uploader shell", () => {
   test("renders branding, version, and the connection form", async ({ page }) => {
+    // Wide enough that the corner watermark and footer bar stay in their fixed, viewport-anchored
+    // spots instead of the narrow-screen fallback (see the max-width: 1400px query in style.css)
+    // that hides the watermark and flows the footer into the page to avoid overlapping cards.
+    await page.setViewportSize({ width: 1440, height: 900 });
     await seedSignedIn(page);
     await page.goto("/");
     await expect(page).toHaveTitle(/BBQS Uploader/);