fix(ui): prevent horizontal scrolling and top element overlap on narrow screens (#314)

- 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

Author: Purestone

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,
         )}
       >

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>
 

app/components/Hero.tsx

@@ -55,7 +55,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>