Tightened up a bit.

Author: nedtwigg

browser-extension/tests/playground/claude.tsx

@@ -305,9 +305,18 @@ export const ClaudePrototype = () => {
   return (
     <div className='min-h-screen bg-white'>
       {/* Header controls */}
-      <div className='p-6 border-b'>
+      <div className='p-3 border-b'>
         <div className='flex flex-wrap gap-3 items-center'>
-          {/* Toggle filters */}
+          <div className='relative flex-1 max-w-xs'>
+            <Search className='absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400' />
+            <input
+              type='text'
+              placeholder='Search drafts...'
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className='w-full pl-9 pr-3 py-1.5 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500'
+            />
+          </div>
           <label className='flex items-center gap-2 cursor-pointer'>
             <input
               type='checkbox'
@@ -317,7 +326,6 @@ export const ClaudePrototype = () => {
             />
             <span className='text-sm'>Has code</span>
           </label>
-
           <label className='flex items-center gap-2 cursor-pointer'>
             <input
               type='checkbox'
@@ -327,19 +335,6 @@ export const ClaudePrototype = () => {
             />
             <span className='text-sm'>Private only</span>
           </label>
-
-
-          {/* Search */}
-          <div className='relative flex-1 max-w-xs'>
-            <Search className='absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400' />
-            <input
-              type='text'
-              placeholder='Search drafts...'
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              className='w-full pl-9 pr-3 py-1.5 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500'
-            />
-          </div>
         </div>
 
         {/* Bulk actions bar */}
@@ -397,7 +392,7 @@ export const ClaudePrototype = () => {
                   onClick={() => setSortBy(sortBy === 'edited-newest' ? 'edited-oldest' : 'edited-newest')}
                   className='flex items-center gap-1 hover:text-gray-700'
                 >
-                  Edited
+                  EDITED
                   {sortBy === 'edited-newest' ? (
                     <ArrowDown className='w-3 h-3' />
                   ) : (