From 65d62f0eedfa5a11042462633b47efb73685a1c8 Mon Sep 17 00:00:00 2001
From: Ben Senescu <44480372+bensenescu@users.noreply.github.com>
Date: Thu, 23 Apr 2026 11:54:54 -0400
Subject: [PATCH] website: fix mobile header and footer layout (#135)

Hide Sign in and GitHub text label on small screens, wrap footer
links onto multiple rows, and clip any horizontal overflow globally.
---
 web/src/components/site-footer.tsx | 2 +-
 web/src/routes/_marketing.tsx      | 9 +++++----
 web/src/styles/app.css             | 5 +++++
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/web/src/components/site-footer.tsx b/web/src/components/site-footer.tsx
index 88ec06e..fed0f69 100644
--- a/web/src/components/site-footer.tsx
+++ b/web/src/components/site-footer.tsx
@@ -3,7 +3,7 @@ import { Link } from "@tanstack/react-router";
 export function SiteFooter({ className }: { className?: string }) {
   return (
     <div className={className}>
-      <div className="flex items-center gap-6">
+      <div className="flex flex-wrap items-center gap-x-5 gap-y-2">
         <Link to="/" className="font-semibold">
           OpenSEO
         </Link>
diff --git a/web/src/routes/_marketing.tsx b/web/src/routes/_marketing.tsx
index 454ef59..517cdf2 100644
--- a/web/src/routes/_marketing.tsx
+++ b/web/src/routes/_marketing.tsx
@@ -23,14 +23,14 @@ function MarketingLayout() {
       }}
     >
       <div className="max-w-3xl mx-auto px-6 py-16 md:py-24">
-        <nav className="flex items-center justify-between mb-20">
+        <nav className="flex items-center justify-between gap-4 mb-20">
           <Link
             to="/"
             className="text-sm font-semibold hover:opacity-80 transition-opacity"
           >
             OpenSEO
           </Link>
-          <div className="flex items-center gap-5">
+          <div className="flex items-center gap-4 sm:gap-5">
             <Link
               to="/guides"
               className="text-sm text-neutral-600 hover:text-neutral-900 transition-colors"
@@ -47,14 +47,15 @@ function MarketingLayout() {
               href="https://github.com/every-app/open-seo"
               target="_blank"
               rel="noopener noreferrer"
+              aria-label="GitHub"
               className="inline-flex items-center gap-1.5 text-sm text-neutral-600 hover:text-neutral-900 transition-colors"
             >
               <GitHubIcon size={16} />
-              <span>GitHub</span>
+              <span className="hidden sm:inline">GitHub</span>
             </a>
             <a
               href="https://app.openseo.so/sign-in"
-              className="h-8 px-3.5 text-sm font-medium border border-neutral-300 text-neutral-900 rounded-md hover:border-neutral-900 transition-colors inline-flex items-center"
+              className="hidden sm:inline-flex h-8 px-3.5 text-sm font-medium border border-neutral-300 text-neutral-900 rounded-md hover:border-neutral-900 transition-colors items-center"
             >
               Sign in
             </a>
diff --git a/web/src/styles/app.css b/web/src/styles/app.css
index 7ea3def..da376a3 100644
--- a/web/src/styles/app.css
+++ b/web/src/styles/app.css
@@ -10,3 +10,8 @@
   --color-surface-raised: #ffffff;
   --color-border-subtle: #e5e7eb;
 }
+
+html,
+body {
+  overflow-x: clip;
+}