steid

fix: on a narrow viewport the About sidebar comes first, not last

Stacked under the file list and a long README, the sidebar was two screens down
— so "what is this and may I use it", the question the visitor arrived with,
was buried on exactly the viewport with the least room to go looking for it.
It now leads the page below `lg`, with a rule under it rather than over it and
no stickiness, and returns to the right-hand column at `lg` unchanged.

The two-column container becomes a flex column rather than a plain block,
because `order-first` needs a flex parent to mean anything.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SqTELeRD57xF54euni5VuH

JamesPatrickGill authored 16 hours agoparent0aca94eBrowse files7aae36c57ea21b31efec40f8791d8710400bce75

2 files changed+15 −8

plans/ui.md+7 −3View file

		@@ -112,9 +112,13 @@ to say, pushing the code below the fold.
112	112	- Counts beside the switcher are text, not links. `/branches` and `/tags` do not
113	113	exist; a dead link is worse than a number.
114	114	- Sidebar sections are separated by hairlines, never boxed as cards — the rule the
115		− profile page settled on, and what makes the page read as one surface. Below `lg` the
116		− sidebar drops beneath the file list and grows a rule of its own, so it reads as a new
117		− section rather than as more of the listing.
	115	+ profile page settled on, and what makes the page read as one surface.
	116	+- Below `lg` the sidebar is not a sidebar: it comes first, above the file list, with
	117	+ a rule under it and no stickiness. Ordering it after the code would bury "what is this
	118	+ and may I use it" under a long README — the one question the visitor arrived with, on
	119	+ the viewport with the least room to go looking for it. That is why the two-column
	120	+ container is a flex column rather than a plain block: `order-first` needs a flex
	121	+ parent.
118	122	- A licence is named only when its own text names it. A licence file Steid cannot
119	123	identify is linked to and labelled "Licence": naming the wrong one is a claim about
120	124	somebody's legal terms.

src/infrastructure/web/repo.rs+8 −5View file

		@@ -210,7 +210,7 @@ async fn repo_page(cx: &Cx) -> Result {
210	210	wide(
211	211	repo_header(repo: &repo, rev: at, active: Tab::Code)
212	212
213		− <div class="lg:flex lg:items-start lg:gap-6">
	213	+ <div class="flex flex-col lg:flex-row lg:items-start lg:gap-6">
214	214	<div class="min-w-0 lg:flex-1">
215	215	match &browsed {
216	216	Browsed::Empty => empty_repo(url: clone.as_str()),
		@@ -258,10 +258,13 @@ async fn repo_page(cx: &Cx) -> Result {
258	258	}
259	259	</div>
260	260
261		− // Below `lg` the sidebar is not a sidebar — it follows the file list down
262		− // the page, so it needs a rule of its own to read as a new section rather
263		− // than as more of the listing.
264		− <aside class="mt-6 w-full shrink-0 border-t border-border pt-6 lg:sticky lg:top-6 lg:mt-0 lg:w-72 lg:border-t-0 lg:pt-0">
	261	+ // Below `lg` the sidebar is not a sidebar: it comes first, above the
	262	+ // file list, with a rule under it. Ordering it after the code would bury
	263	+ // "what is this and may I use it" below a long README — which is the one
	264	+ // question the visitor arrived with, on the viewport with the least room
	265	+ // to go looking for it. `order-first` is why the container is a flex
	266	+ // column below `lg` rather than a plain block.
	267	+ <aside class="order-first mb-6 w-full shrink-0 border-b border-border pb-6 lg:order-none lg:sticky lg:top-6 lg:mb-0 lg:w-72 lg:border-b-0 lg:pb-0">
265	268	repo_about(
266	269	repo: &repo,
267	270	rev: at,