From 545645e47559084ac9fb44042da9d25675bc7bb5 Mon Sep 17 00:00:00 2001
From: Purestone <Purestonecn@qq.com>
Date: Mon, 20 Apr 2026 02:27:17 +1000
Subject: [PATCH] fix(ui): prevent horizontal scrolling and top element overlap
 on narrow screens

- Adjust DispatchNetwork visibility logic for widths ~1024px and ~540px to prevent horizontal scrolling
- Update Hero section brand title and right border visibility logic to avoid top element overlap
---
 app/components/BrandMark.tsx       |  2 +-
 app/components/DispatchNetwork.tsx | 14 ++++++++------
 app/components/Hero.tsx            |  2 +-
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/app/components/BrandMark.tsx b/app/components/BrandMark.tsx
index b86ac1cc..ac04828d 100644
--- a/app/components/BrandMark.tsx
+++ b/app/components/BrandMark.tsx
@@ -60,7 +60,7 @@ export function BrandMark({
       </div>
       <span
         className={cn(
-          "font-serif font-black text-2xl tracking-tighter uppercase italic",
+          "hidden font-serif font-black text-2xl tracking-tighter uppercase italic [@media(min-width:410px)]:inline",
           textClassName,
         )}
       >
diff --git a/app/components/DispatchNetwork.tsx b/app/components/DispatchNetwork.tsx
index 16829c85..e21efa07 100644
--- a/app/components/DispatchNetwork.tsx
+++ b/app/components/DispatchNetwork.tsx
@@ -16,10 +16,12 @@ export function DispatchNetwork() {
       <div className="container mx-auto px-6">
         <div className="flex items-center justify-between gap-4 py-3 font-mono text-[11px] uppercase tracking-[0.25em] text-[var(--foreground)] md:text-xs">
           {/* 左：栏目标签 */}
-          <span className="font-bold whitespace-nowrap">
+          <span className="font-bold whitespace-nowrap invisible [@media(min-width:400px)]:visible">
             Dispatch Network
-            <span className="mx-2 hidden text-neutral-400 md:inline">·</span>
-            <span className="hidden font-normal text-neutral-500 md:inline">
+            <span className="mx-2 hidden text-neutral-400 [@media(min-width:1024px)]:inline">
+              ·
+            </span>
+            <span className="hidden font-normal text-neutral-500 [@media(min-width:1024px)]:inline">
               Sec. Net-01
             </span>
           </span>
@@ -36,7 +38,7 @@ export function DispatchNetwork() {
               data-umami-event-location="dispatch_network"
             >
               <GithubIcon className="h-3.5 w-3.5" />
-              <span>GitHub</span>
+              <span className="hidden sm:inline">GitHub</span>
             </Link>
             <span className="text-neutral-400">·</span>
             <Link
@@ -49,7 +51,7 @@ export function DispatchNetwork() {
               data-umami-event-location="dispatch_network"
             >
               <MessageCircle className="h-3.5 w-3.5" />
-              <span>Discord</span>
+              <span className="hidden sm:inline">Discord</span>
             </Link>
             <span className="text-neutral-400">·</span>
             <Link
@@ -62,7 +64,7 @@ export function DispatchNetwork() {
               data-umami-event-location="dispatch_network"
             >
               <BookMarked className="h-3.5 w-3.5" />
-              <span>Zotero</span>
+              <span className="hidden sm:inline">Zotero</span>
             </Link>
           </nav>
 
diff --git a/app/components/Hero.tsx b/app/components/Hero.tsx
index c03b5968..2fa9ce44 100644
--- a/app/components/Hero.tsx
+++ b/app/components/Hero.tsx
@@ -54,7 +54,7 @@ export async function Hero() {
         </div>
 
         <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
-          <div className="lg:col-span-8 border-r border-[var(--foreground)] pr-8 min-h-[400px] transition-colors duration-300">
+          <div className="lg:col-span-8 [@media(min-width:410px)]:border-r border-[var(--foreground)] pr-8 min-h-[400px] transition-colors duration-300">
             <h1 className="text-6xl md:text-8xl lg:text-[8rem] font-serif font-black leading-[0.85] tracking-tighter mb-8 uppercase italic text-[var(--foreground)]">
               Involution <br /> Hell
             </h1>