clean up sort & filter

static/js/index.js

@@ -951,6 +951,9 @@ window.addEventListener('resize', () => {
         layoutContainer.parentElement.classList.remove('preview-open');
         previewPanel.classList.add('lg:opacity-0', 'lg:pointer-events-none');
     }
+    
+    // Update category filter display names for new screen size
+    updateBrowseCategoryFilter();
 });
 
 // Setup preview panel events
@@ -1325,10 +1328,22 @@ function updateBrowseCategoryFilter() {
                 option.textContent = 'Root Folder';
             } else {
                 // For full paths, show the path but make it more readable
-                const displayName = category
+                const parts = category
                     .split('/')
-                    .map(part => part.charAt(0).toUpperCase() + part.slice(1).replace('_', ' '))
-                    .join(' › ');
+                    .map(part => part.charAt(0).toUpperCase() + part.slice(1).replace('_', ' '));
+                
+                // Check if we're on a small screen and truncate if necessary
+                const isSmallScreen = window.innerWidth < 640; // sm breakpoint
+                let displayName;
+                
+                if (isSmallScreen && parts.length > 1) {
+                    // On small screens, show only the last part with "..." if nested
+                    displayName = '...' + parts[parts.length - 1];
+                } else {
+                    // Full path with separators
+                    displayName = parts.join(' › ');
+                }
+                
                 option.textContent = displayName;
             }
             categorySelect.appendChild(option);

templates/index.html

@@ -184,12 +184,12 @@
 {% block content %}
 <div class="layout-content-container flex flex-col w-full max-w-5xl mb-24">
     <div class="flex-none bg-gray-50 py-4">
-        <div class="flex flex-wrap items-center justify-between gap-4 mt-2 sm:mt-8">
-            <h2 class="text-gray-900 text-3xl font-bold leading-tight tracking-tight">
-                Browse Patterns
-            </h2>
-
-            <div class="flex items-center gap-2 sm:gap-4 flex-wrap">
+        <div class="mt-2 sm:mt-8">
+            <!-- Header Row -->
+            <div class="flex items-center justify-between gap-2 mb-4">
+                <h2 class="text-gray-900 text-3xl font-bold leading-tight tracking-tight">
+                    Browse Patterns
+                </h2>
                 <button
                         id="cacheAllButton"
                         class="inline-flex gap-1 sm:gap-2 transition-colors items-center justify-center rounded-lg px-3 sm:px-4 py-2 sm:py-2.5 text-xs sm:text-sm font-semibold text-gray-900 hover:text-slate-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 shrink-0"
@@ -198,64 +198,64 @@
                     <span class="hidden sm:inline">Cache All Previews</span>
                     <span class="sm:hidden">Cache</span>
                 </button>
+            </div>
+            
+            <!-- Controls Row -->
+            <div class="flex gap-1 sm:gap-2 items-center text-xs sm:text-sm min-w-0 overflow-x-auto mb-4">
+                <div class="flex items-center gap-1">
+                    <span class="text-xs font-medium text-gray-700 hidden sm:inline">Sort:</span>
+                    <select id="browseSortFieldSelect" class="text-xs rounded border border-gray-300 bg-white text-gray-900 px-1 sm:px-2 py-1 min-w-0 flex-shrink" disabled>
+                        <option value="name">Name</option>
+                        <option value="date">Date Modified</option>
+                        <option value="coordinates">Coordinates</option>
+                        <option value="favorite">Favorite</option>
+                    </select>
+                    <button id="browseSortDirectionBtn" class="p-1 rounded hover:bg-gray-200 text-gray-500 opacity-50 cursor-not-allowed" title="Loading..." disabled>
+                        <span class="material-icons text-sm" id="browseSortDirectionIcon">arrow_upward</span>
+                    </button>
+                </div>
                 
-                <!-- Sort and Filter Controls for Browse Page -->
-                <div class="flex gap-1 sm:gap-2 items-center text-xs sm:text-sm">
-                    <div class="flex items-center gap-1">
-                        <span class="text-xs font-medium text-gray-700 hidden sm:inline">Sort:</span>
-                        <select id="browseSortFieldSelect" class="text-xs rounded border border-gray-300 bg-white text-gray-900 px-1 sm:px-2 py-1" disabled>
-                            <option value="name">Name</option>
-                            <option value="date">Date Modified</option>
-                            <option value="coordinates">Coordinates</option>
-                            <option value="favorite">Favorite</option>
-                        </select>
-                        <button id="browseSortDirectionBtn" class="p-1 rounded hover:bg-gray-200 text-gray-500 opacity-50 cursor-not-allowed" title="Loading..." disabled>
-                            <span class="material-icons text-sm" id="browseSortDirectionIcon">arrow_upward</span>
-                        </button>
-                    </div>
-                    
-                    <div class="flex items-center gap-1">
-                        <span class="text-xs font-medium text-gray-700 hidden sm:inline">Folder:</span>
-                        <select id="browseCategoryFilterSelect" class="text-xs rounded border border-gray-300 bg-white text-gray-900 px-1 sm:px-2 py-1" disabled>
-                            <option value="all">All Folders (loading...)</option>
-                        </select>
-                    </div>
+                <div class="flex items-center gap-1 min-w-0">
+                    <span class="text-xs font-medium text-gray-700 hidden sm:inline">Folder:</span>
+                    <select id="browseCategoryFilterSelect" class="text-xs rounded border border-gray-300 bg-white text-gray-900 px-1 sm:px-2 py-1 min-w-0 flex-shrink" disabled>
+                        <option value="all">All Folders (loading...)</option>
+                    </select>
                 </div>
             </div>
+        </div>
 
-            <div class="relative w-full sm:w-auto flex grow gap-2 items-center flex-wrap">
-                <div class="flex gap-2 flex-1">
-                    <div class="relative flex-1">
-                        <input
-                                id="patternSearch"
-                                class="form-input block w-full h-11 rounded-lg border-gray-300 bg-gray-50 py-2.5 p-4 text-gray-900 placeholder-gray-500 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 sm:text-sm"
-                                placeholder="Search patterns..."
-                                type="search"
-                        />
-                        <button
-                                id="searchButton"
-                                class="inline-flex absolute top-0 right-0 h-11 w-11 items-center justify-center rounded-lg bg-blue-600 p-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
-                        >
-                            <span class="material-icons text-sm font-semibold text-white">search</span>
-                        </button>
-                    </div>
+        <div class="relative w-full sm:w-auto flex grow gap-2 items-center flex-wrap">
+            <div class="flex gap-2 flex-1">
+                <div class="relative flex-1">
+                    <input
+                            id="patternSearch"
+                            class="form-input block w-full h-11 rounded-lg border-gray-300 bg-gray-50 py-2.5 p-4 text-gray-900 placeholder-gray-500 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 sm:text-sm"
+                            placeholder="Search patterns..."
+                            type="search"
+                    />
+                    <button
+                            id="searchButton"
+                            class="inline-flex absolute top-0 right-0 h-11 w-11 items-center justify-center rounded-lg bg-blue-600 p-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+                    >
+                        <span class="material-icons text-sm font-semibold text-white">search</span>
+                    </button>
                 </div>
-                <!-- Add Pattern Button -->
-                <input
-                        type="file"
-                        id="patternFileInput"
-                        accept=".thr"
-                        multiple
-                        class="hidden"
-                />
-                <button
-                        aria-label="Add new pattern"
-                        class="inline-flex items-center justify-center rounded-lg h-11 w-11 bg-blue-600 text-white shadow-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 ml-2 text-xl font-bold"
-                        onclick="document.getElementById('patternFileInput').click()"
-                >
-                    <span class="material-icons">add</span>
-                </button>
             </div>
+            <!-- Add Pattern Button -->
+            <input
+                    type="file"
+                    id="patternFileInput"
+                    accept=".thr"
+                    multiple
+                    class="hidden"
+            />
+            <button
+                    aria-label="Add new pattern"
+                    class="inline-flex items-center justify-center rounded-lg h-11 w-11 bg-blue-600 text-white shadow-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 ml-2 text-xl font-bold"
+                    onclick="document.getElementById('patternFileInput').click()"
+            >
+                <span class="material-icons">add</span>
+            </button>
         </div>
     </div>
     <section class="px-4 py-6">