Skip to content

fix: hide app footer on mobile viewports #282

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rubenhensen merged 2 commits into from
Jun 29, 2026
Merged

fix: hide app footer on mobile viewports #282

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8909e4f
fix: hide app footer on mobile viewports
dobby-coder[bot] Jun 26, 2026
d0ddc43
test: pin app-footer mobile/desktop visibility; trim comment
dobby-coder[bot] Jun 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions src/routes/(app)/+layout.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,4 +74,11 @@
opacity: 0.5;
}
}

/* Match Header's 768px desktop breakpoint. */
@media only screen and (max-width: 767.98px) {

@dobby-coder dobby-coder Bot Jun 26, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a fix: PR with no regression test. Per our convention, every fix should pin the new behaviour with a test that would have caught the bug pre-fix. Add a Playwright test asserting .app-footer is hidden at a mobile viewport (e.g. 375px) and visible at desktop (e.g. 1024px). You already verified exactly this manually — codify it so it can't silently regress.

.app-footer {
display: none;
}
}
</style>
19 changes: 19 additions & 0 deletions tests/app-footer-responsive.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { expect, test } from '@playwright/test'

// Regression test for hiding the compact app footer on mobile viewports
// (issue encryption4all/postguard-website#279). The footer lives in the (app)
// layout and is hidden below Header's 768px desktop breakpoint, where it cost
// too much screen real estate. It must stay visible on desktop.
const FOOTER = '.app-footer'

test('app footer is hidden on a mobile viewport', async ({ page }) => {
await page.setViewportSize({ width: 375, height: 812 })
await page.goto('/fileshare/')
await expect(page.locator(FOOTER)).toBeHidden()
})

test('app footer is visible on a desktop viewport', async ({ page }) => {
await page.setViewportSize({ width: 1024, height: 768 })
await page.goto('/fileshare/')
await expect(page.locator(FOOTER)).toBeVisible()
})