From 3ff51c27992f46747fe7a6cae760f160061a1e52 Mon Sep 17 00:00:00 2001
From: Michel de Graaf <michel@re-invention.nl>
Date: Sat, 25 Jul 2026 05:39:56 +0200
Subject: [PATCH] style(website): widen the mobile page gutter to 24px

The wordmark and the hero mark sat 18px off the edge, close enough to read as
flush against it on a phone. The nav bar and Wrap carry the same gutter, so
both move together.
---
 website/src/components/layout/nav.tsx | 2 +-
 website/src/components/ui/layout.tsx  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/website/src/components/layout/nav.tsx b/website/src/components/layout/nav.tsx
index 3ccb95d..69f2ae5 100644
--- a/website/src/components/layout/nav.tsx
+++ b/website/src/components/layout/nav.tsx
@@ -14,7 +14,7 @@ const ITEMS = [
 
 export const Nav = () => (
   <header className="sticky top-0 z-50 border-b border-hairline bg-[color-mix(in_srgb,var(--bg-base)_88%,transparent)] backdrop-blur-[8px]">
-    <div className="mx-auto flex max-w-[1140px] flex-wrap items-center gap-x-4 gap-y-3 px-[18px] pt-2.5 sm:h-[60px] sm:flex-nowrap sm:gap-6 sm:px-7 sm:pt-0">
+    <div className="mx-auto flex max-w-[1140px] flex-wrap items-center gap-x-4 gap-y-3 px-6 pt-2.5 sm:h-[60px] sm:flex-nowrap sm:gap-6 sm:px-7 sm:pt-0">
       <NavLink
         to="/"
         aria-label="soulseek-rs home"
diff --git a/website/src/components/ui/layout.tsx b/website/src/components/ui/layout.tsx
index 36a7e44..b1db73c 100644
--- a/website/src/components/ui/layout.tsx
+++ b/website/src/components/ui/layout.tsx
@@ -6,7 +6,7 @@ interface WrapProps {
 }
 
 export const Wrap = ({ children, className }: WrapProps) => (
-  <div className={cn('mx-auto w-full max-w-[1140px] px-[18px] sm:px-7', className)}>
+  <div className={cn('mx-auto w-full max-w-[1140px] px-6 sm:px-7', className)}>
     {children}
   </div>
 )