From 24e8000f9dc94a55fb3f959b1f2299243cc50eb8 Mon Sep 17 00:00:00 2001
From: Juan Denis <jhd3197@gmail.com>
Date: Tue, 3 Nov 2026 13:57:42 -0500
Subject: [PATCH] fix(frontend): tablet top bar no longer fades its last icon,
 More tab never clips, templates uses the icon filter button

---
 frontend/src/components/ds/PageTopbar.jsx          | 4 ++--
 frontend/src/pages/Templates.jsx                   | 6 +++---
 frontend/src/styles/components/_design-system.scss | 4 ++--
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/ds/PageTopbar.jsx b/frontend/src/components/ds/PageTopbar.jsx
index efde96d5..c0db28c4 100644
--- a/frontend/src/components/ds/PageTopbar.jsx
+++ b/frontend/src/components/ds/PageTopbar.jsx
@@ -77,8 +77,8 @@ function TopbarTabs({ tabs, label }) {
 
     const { containerRef, itemRefs, moreBtnRef, hiddenIndices, hiddenSet } = useOverflowItems({
         count: safeTabs.length,
-        gap: 2,
-        moreWidth: 56,
+        gap: 4,
+        moreWidth: 80,
         getActiveIndex,
         deps: [activeIndex],
     });
diff --git a/frontend/src/pages/Templates.jsx b/frontend/src/pages/Templates.jsx
index 4b87afae..ee7f937c 100644
--- a/frontend/src/pages/Templates.jsx
+++ b/frontend/src/pages/Templates.jsx
@@ -16,10 +16,10 @@ import {
     Select, SelectTrigger, SelectContent, SelectItem, SelectValue,
 } from '@/components/ui/select';
 import {
-    SearchField, FilterDrawer, FilterButton, countActiveFilters, Drawer,
+    SearchField, FilterDrawer, countActiveFilters, Drawer,
     DataTableFooter, CatalogCard, CatalogGrid,
 } from '@/components/ds';
-import { useTableChrome, GridViewPicker, GridToolsMenu } from '@/components/ds/grid';
+import { useTableChrome, GridViewPicker, GridToolsMenu, GridFilterButton } from '@/components/ds/grid';
 import ServerPicker from '@/components/ServerPicker';
 import PortField from '@/components/PortField';
 import { LOCAL_SERVER_ID } from '@/utils/serverTarget';
@@ -513,7 +513,7 @@ const Templates = () => {
                 onSearch={setSearchQueryFilter}
                 placeholder={t('app.templates.searchTemplates', 'Search templates…')}
             />
-            <FilterButton count={activeFilterCount} onClick={() => setFiltersOpen(true)} />
+            <GridFilterButton count={activeFilterCount} onClick={() => setFiltersOpen(true)} />
             <GridToolsMenu {...chrome.toolsProps} onRefresh={() => Promise.all([loadCategories(), loadTemplates()])} />
         </>,
     );
diff --git a/frontend/src/styles/components/_design-system.scss b/frontend/src/styles/components/_design-system.scss
index afff0065..618d9981 100644
--- a/frontend/src/styles/components/_design-system.scss
+++ b/frontend/src/styles/components/_design-system.scss
@@ -1440,8 +1440,8 @@ $sk-tones: ('accent', 'green', 'cyan', 'amber', 'red', 'violet');
             overflow-x: auto;
             overflow-y: hidden;
             scrollbar-width: none;
-            -webkit-mask-image: linear-gradient(to right, black 0, black calc(100% - 28px), transparent 100%);
-            mask-image: linear-gradient(to right, black 0, black calc(100% - 28px), transparent 100%);
+            // No edge fade: the search box shrinks first, so the strip only
+            // scrolls in extremis, and a permanent fade dimmed the last icon.
 
             > *,
             > .sk-topbar__chrome > * { flex-shrink: 0; }