terry/Arkie-Library-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): disable text selection on header, filter chips, and bottom nav

Browse Source 
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>
This commit is contained in:
TerryM
2026-05-30 18:14:58 +08:00
parent 5f7c4eea62
commit 942db88f58
2 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/messageStream/FilterChips.tsx
View File

@@ -48,7 +48,7 @@ export function FilterChips({ type, onTypeChange }: FilterChipsProps) {
].join(" "); ].join(" ");
return ( 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 <div
ref={scrollRef} 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" 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"

4
src/layouts/PublicLayout.tsx
View File

@@ -413,7 +413,7 @@ export function PublicLayout() {
return ( return (
<div className="min-h-full flex flex-col"> <div className="min-h-full flex flex-col">
<DocumentMeta /> <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-[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"> <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. */} {/* Logo → home; page-name text → scroll to top of the current page. */}
@@ -715,7 +715,7 @@ export function PublicLayout() {
</AnimatePresence> </AnimatePresence>
</main> </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]"> <div className="grid h-[78px] grid-cols-4 gap-3 px-5 py-4 text-center text-[11px] leading-[17.6px]">
<BottomNavIcon <BottomNavIcon
to="/" to="/"