diff --git a/frontend/src/lib/components/NewsFeed.svelte b/frontend/src/lib/components/NewsFeed.svelte index f456371..bc7d81d 100644 --- a/frontend/src/lib/components/NewsFeed.svelte +++ b/frontend/src/lib/components/NewsFeed.svelte @@ -644,7 +644,7 @@ (showLanes = false)} /> {/if} -
+
{#if navLanes.length} (showLanes = true)} /> {/if} @@ -672,11 +672,13 @@ {#if auth.user} {/if} + Boundaries {/if} {#if auth.user && followTarget} @@ -925,13 +927,23 @@ .searchtoggle:hover { border-color: var(--accent); } .searchtoggle.on { background: var(--accent); border-color: var(--accent); color: #fff; } .searchtoggle svg { width: 17px; height: 17px; display: block; } - /* news-local Saved / Boundaries — same pill as the search toggle */ - .vh-util { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; + /* news-local Saved / Boundaries — labeled pills (a bare shield doesn't read as "Boundaries") */ + .vh-util { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; background: none; border: 1px solid var(--line); color: var(--accent-deep); border-radius: 999px; - cursor: pointer; text-decoration: none; transition: border-color 0.14s ease, background 0.14s ease; } + font: inherit; font-size: 0.85rem; cursor: pointer; text-decoration: none; white-space: nowrap; + transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease; } .vh-util:hover { border-color: var(--accent); } .vh-util.on { background: var(--accent); border-color: var(--accent); color: #fff; } - .vh-util svg { width: 17px; height: 17px; display: block; } + .vh-util svg { width: 16px; height: 16px; display: block; flex: none; } + + /* Hub-chrome /news only: on a signed-in drill-in the action row (Search+Saved+Boundaries+ + Follow+Back) overflows a phone — let it wrap below the heading. Scoped to .hub so the + frozen `/` feed (Saved/Boundaries live in its Header, fewer controls) is unaffected. */ + @media (max-width: 560px) { + .container.hub .view-head { flex-wrap: wrap; } + .container.hub .vh-text { flex-basis: 100%; } + .container.hub .vh-actions { width: 100%; max-width: 100%; flex-wrap: wrap; justify-content: flex-start; margin-top: 10px; } + } .searchbar { display: flex; gap: 8px; margin: 0 0 18px; } .searchbar input { flex: 1; min-width: 0; font: inherit; font-size: 1rem; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); }