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

@@ -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],
     });

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()])} />
         </>,
     );

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; }