From 6246f7359f03b05ffc27be02206fee498f7fe89e Mon Sep 17 00:00:00 2001
From: Danny White <3104761+dnywh@users.noreply.github.com>
Date: Thu, 2 Jul 2026 08:11:25 -0600
Subject: [PATCH] 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 -->
---
 .../components/Navigation/NavigationMenu/TopNavBar.tsx    | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/apps/docs/components/Navigation/NavigationMenu/TopNavBar.tsx b/apps/docs/components/Navigation/NavigationMenu/TopNavBar.tsx
index 4ac0c6866e7..2ca75620376 100644
--- a/apps/docs/components/Navigation/NavigationMenu/TopNavBar.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/TopNavBar.tsx
@@ -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'}