From bf785299b0b32e7c5eced4de2c51d5ef7c179ac8 Mon Sep 17 00:00:00 2001 From: rays Date: Mon, 28 Sep 2026 18:53:34 +0000 Subject: [PATCH] No logo in the phone's top bar (#66) The logo moved into the top bar beside the add-feed button (#60). On a phone that bar is tight: the logo squeezed the search box down to a few letters, and with no hover there its version tooltip showed nothing. Below the phone breakpoint it is left out. Co-Authored-By: Claude Opus 5.5 --- CHANGELOG.md | 1 + tests/ui/app.spec.js | 5 +++++ web/app.css | 2 ++ 3 files changed, 8 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 291107b..7bda0a3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 orange of its needle. - The logo follows the page: the dark version in a dark theme, the light one in a light theme. - The browser tab's icon follows the page's light or dark mode too. +- On a phone, the top bar leaves out the logo, giving its room to the search box. - Between releases, the version on the logo says so: 0.9.1-dev, not 0.9.0. - The logo's needle is a brighter, redder orange that stands apart from the blue bars. - The logo is in the top bar beside the add-feed button, in place of the name at the top of the diff --git a/tests/ui/app.spec.js b/tests/ui/app.spec.js index a3d6691..62b09b7 100644 --- a/tests/ui/app.spec.js +++ b/tests/ui/app.spec.js @@ -470,6 +470,11 @@ test('marking an OPML subscription read covers the feeds inside it', async ({ pa test.describe('on a phone', () => { test.use({ viewport: { width: 390, height: 844 } }); + test('the top bar leaves the logo out, for the search box', async ({ page }) => { + await expect(page.locator('#burger')).toBeVisible(); + await expect(page.locator('#applogo')).toBeHidden(); + }); + test('the feed list is reachable and an item reads full screen', async ({ page }) => { // The burger used to live in the player bar, which is hidden until something plays -- // leaving no way to reach the feeds at all. diff --git a/web/app.css b/web/app.css index ecd6ac9..178096e 100644 --- a/web/app.css +++ b/web/app.css @@ -978,6 +978,8 @@ body:has(#player.on) #status{padding-bottom:3px} /* The feed list is reachable whether or not anything is playing. */ #burger{display:grid} + /* No logo on a phone: the bar has no room to spare for it, and no hover to show its version. */ + #applogo{display:none} #topbar{ gap:6px;padding-top:calc(6px + var(--safe-t));padding-bottom:6px; padding-left:calc(8px + var(--safe-l));padding-right:calc(8px + var(--safe-r));