diff --git a/CHANGELOG.md b/CHANGELOG.md index eb00c53..50aaeeb 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/package.json b/package.json index 4b72890..7664cc8 100644 --- a/package.json +++ b/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", diff --git a/src/style.css b/src/style.css index a3103a8..c3a2f53 100644 --- a/src/style.css +++ b/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; + } +} diff --git a/tests/integration/smoke.spec.ts b/tests/integration/smoke.spec.ts index a39c97e..cc52583 100644 --- a/tests/integration/smoke.spec.ts +++ b/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/);