From 1ad599c3ac8e5bdbb0964b48f963f49a180747a7 Mon Sep 17 00:00:00 2001
From: TerryM <chiachintat10@gmail.com>
Date: Wed, 27 May 2026 15:18:27 +0800
Subject: [PATCH] Prevent mobile horizontal scroll black edge

---
 src/components/messageStream/FilterChips.tsx | 4 ++--
 src/index.css                                | 5 +++++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/messageStream/FilterChips.tsx b/src/components/messageStream/FilterChips.tsx
index 67e4f44..e1e254d 100644
--- a/src/components/messageStream/FilterChips.tsx
+++ b/src/components/messageStream/FilterChips.tsx
@@ -60,7 +60,7 @@ export function FilterChips({ type, onTypeChange }: FilterChipsProps) {
   return (
     <div
       ref={containerRef}
-      className="sticky top-0 z-10 border-b border-ark-line bg-ark-bg/90 py-2 backdrop-blur md:rounded-t-xl"
+      className="sticky top-0 z-10 overflow-hidden border-b border-ark-line bg-ark-bg/90 py-2 backdrop-blur md:rounded-t-xl"
     >
       <div className="flex items-start gap-1.5">
         <div
@@ -104,7 +104,7 @@ export function FilterChips({ type, onTypeChange }: FilterChipsProps) {
       <div
         ref={measureRef}
         aria-hidden="true"
-        className="pointer-events-none invisible absolute left-0 top-0 -z-10 flex gap-1.5 whitespace-nowrap"
+        className="pointer-events-none invisible absolute left-0 top-0 -z-10 flex h-0 max-w-none gap-1.5 overflow-hidden whitespace-nowrap"
       >
         {TYPE_FILTERS.map((tp) => (
           <span key={tp} className={chipClass(type === tp)}>
diff --git a/src/index.css b/src/index.css
index 5b4e14d..4bab0a0 100644
--- a/src/index.css
+++ b/src/index.css
@@ -8,6 +8,11 @@ body,
   height: 100%;
 }
 
+html,
+body {
+  overflow-x: hidden;
+}
+
 body {
   @apply bg-ark-bg text-neutral-100 antialiased;
 }