alice.pds.demo.boltless.dev
This repository has no description
web/components/repo: proper StarButton and fork button styling on mobile and small viewports
Signed-off-by: eti <eti@eti.tf>
author
eti
date
(Aug 3, 2026, 6:24 PM +0300)
commit
5d765161
5d7651612b12efc1ef973442e6542f180e29eb09
parent
c1836053
c1836053e697708e75522e6877bc790f1019a0cc
+15
-10
+10
-5
web/src/lib/components/repo/RepoHeader.svelte
+10
-5
web/src/lib/components/repo/RepoHeader.svelte
···
48
48
</Button>
49
49
{/if}
50
50
51
-
<ButtonGroup>
51
+
<ButtonGroup class="flex-1">
52
52
<Button
53
53
href={resolve(`${base}/fork` as "/")}
54
54
variant="default"
55
55
size="sm"
56
56
insetShadow={true}
57
57
icon={GitFork}
58
+
class="flex-1"
58
59
>
59
60
Fork
60
61
</Button>
···
86
87
</div>
87
88
88
89
{#if repo.source}
89
-
<div class="flex flex-wrap items-center gap-1 typography-paragraph-small text-foreground-muted">
90
+
<div
91
+
class="flex flex-wrap items-center gap-1 typography-paragraph-small text-foreground-muted"
92
+
>
90
93
<GitFork class="size-3 shrink-0" aria-hidden="true" />
91
94
<span>forked from</span>
92
95
<a
···
99
102
{/if}
100
103
</div>
101
104
102
-
{@render repoActions("flex shrink-0 items-start gap-2 hidden sm:flex")}
105
+
{@render repoActions("hidden shrink-0 items-start gap-2 sm:flex")}
103
106
</div>
104
107
105
-
<div class="flex flex-wrap items-center gap-x-4 gap-y-2 typography-paragraph-small text-foreground-muted">
108
+
<div
109
+
class="flex flex-wrap items-center justify gap-x-4 gap-y-2 typography-paragraph-small text-foreground-muted"
110
+
>
106
111
{#if repo.description}
107
112
<span>{repo.description}</span>
108
113
{:else}
···
127
132
{/if}
128
133
</div>
129
134
130
-
{@render repoActions("mt-2 grid grid-cols-2 items-center gap-2 sm:hidden")}
135
+
{@render repoActions("mt-2 flex flex-wrap items-start justify-end gap-2 sm:hidden")}
131
136
</section>
+3
-3
web/src/lib/components/repo/StarButton.svelte
+3
-3
web/src/lib/components/repo/StarButton.svelte
···
65
65
</script>
66
66
67
67
{#if signedIn && repoDid}
68
-
<div class="flex flex-col items-end">
69
-
<ButtonGroup>
68
+
<div class="flex flex-col flex-1 items-start">
69
+
<ButtonGroup class="w-full">
70
70
<Button
71
71
variant="default"
72
72
size="sm"
73
73
{insetShadow}
74
-
class="flex-1"
75
74
loading={relation.loading}
76
75
disabled={!relation.known}
77
76
onclick={toggle}
77
+
class="flex-1"
78
78
>
79
79
<Star
80
80
class={`size-4 shrink-0 ${starred ? "[&_path]:fill-[currentColor]" : ""}`}
+2
-2
web/src/lib/components/ui/ButtonGroup.svelte
+2
-2
web/src/lib/components/ui/ButtonGroup.svelte
···
44
44
children: Snippet;
45
45
}
46
46
47
-
let { spaced = false, class: className, children }: Props = $props();
47
+
let { spaced = false, class: className, children, ...rest }: Props = $props();
48
48
49
49
const classes = $derived(buttonGroup({ spaced, class: className }));
50
50
</script>
51
51
52
-
<div class={classes}>
52
+
<div class={classes} {...rest}>
53
53
{@render children()}
54
54
</div>