~ knotless Search/
↑↓ move↵ open⇧↵ all results

chadtmiller.com/knotless
Switch repository
Loading…

git that lives in your Atmosphere account

knotless.dev
1 collaborator

knotless 0.13.0 Latest 2 packages, 1 image

1
10

Star keeps inside its button on a phone once starred

Merged chadtmiller.com asked to merge into main from chadtmiller.com/knotless:web/star-phone
web/src/lib/molecules/StarButton.svelte+2−2
View file
@@ -30,9 +30,9 @@
<div class="star">
{#if logged}
<button class="btn" type="button" aria-pressed={!!star} disabled={busy} aria-busy={busy} onclick={toggle}><Icon name={star ? 'starred' : 'star'} />{star ? 'Starred' : 'Star'}</button>
<button class="btn" type="button" aria-pressed={!!star} disabled={busy} aria-busy={busy} onclick={toggle}><Icon name={star ? 'starred' : 'star'} /><span class="word">{star ? 'Starred' : 'Star'}</span></button>
{:else}
<button class="btn" type="button" popovertarget={LOGIN}><Icon name="star" />Star</button>
<button class="btn" type="button" popovertarget={LOGIN}><Icon name="star" /><span class="word">Star</span></button>
{/if}
<span class="count" title="{count} stars">{short.format(count)}</span>
</div>
web/src/app.css+5−0
View file
@@ -1497,6 +1497,11 @@ textarea.field{resize:vertical;font-family:var(--font-mono);font-size:var(--text
.repo-actions:has(>.repo-menu):has(>.star){grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}
.repo-actions:has(>.repo-menu):has(>.watch-menu){grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}
.repo-actions:has(>.repo-menu):has(>.watch-menu):has(>.star){grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) auto}
/* Star's column, beside Watch and Fork, fits "Star" but can be narrower
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}}
web/src/app.cssline 1504
review.knotless.dev

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.

.top nav{gap:var(--space-4);margin-left:0}
.search{margin-left:auto;flex:none;width:auto;justify-content:center;padding:0;border:0;background:transparent;color:var(--mute)}
/* The header's icons the same space apart, each tappable wider than it is drawn. */