From ab7ec68dd87f5f5e872274a7298affef5f728938 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 11 Jul 2026 09:21:33 +0000
Subject: [PATCH] fix: top 3 mobile UX issues from audit
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

UX audit at 390px/1440px against a Linear-style bar found three
mobile-breaking issues:

1. Bookmark rows showed only the title on mobile — domain and tags were
   hidden below md, and the invisible hover checkbox reserved space and
   intercepted taps. Rows now render a second line with domain + tag
   chips on mobile, and the checkbox only renders there in selection
   mode. Desktop layout is unchanged.

2. The selection action bar overflowed the viewport horizontally on
   phones, cutting off the count and Cancel button. It now docks as a
   full-width bottom bar with safe-area padding on small screens and
   keeps the floating pill on sm+, with compact labels so all actions
   fit down to 320px.

3. The top bar squeezed the search field until its placeholder
   truncated to "Sea". The sort select collapses to an icon trigger
   (native select overlay) on mobile, spacing tightens, and the search
   input keeps usable width.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016huxQpLUq98cV3CJf2RCNW
---
 src/components/bookmarks/BookmarkItem.jsx     | 35 +++++++++++--
 src/components/bookmarks/FilterBar.jsx        | 50 ++++++++++++++-----
 .../bookmarks/SelectionActionBar.jsx          | 31 ++++++------
 src/components/ui/Icons.jsx                   |  1 +
 4 files changed, 87 insertions(+), 30 deletions(-)

diff --git a/src/components/bookmarks/BookmarkItem.jsx b/src/components/bookmarks/BookmarkItem.jsx
index 9176429..cb1fd87 100644
--- a/src/components/bookmarks/BookmarkItem.jsx
+++ b/src/components/bookmarks/BookmarkItem.jsx
@@ -16,6 +16,8 @@ export const BookmarkItem = forwardRef(function BookmarkItem(
 
   const faviconUrl = `https://www.google.com/s2/favicons?domain=${domain}&sz=32`
 
+  const sortedTags = Array.isArray(tags) ? [...tags].sort((a, b) => a.localeCompare(b)) : []
+
   // Long-press detection for mobile context menu
   const longPressTimer = useRef(null)
   const isLongPress = useRef(false)
@@ -103,10 +105,14 @@ export const BookmarkItem = forwardRef(function BookmarkItem(
           : ''
       }`}
     >
-      {/* Checkbox */}
+      {/* Checkbox — on mobile only rendered in selection mode so it doesn't
+          reserve space or steal taps; on md+ it appears on hover */}
       <button
         onClick={handleCheckboxClick}
-        className={`flex-shrink-0 w-4 h-4 rounded border transition-all duration-150 flex items-center justify-center ${
+        aria-label={isChecked ? 'Deselect bookmark' : 'Select bookmark'}
+        className={`flex-shrink-0 w-4 h-4 rounded border transition-all duration-150 items-center justify-center ${
+          selectionMode || isChecked ? 'flex' : 'hidden md:flex'
+        } ${
           isChecked
             ? 'bg-primary border-primary'
             : selectionMode
@@ -146,7 +152,7 @@ export const BookmarkItem = forwardRef(function BookmarkItem(
           <span className="text-xs text-muted-foreground truncate flex-shrink-0 font-normal hidden md:inline">{domain}</span>
           {tags && tags.length > 0 && (
             <div className="items-center gap-1.5 flex-shrink-0 hidden md:flex">
-              {[...tags].sort((a, b) => a.localeCompare(b)).map((tag) => (
+              {sortedTags.map((tag) => (
                 <span
                   key={tag}
                   onClick={(e) => {
@@ -163,6 +169,29 @@ export const BookmarkItem = forwardRef(function BookmarkItem(
             </div>
           )}
         </div>
+
+        {/* Second line on mobile: domain + tags (inline on md+) */}
+        {(domain || (tags && tags.length > 0)) && (
+          <div className="flex items-center gap-1.5 mt-1 overflow-hidden md:hidden">
+            {domain && (
+              <span className="text-xs text-muted-foreground truncate flex-shrink-0 max-w-[45%]">{domain}</span>
+            )}
+            {tags && tags.length > 0 && sortedTags.map((tag) => (
+              <span
+                key={tag}
+                onClick={(e) => {
+                  e.stopPropagation()
+                  if (!selectionMode) {
+                    onTagClick && onTagClick(tag)
+                  }
+                }}
+                className="text-[10px] leading-none px-2 py-1 rounded-full bg-secondary text-secondary-foreground flex-shrink-0 font-medium"
+              >
+                {tag}
+              </span>
+            ))}
+          </div>
+        )}
       </div>
     </div>
   )
diff --git a/src/components/bookmarks/FilterBar.jsx b/src/components/bookmarks/FilterBar.jsx
index 5fd4adb..acf4576 100644
--- a/src/components/bookmarks/FilterBar.jsx
+++ b/src/components/bookmarks/FilterBar.jsx
@@ -1,4 +1,11 @@
-import { X, ChevronDown, Menu, Search, Plus, ListChecks } from '../ui/Icons'
+import { X, ChevronDown, Menu, Search, Plus, ListChecks, ArrowUpDown } from '../ui/Icons'
+
+const SORT_OPTIONS = [
+  { value: 'recent', label: 'Recent' },
+  { value: 'oldest', label: 'Oldest' },
+  { value: 'title', label: 'A-Z' },
+  { value: 'updated', label: 'Updated' },
+]
 
 export function FilterBar({
   searchQuery,
@@ -23,11 +30,11 @@ export function FilterBar({
   }
 
   return (
-    <div className="sticky top-0 z-10 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 px-4 py-3">
-      <div className="flex items-center gap-3">
+    <div className="sticky top-0 z-10 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 px-3 sm:px-4 py-3">
+      <div className="flex items-center gap-1.5 sm:gap-3">
         <button
           onClick={onToggleSidebar}
-          className="lg:hidden p-2 -ml-2 hover:bg-accent rounded-md transition-colors"
+          className="lg:hidden h-9 w-9 -ml-1 flex-shrink-0 inline-flex items-center justify-center hover:bg-accent rounded-md transition-colors"
           aria-label="Open sidebar"
         >
           <Menu className="w-5 h-5" strokeWidth={1.5} />
@@ -36,14 +43,14 @@ export function FilterBar({
         {/* Spacer to align search with bookmark titles (accounts for checkbox + gap) */}
         <div className="hidden lg:block w-7 flex-shrink-0" />
 
-        <div className="flex-1 relative">
+        <div className="flex-1 min-w-0 relative">
           <div className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none">
             <Search className="w-4 h-4" strokeWidth={1.5} />
           </div>
           <input
             ref={searchInputRef}
             type="text"
-            placeholder="Search bookmarks..."
+            placeholder="Search..."
             value={searchQuery}
             onChange={(e) => onSearchChange(e.target.value)}
             onKeyDown={handleKeyDown}
@@ -60,23 +67,40 @@ export function FilterBar({
           )}
         </div>
 
-        <div className="relative">
+        {/* Sort: icon-only trigger on mobile (invisible native select on top), text select on sm+ */}
+        <div className="relative sm:hidden h-9 w-9 flex-shrink-0">
+          <div className="h-full w-full inline-flex items-center justify-center rounded-md text-muted-foreground">
+            <ArrowUpDown className="w-4 h-4" strokeWidth={1.5} />
+          </div>
+          <select
+            value={sortBy}
+            onChange={(e) => onSortChange(e.target.value)}
+            aria-label="Sort bookmarks"
+            className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
+          >
+            {SORT_OPTIONS.map((o) => (
+              <option key={o.value} value={o.value}>{o.label}</option>
+            ))}
+          </select>
+        </div>
+
+        <div className="relative hidden sm:block flex-shrink-0">
           <select
             value={sortBy}
             onChange={(e) => onSortChange(e.target.value)}
+            aria-label="Sort bookmarks"
             className="appearance-none h-10 pl-3 pr-8 bg-transparent text-sm font-medium text-muted-foreground cursor-pointer rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background transition-colors"
           >
-            <option value="recent">Recent</option>
-            <option value="oldest">Oldest</option>
-            <option value="title">A-Z</option>
-            <option value="updated">Updated</option>
+            {SORT_OPTIONS.map((o) => (
+              <option key={o.value} value={o.value}>{o.label}</option>
+            ))}
           </select>
           <ChevronDown className="w-3 h-3 absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none text-muted-foreground" strokeWidth={1.5} />
         </div>
 
         <button
           onClick={onToggleSelectionMode}
-          className={`h-9 w-9 rounded-md inline-flex items-center justify-center transition-colors ${
+          className={`h-9 w-9 flex-shrink-0 rounded-md inline-flex items-center justify-center transition-colors ${
             selectionMode
               ? 'bg-primary text-primary-foreground hover:bg-primary/90'
               : 'text-muted-foreground hover:text-foreground hover:bg-accent'
@@ -92,7 +116,7 @@ export function FilterBar({
 
         <button
           onClick={onAddNew}
-          className="h-9 px-4 rounded-md bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm font-medium text-sm inline-flex items-center gap-1.5 transition-colors"
+          className="h-9 px-3 sm:px-4 flex-shrink-0 rounded-md bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm font-medium text-sm inline-flex items-center gap-1.5 transition-colors"
           aria-label="Add bookmark"
         >
           <Plus className="w-4 h-4" strokeWidth={2} />
diff --git a/src/components/bookmarks/SelectionActionBar.jsx b/src/components/bookmarks/SelectionActionBar.jsx
index b610c2d..f202921 100644
--- a/src/components/bookmarks/SelectionActionBar.jsx
+++ b/src/components/bookmarks/SelectionActionBar.jsx
@@ -7,28 +7,29 @@ export function SelectionActionBar({ selectedCount, onTag, onReadLater, onDelete
   if (selectedCount === 0) return null
 
   return (
-    <div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-50 animate-in fade-in slide-in-from-bottom-4 duration-200">
-      <div className="flex items-center gap-2 px-4 py-2.5 bg-popover border border-border rounded-lg shadow-lg">
-        <span className="text-sm font-medium text-foreground pr-2">
-          {selectedCount} selected
+    <div className="fixed bottom-0 inset-x-0 z-50 pb-[env(safe-area-inset-bottom)] sm:pb-0 sm:bottom-6 sm:inset-x-auto sm:left-1/2 sm:-translate-x-1/2 animate-in fade-in slide-in-from-bottom-4 duration-200">
+      <div className="flex items-center justify-between sm:justify-start gap-1 sm:gap-2 px-3 sm:px-4 py-2.5 bg-popover border-t sm:border border-border sm:rounded-lg shadow-lg whitespace-nowrap">
+        <span className="text-sm font-medium text-foreground pr-1 sm:pr-2 flex-shrink-0">
+          <span className="hidden sm:inline">{selectedCount} selected</span>
+          <span className="sm:hidden">{selectedCount}</span>
         </span>
 
-        <div className="w-px h-5 bg-border" />
+        <div className="w-px h-5 bg-border flex-shrink-0" />
 
         {confirmingDelete ? (
           <>
-            <span className="text-sm text-destructive font-medium">
+            <span className="text-sm text-destructive font-medium truncate">
               Delete {selectedCount} bookmark{selectedCount > 1 ? 's' : ''}?
             </span>
             <button
               onClick={() => { setConfirmingDelete(false); onDelete() }}
-              className="px-3 py-1.5 text-sm font-medium bg-destructive text-destructive-foreground hover:bg-destructive/90 rounded-md transition-colors"
+              className="px-3 py-2 text-sm font-medium bg-destructive text-destructive-foreground hover:bg-destructive/90 rounded-md transition-colors flex-shrink-0"
             >
               Confirm
             </button>
             <button
               onClick={() => setConfirmingDelete(false)}
-              className="flex items-center gap-1.5 px-3 py-1.5 text-sm text-muted-foreground hover:text-foreground hover:bg-accent rounded-md transition-colors"
+              className="flex items-center gap-1.5 px-3 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-accent rounded-md transition-colors flex-shrink-0"
             >
               Cancel
             </button>
@@ -37,31 +38,33 @@ export function SelectionActionBar({ selectedCount, onTag, onReadLater, onDelete
           <>
             <button
               onClick={onTag}
-              className="flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-foreground hover:bg-accent rounded-md transition-colors"
+              className="flex items-center gap-1.5 px-2.5 sm:px-3 py-2 text-sm font-medium text-foreground hover:bg-accent rounded-md transition-colors flex-shrink-0"
             >
               <Hash className="w-4 h-4" strokeWidth={1.5} />
               Tag
             </button>
             <button
               onClick={onReadLater}
-              className="flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-foreground hover:bg-accent rounded-md transition-colors"
+              className="flex items-center gap-1.5 px-2.5 sm:px-3 py-2 text-sm font-medium text-foreground hover:bg-accent rounded-md transition-colors flex-shrink-0"
             >
               <BookmarkPlus className="w-4 h-4" strokeWidth={1.5} />
-              Read Later
+              <span className="hidden min-[400px]:inline">Read Later</span>
+              <span className="min-[400px]:hidden">Later</span>
             </button>
             <button
               onClick={() => setConfirmingDelete(true)}
-              className="flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium text-destructive hover:bg-destructive/10 rounded-md transition-colors"
+              className="flex items-center gap-1.5 px-2.5 sm:px-3 py-2 text-sm font-medium text-destructive hover:bg-destructive/10 rounded-md transition-colors flex-shrink-0"
             >
               <Trash className="w-4 h-4" strokeWidth={1.5} />
               Delete {selectedCount}
             </button>
             <button
               onClick={onCancel}
-              className="flex items-center gap-1.5 px-3 py-1.5 text-sm text-muted-foreground hover:text-foreground hover:bg-accent rounded-md transition-colors"
+              aria-label="Cancel selection"
+              className="flex items-center gap-1.5 px-2.5 sm:px-3 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-accent rounded-md transition-colors flex-shrink-0"
             >
               <X className="w-4 h-4" strokeWidth={1.5} />
-              Cancel
+              <span className="hidden sm:inline">Cancel</span>
             </button>
           </>
         )}
diff --git a/src/components/ui/Icons.jsx b/src/components/ui/Icons.jsx
index 48a99c7..93c9f04 100644
--- a/src/components/ui/Icons.jsx
+++ b/src/components/ui/Icons.jsx
@@ -20,6 +20,7 @@ export {
   Square,
   CheckSquare,
   ListChecks,
+  ArrowUpDown,
   Upload,
   Cloud,
   CloudOff,