From 942db88f58b3dd3d9426f1492370ff78753901da Mon Sep 17 00:00:00 2001
From: TerryM <chiachintat10@gmail.com>
Date: Sat, 30 May 2026 18:14:58 +0800
Subject: [PATCH] fix(ui): disable text selection on header, filter chips, and
 bottom nav

Add `select-none` to the sticky header, the type filter chips row, and the
mobile bottom nav so their labels and icons can't be highlighted/selected.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/components/messageStream/FilterChips.tsx | 2 +-
 src/layouts/PublicLayout.tsx                 | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/messageStream/FilterChips.tsx b/src/components/messageStream/FilterChips.tsx
index a649951..a82519a 100644
--- a/src/components/messageStream/FilterChips.tsx
+++ b/src/components/messageStream/FilterChips.tsx
@@ -48,7 +48,7 @@ export function FilterChips({ type, onTypeChange }: FilterChipsProps) {
     ].join(" ");
 
   return (
-    <div className="bg-ark-bg/95 backdrop-blur md:rounded-t-xl">
+    <div className="select-none bg-ark-bg/95 backdrop-blur md:rounded-t-xl">
       <div
         ref={scrollRef}
         className="flex items-end gap-2 overflow-x-auto overflow-y-hidden px-4 pr-10 [-ms-overflow-style:none] [scrollbar-width:none] md:gap-5 md:px-1 md:pr-1 [&::-webkit-scrollbar]:hidden"
diff --git a/src/layouts/PublicLayout.tsx b/src/layouts/PublicLayout.tsx
index 7d70149..748fbfd 100644
--- a/src/layouts/PublicLayout.tsx
+++ b/src/layouts/PublicLayout.tsx
@@ -413,7 +413,7 @@ export function PublicLayout() {
   return (
     <div className="min-h-full flex flex-col">
       <DocumentMeta />
-      <header className="sticky top-0 z-40 bg-[#08070c] backdrop-blur-md md:border-b md:border-ark-line md:bg-ark-nav/98">
+      <header className="sticky top-0 z-40 select-none bg-[#08070c] backdrop-blur-md md:border-b md:border-ark-line md:bg-ark-nav/98">
         <div className="flex h-[64px] items-center justify-between bg-[#08070c] px-4 py-3 md:hidden">
           <div className="flex h-8 min-w-0 shrink items-center gap-2 text-[20px] font-black leading-5 tracking-tight text-ark-gold">
             {/* Logo → home; page-name text → scroll to top of the current page. */}
@@ -715,7 +715,7 @@ export function PublicLayout() {
         </AnimatePresence>
       </main>
 
-      <nav className="sticky inset-x-0 bottom-0 z-40 bg-[#0C0D0F]/90 backdrop-blur md:hidden">
+      <nav className="sticky inset-x-0 bottom-0 z-40 select-none bg-[#0C0D0F]/90 backdrop-blur md:hidden">
         <div className="grid h-[78px] grid-cols-4 gap-3 px-5 py-4 text-center text-[11px] leading-[17.6px]">
           <BottomNavIcon
             to="/"