OverviewFilesCommitsIssuesDocsReleasesPeers

favela-web commits / d588b81

render: nav wraps, so a 360px phone stops overflowing the viewport
.navsearch is a fixed 8rem inside a nowrap flex row, and a flex item defaults to min-width:auto — so it could neither shrink nor drop to its own line, and instead pushed the document wider than the screen. Measured with a chromedriver layout probe (screenshots show THAT something clips, not which element sets the minimum width): 360px document 377 vs viewport 360, sole offender form.navsearch -> 360, none 390px already clean before and after 768 / 1280 unchanged 390px was never affected, so this is narrow-phone only — which is what audit #45 said ("the nav has no flex-wrap and runs off-screen at 360px") before I briefly mis-measured it as a 390px problem via --window-size, which sizes the OS window and not the CSS viewport. The composer control row needed nothing: it already wraps (.controls flex-wrap plus the max-width:640px block). Phase 0 of the visual-parity order. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
d588b81f3f5b063e95dbee6b4b5da95280e5e56d
by plankatron <fleeky@gmail.com> · 2026-08-24T13:35:29.000Z

Changed files (2) +10 -2

lib/render.js +9 -1
……@@ -744,7 +744,15 @@ body{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-se
744744 line-height:1.55;-webkit-font-smoothing:antialiased;font-size:var(--f2)}
745745h1{display:flex;align-items:center;gap:var(--s2);font-size:var(--f4);letter-spacing:-.01em;margin:0 0 var(--s3)}
746746h1 small{font-size:var(--f1)}
747nav{gap:var(--s4);margin:0 0 var(--s5);padding-bottom:var(--s2);border-bottom:1px solid var(--line);font-size:var(--f1)}
747/* The search form is a fixed 8rem and a flex item defaults to min-width:auto, so on a nowrap row it
748 cannot shrink and cannot drop — it just pushes the page wider than the viewport. Measured: at 360px
749 (a mainstream Android portrait width) the document was 377px, overflowing by exactly the amount
750 .navsearch could not give up. 390px was already fine, so this is narrow-phone only. Wrapping lets the
751 form take its own line instead of widening the document; min-width:0 lets it shrink first and stay on
752 line one where there is room. */
753nav{gap:var(--s4);margin:0 0 var(--s5);padding-bottom:var(--s2);border-bottom:1px solid var(--line);font-size:var(--f1);flex-wrap:wrap}
754.navsearch{min-width:0}
755.navsearch input{max-width:100%}
748756nav a{color:var(--fg-dim);text-decoration:none;padding:var(--s1) 0;border-bottom:2px solid transparent}
749757nav a:hover{color:var(--fg)}
750758nav a[aria-current=page]{color:var(--fg);font-weight:600;border-bottom-color:var(--fg)}
package.json +1 -1
……@@ -1,6 +1,6 @@
11{
22 "name": "favela-web",
3 "version": "0.3.63",
3 "version": "0.3.64",
44 "description": "favela-web — the web/SSR surface of Favela, the native P2P-local, community-owned social client + appview over the self-custody atproto stack (hyper-proto-peer). One of the Favela surfaces (alongside favela-cli and favela-native). bsky is an optional POSSE export, not the home. See DESIGN.md.",
55 "type": "module",
66 "main": "bin/favela-web.js",