alice.pds.demo.boltless.dev
This repository has no description
web/components: drop the stale button height overrides
the star and fork controls hand-rolled their own joined-group wrapper and then
forced their buttons to min-h-7.5 to fit inside a max-h-8 box, so they came out
shorter than every other button on the platform. both now use ButtonGroup, which
does the radius collapsing and border overlap already, and the buttons keep
their own size, and the signed-out stars link becomes a Button instead of an
anchor styled to look like one.
measured on the repo header story: the stars control and the fork pair are both
34px now, where the pair used to be 36px and its segments 30px.
Signed-off-by: eti <eti@eti.tf>
author
eti
committer
dawn
date
(Jul 30, 2026, 7:45 PM +0300)
commit
3ba52331
3ba52331fbe4e9979d40efab9411133a928bceea
parent
111719dd
111719dd25fd1e9520ab4aa4012a491ca5825e06
change-id
uksryvyy
uksryvyyuxwuytouxukomzszspsrovyv
+16
-25
+11
-18
web/src/lib/components/repo/RepoHeader.svelte
+11
-18
web/src/lib/components/repo/RepoHeader.svelte
···
5
5
import Star from "$icon/star";
6
6
import Avatar from "$lib/components/ui/Avatar.svelte";
7
7
import Button from "$lib/components/ui/Button.svelte";
8
+
import ButtonGroup from "$lib/components/ui/ButtonGroup.svelte";
8
9
import Tag from "$lib/components/ui/Tag.svelte";
9
10
import { getAuth } from "$lib/auth.svelte";
10
11
import StarButton from "./StarButton.svelte";
···
68
69
initialRkey={viewerStarRkey}
69
70
/>
70
71
{:else}
71
-
<a
72
+
<Button
72
73
href={resolve(`${base}/stars` as "/")}
73
-
class="inline-flex items-center gap-1.5 rounded border border-border-default px-2 py-1 text-sm text-foreground-muted no-underline hover:bg-background-subtle hover:no-underline"
74
+
variant="default"
75
+
size="sm"
76
+
icon={Star}
74
77
title="Starred by"
75
78
>
76
-
<Star class="size-4 shrink-0" aria-hidden="true" />
77
79
{counts.stars}
78
-
</a>
80
+
</Button>
79
81
{/if}
80
82
81
-
<div
82
-
class="inline-flex max-h-8 items-stretch divide-x divide-border-default overflow-clip rounded border border-border-default"
83
-
>
84
-
<Button
85
-
href={resolve(`${base}/fork` as "/")}
86
-
variant="default"
87
-
size="sm"
88
-
class="min-h-7.5 rounded-none border-0 before:rounded-none before:rounded-l-sm"
89
-
>
90
-
<GitFork class="size-4 shrink-0" aria-hidden="true" />
91
-
<span>Fork</span>
83
+
<ButtonGroup>
84
+
<Button href={resolve(`${base}/fork` as "/")} variant="default" size="sm" icon={GitFork}>
85
+
Fork
92
86
</Button>
93
87
<Button
94
88
href={resolve(`${base}/forks` as "/")}
95
-
variant="ghost"
89
+
variant="default"
96
90
size="sm"
97
-
class="min-h-7.5 rounded-none"
98
91
title="Forked by"
99
92
>
100
93
{counts.forks}
101
94
</Button>
102
-
</div>
95
+
</ButtonGroup>
103
96
</div>
104
97
</div>
105
98
+5
-7
web/src/lib/components/repo/StarButton.svelte
+5
-7
web/src/lib/components/repo/StarButton.svelte
···
3
3
import { getAuth } from "$lib/auth.svelte";
4
4
import { createStar, deleteStar } from "$lib/api/graph";
5
5
import Button from "$lib/components/ui/Button.svelte";
6
+
import ButtonGroup from "$lib/components/ui/ButtonGroup.svelte";
6
7
import { getProfileCounts } from "$lib/components/profile/counts.svelte";
7
8
import { createOptimisticRelation, createOptimisticCount } from "$lib/optimistic.svelte";
8
9
···
61
62
62
63
{#if signedIn && repoDid}
63
64
<div class="flex flex-col items-end">
64
-
<div
65
-
class="inline-flex max-h-8 items-stretch divide-x divide-border-default overflow-clip rounded border border-border-default"
66
-
>
65
+
<ButtonGroup>
67
66
<Button
68
67
variant="default"
69
68
size="sm"
70
-
class="min-h-7.5 flex-1 rounded-none border-0 before:rounded-none before:rounded-l-sm"
69
+
class="flex-1"
71
70
loading={busy}
72
71
disabled={!relation.known}
73
72
onclick={toggle}
···
80
79
</Button>
81
80
<Button
82
81
href={`/${repoOwnerHandle}/${repoName}/stars`}
83
-
variant="ghost"
82
+
variant="default"
84
83
size="sm"
85
-
class="min-h-7.5 rounded-none"
86
84
title="Starred by"
87
85
>
88
86
{starCount.value}
89
87
</Button>
90
-
</div>
88
+
</ButtonGroup>
91
89
{#if failed}
92
90
<p class="mt-1 text-xs text-foreground-danger">Something went wrong. Try again.</p>
93
91
{/if}