fix(docs): restore spacing between wordmark and DOCS label (#47517)

## What kind of change does this PR introduce?

Bug fix

## What is the current behavior?

The docs header wordmark renders the Supabase SVG and the "DOCS" suffix
flush against each other with no gap. `HeaderLogo` used
`buttonVariants`, which applies `space-x-2` for spacing, but the logo
images use `m-0!` which cancels that margin-based spacing. The
`buttonVariants` call also pulled in button styles that were immediately
overridden (`bg-transparent!`, `border-none!`, `shadow-none!`).

## What is the new behavior?

`HeaderLogo` is a plain flex link with explicit `gap-1.5`, giving
reliable spacing between the wordmark and "DOCS" without the dead
`space-x-2` or button style overrides.

| Before | After |
| --- | --- |
| <img width="368" height="126" alt="CleanShot 2026-07-01 at 18 54
20@2x"
src="https://github.com/user-attachments/assets/29186264-6fa7-44b1-bf37-7757ff35d740"
/> | <img width="370" height="160" alt="CleanShot 2026-07-01 at 18 53
00@2x"
src="https://github.com/user-attachments/assets/888e5973-c0ce-480c-acf0-520b26cfa007"
/> |

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Style**
* Updated the top navigation logo link styling, slightly adjusting
spacing and simplifying its appearance.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
Danny White authored and GitHub committed 2026-07-03 00:11:25 +10:00
1 parent f5c0074a47
commit 6246f7359f
1 file changed
+1 -7
@@ -98,13 +98,7 @@ const HeaderLogo = memo(() => {
const { navigationLogo } = getCustomContent(['navigation:logo'])
return (
<Link
href="/"
className={cn(
buttonVariants({ variant: 'default' }),
'flex shrink-0 items-center w-fit bg-transparent! border-none! shadow-none!'
)}
>
<Link href="/" className="flex shrink-0 items-center gap-1.5 w-fit">
<Image
className={cn('hidden dark:block m-0!', largeLogo && 'h-[36px]')}
src={navigationLogo?.dark ?? '/docs/supabase-dark.svg'}