ceos/unsloth
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Tidy update banner and auth button spacing (#6279)

Browse source 
* Fix update banner button spacing

* Reduce auth submit button horizontal padding

* Wrap web update banner actions on narrow widths

---------

Co-authored-by: Unsloth <michaelhan@Michaels-MacBook-Pro.local>
This commit is contained in:
Michael Han 2026-06-12 20:01:18 -07:00 • committed by GitHub
commit 502d4ade1c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 26 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

8
studio/frontend/src/components/llama-update-banner.tsx
View file

@ -203,11 +203,11 @@ export function LlamaUpdateBanner({
/>
</div>
) : (
<div className="mt-4 flex flex-wrap items-center justify-between gap-y-2">
<div className="mt-4 flex flex-wrap items-center justify-end gap-x-1 gap-y-2">
<Button
size="sm"
variant="ghost"
className="-ml-2 h-auto rounded-full px-2.5 py-2 text-[13px] font-medium text-foreground"
className="h-auto rounded-full px-3 py-2 text-[13px] font-medium text-foreground"
onClick={snooze}
data-testid="llama-update-snooze-button"
>
@ -215,8 +215,8 @@ export function LlamaUpdateBanner({
</Button>
<Button
size="sm"
// ml offsets the pill's filled edge so visual gaps stay equal
className="ml-2.5 h-auto rounded-full px-3.5 py-2 text-[13px]"
// -mr optically aligns the filled pill's edge with the card padding
className="-mr-1 h-auto rounded-full px-3.5 py-2 text-[13px]"
onClick={handleUpdate}
data-testid="llama-update-button"
>

39
studio/frontend/src/components/web/update-banner.tsx
View file

@ -137,24 +137,27 @@ export function WebUpdateBanner({
>
Release notes
</a>
<Button
size="sm"
variant="ghost"
className="h-auto rounded-full px-2.5 py-2 text-[13px] font-medium text-foreground"
onClick={snooze}
data-testid="web-update-snooze-button"
>
Remind me later
</Button>
<Button
size="sm"
// ml offsets the pill's filled edge so visual gaps stay equal
className="ml-2.5 h-auto rounded-full px-3.5 py-2 text-[13px]"
onClick={handleCopyCommand}
data-testid="web-update-copy-button"
>
{copied ? "Copied" : "Copy command"}
</Button>
{/* wrap + right-align so buttons stack instead of clipping on very narrow banners */}
<div className="flex flex-wrap items-center justify-end gap-x-1 gap-y-2">
<Button
size="sm"
variant="ghost"
className="h-auto rounded-full px-3 py-2 text-[13px] font-medium text-foreground"
onClick={snooze}
data-testid="web-update-snooze-button"
>
Remind me later
</Button>
<Button
size="sm"
// -mr optically aligns the filled pill's edge with the card padding
className="-mr-1 h-auto rounded-full px-3.5 py-2 text-[13px]"
onClick={handleCopyCommand}
data-testid="web-update-copy-button"
>
{copied ? "Copied" : "Copy command"}
</Button>
</div>
</div>
</div>
</motion.div>

2
studio/frontend/src/features/auth/components/auth-form.tsx
View file

@ -443,7 +443,7 @@ export function AuthForm({ mode }: AuthFormProps): ReactElement | null {
<Button
type="submit"
className="mx-auto flex w-fit px-8"
className="mx-auto flex w-fit px-6"
disabled={
loading ||
statusLoading ||