admin/metatron-open-seo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

website: fix mobile header and footer layout (#135)

Browse Source 
Hide Sign in and GitHub text label on small screens, wrap footer
links onto multiple rows, and clip any horizontal overflow globally.
This commit is contained in:
Ben Senescu 2026-04-23 11:54:54 -04:00 committed by GitHub
parent 4c8a3305ed
commit 65d62f0eed
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 11 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/components/site-footer.tsx
View File

@ -3,7 +3,7 @@ import { Link } from "@tanstack/react-router";
export function SiteFooter({ className }: { className?: string }) { export function SiteFooter({ className }: { className?: string }) {
return ( return (
<div className={className}> <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"> <Link to="/" className="font-semibold">
OpenSEO OpenSEO
</Link> </Link>

9
web/src/routes/_marketing.tsx
View File

@ -23,14 +23,14 @@ function MarketingLayout() {
}} }}
> >
<div className="max-w-3xl mx-auto px-6 py-16 md:py-24"> <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 <Link
to="/" to="/"
className="text-sm font-semibold hover:opacity-80 transition-opacity" className="text-sm font-semibold hover:opacity-80 transition-opacity"
> >
OpenSEO OpenSEO
</Link> </Link>
<div className="flex items-center gap-5"> <div className="flex items-center gap-4 sm:gap-5">
<Link <Link
to="/guides" to="/guides"
className="text-sm text-neutral-600 hover:text-neutral-900 transition-colors" 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" href="https://github.com/every-app/open-seo"
target="_blank" target="_blank"
rel="noopener noreferrer" 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" className="inline-flex items-center gap-1.5 text-sm text-neutral-600 hover:text-neutral-900 transition-colors"
> >
<GitHubIcon size={16} /> <GitHubIcon size={16} />
<span>GitHub</span> <span className="hidden sm:inline">GitHub</span>
</a> </a>
<a <a
href="https://app.openseo.so/sign-in" 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 Sign in
</a> </a>

5
web/src/styles/app.css
View File

@ -10,3 +10,8 @@
--color-surface-raised: #ffffff; --color-surface-raised: #ffffff;
--color-border-subtle: #e5e7eb; --color-border-subtle: #e5e7eb;
} }
html,
body {
overflow-x: clip;
}