fix: hide surface filter tabs with zero count in Design Systems view (#922) (#965)

* fix: prevent comment popover header overflow when label is too long

- Add min-width: 0 and overflow: hidden to comment-popover-head div
- Add text-overflow: ellipsis and white-space: nowrap to strong and span
- Add flex: 0 0 auto to close button to keep it fixed width
- Add title attribute to header div and close button for hover tooltip

* fix: hide surface filter tabs with zero count in Design Systems view (#922)

* fix: reset surfaceFilter and category when counts become zero

Handle dynamic systems changes where the currently selected surface
filter has zero items. When surfaceFilter is no longer valid, fall back
to 'all'. Also reset category to 'All' when it is no longer present in
the filtered list.

Fixes review feedback on PR #965.

* fix: move categories memo above useEffect to avoid TDZ

categories was referenced in the useEffect dependency array before
its declaration, causing a Temporal Dead Zone error. Move the
categories useMemo above the effect.

apps/web/src/components/DesignSystemsTab.tsx

@@ -72,6 +72,18 @@ export function DesignSystemsTab({ systems, selectedId, onSelect, onPreview }: P
     return ['All', ...ordered];
   }, [surfaceScoped]);
 
+  // Keep surfaceFilter and category in sync when systems changes dynamically.
+  // If the currently selected surface has zero items, fall back to 'all'.
+  // If the current category is no longer present in the filtered list, fall back to 'All'.
+  useEffect(() => {
+    if (surfaceFilter !== 'all' && surfaceCounts[surfaceFilter] === 0) {
+      setSurfaceFilter('all');
+      setCategory('All');
+    } else if (category !== 'All' && !categories.includes(category)) {
+      setCategory('All');
+    }
+  }, [systems, surfaceFilter, surfaceCounts, category, categories]);
+
   const filtered = useMemo(() => {
     const q = filter.trim().toLowerCase();
     return surfaceScoped.filter((s) => {
@@ -131,7 +143,7 @@ export function DesignSystemsTab({ systems, selectedId, onSelect, onPreview }: P
         aria-label={t('ds.surfaceLabel')}
       >
         <span className="examples-filter-label">{t('ds.surfaceLabel')}</span>
-        {SURFACE_PILLS.map((p) => (
+        {SURFACE_PILLS.filter((p) => p.value === 'all' || surfaceCounts[p.value] > 0).map((p) => (
           <button
             key={p.value}
             type="button"