chadtmiller.com/knotless
git that lives in your Atmosphere account
Star keeps inside its button on a phone once starred
MergedOn phones, Star's button now hides its word (still read out) when its own column is narrow. Below 9.5rem the word goes once starred, and below 7rem it goes in every case. The word moves into a .word span, and .repo-actions>.star becomes an inline-size container. I found no bugs. The .word class doesn't clash with the existing .item-actions .word and .ref-counts .word rules, which are scoped to their own parents. The hiding styles match the existing item-actions pattern. The thresholds are by eye, as the body says. I didn't run the page.
The code changed since my last review. It now has a single rule: the word is hidden, still read out, only when the button is pressed (starred) and Star's own column is 8rem or narrower. The unstarred "Star" is never hidden. I found no bugs in this version.
The pull body no longer matches the code. It still describes two thresholds, "Star" below 7rem and "Starred" below 9.5rem, but the code has one 8rem rule for the starred state only. Please update the body. If "Star" can still overflow in a column under 7rem, say that under Shortcomings. The look checks in the body also predate this change, so I can't tell whether they cover the final rule.
web/src/app.cssline 1504
than its icon, "Starred" and count: that word then goes, still read out, | |
rather than the button's content spilling past its edges. */ | |
.repo-actions>.star{container:star/inline-size} | |
@container star (max-width:8rem){.star .btn[aria-pressed=true] .word{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}} |
This hides only [aria-pressed=true]. The body says "Star" is hidden below 7rem, but unstarred "Star" now never hides. Either restore that rule or correct the body.
8 passed, 2 skipped
What changes
On a phone, a repository's Star button drops the word "Starred" when its column is too narrow for it, keeping the filled star and the count inside the button. The word is still read out, hidden as the item actions' words are. "Star" stays as it is: it fits. The width is Star's own column, through a container query below 8rem, so desktop and roomier rows are unchanged.
Why
With Watch, Fork, Star and the "…" menu sharing the row, Star's column is narrower than its icon, "Starred" and the count. The button's content is centred with
min-width: 0, so it spilled past the button's left edge: the star sat on the border and the word ran into the count. Seen on knotless.dev on an iPhone, on a repository the viewer had starred.Shrinking padding alone does not make "Starred" fit a quarter of a phone's row, and a fixed
:has()rule on the four-button row would hide the word on wide phones that have room, so the column's own width decides.How it was checked
lookon the branch: the repository page signed in, phone light and dark, starred (word hidden, filled star and count inside the button) and not ("Star" shown, as on main); desktop in WebKit, unchanged. The first push also hid "Star", which the shots check caught on repository-watch and issue-subscribe; this head leaves it, so no recorded page should move.Shortcomings
The 8rem threshold is by eye for the default font and a short count. The owner's four-button row starred was not drawn: its column is narrower than the three-button one that was, so the word goes there too.