Fix/UI theme bugs 40 41

[BenediktSchackenberg]

Description

Type of Change

• Bug fix
• New feature
• Documentation
• Refactoring
• Other: ___

Checklist

• npm run build passes (frontend)
• dotnet build passes (backend)
• Tested in browser (dark theme)
• No new TypeScript errors
• SQL queries use parameterized @param (no string concat)

Screenshots

[Copilot]

Pull request overview

Updates several frontend pages to improve dark/light theme consistency and refine “performance” UX, including better filtering/grouping and clearer empty states.

Changes:

• Slow Queries: adds per-server grouping in “All Instances” view and refactors row rendering/expansion logic.
• Memory + Blocking: changes initial loading behavior and adds a “Select an instance” empty state.
• Drives + TabNav: adds drive/instance filtering UI, fixes em-dash rendering, and introduces TabNav theme overrides via CSS classes.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
frontend/src/pages/SlowQueriesPage.tsx	Adds server-grouped “All Instances” rendering and refactors expandable rows.
frontend/src/pages/MemoryPage.tsx	Changes loading defaults and adds “select instance” empty state gating.
frontend/src/pages/DrivesPage.tsx	Adds filtering UI, updates drive card layout, and fixes dash rendering.
frontend/src/pages/BlockingPage.tsx	Changes loading defaults and adds “select instance” empty state gating.
frontend/src/index.css	Adds TabNav dark/light-mode styling overrides.
frontend/src/components/TabNav.tsx	Switches TabNav styling to use new CSS classes.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Same issue as MemoryPage: if (!selectedInstance) { ... return; } makes the empty dropdown value (labeled “All Instances”) show a “Select an instance” empty state rather than loading data. Either remove/rename that option to indicate a required selection, or support the all-instances behavior when selectedInstance is undefined.

Suggested change

if (!selectedInstance) { setLoading(false); return; }

[Copilot]

formatBytes treats 0 as “no value” because it uses if (!bytes). This will render an em dash for legitimate 0-byte values (e.g., 0 free/used), which is misleading. Consider changing the check to bytes == null (or typeof bytes !== 'number') so 0 formats as 0.0 MB (or similar).

Suggested change

	if (!bytes) return '—';
	if (bytes == null) return '—';

[Copilot]

selectedInstance is still applied in filtered even when id is present (instance detail route). Since the instance filter UI is hidden in that mode, a previously-selected instance filter can silently make the instance-drives view appear empty after navigation. Fix by resetting selectedInstance when id changes, or by ignoring selectedInstance in the filter predicate when id is truthy.

Suggested change

	(!selectedInstance || d.InstanceDisplayName === selectedInstance)
	);
	}, [drives, selectedDrive, selectedInstance]);
	(id || !selectedInstance || d.InstanceDisplayName === selectedInstance)
	);
	}, [drives, selectedDrive, selectedInstance, id]);

[Copilot]

The filter “clear” button uses only the “×” glyph and has no accessible label. Add an aria-label (e.g., “Clear instance filter”) so screen readers announce its purpose.

Suggested change

	<button onClick={() => setSelectedInstance('')} className="ml-1 hover:text-white">×</button>
	</span>
	)}
	{selectedDrive && (
	<span className="px-2 py-0.5 rounded-full bg-purple-400/10 text-purple-400">
	{selectedDrive}
	<button onClick={() => setSelectedDrive('')} className="ml-1 hover:text-white">×</button>
	<button aria-label="Clear instance filter" onClick={() => setSelectedInstance('')} className="ml-1 hover:text-white">×</button>
	</span>
	)}
	{selectedDrive && (
	<span className="px-2 py-0.5 rounded-full bg-purple-400/10 text-purple-400">
	{selectedDrive}
	<button aria-label="Clear drive filter" onClick={() => setSelectedDrive('')} className="ml-1 hover:text-white">×</button>

[Copilot]

This “×” clear button should be type="button" and should have an accessible label (e.g., aria-label="Clear drive filter"). Without an explicit type, buttons can default to submit if this component is ever placed inside a form, and the glyph-only label is not screen-reader friendly.

Suggested change

	<button onClick={() => setSelectedInstance('')} className="ml-1 hover:text-white">×</button>
	</span>
	)}
	{selectedDrive && (
	<span className="px-2 py-0.5 rounded-full bg-purple-400/10 text-purple-400">
	{selectedDrive}
	<button onClick={() => setSelectedDrive('')} className="ml-1 hover:text-white">×</button>
	<button
	type="button"
	aria-label="Clear instance filter"
	onClick={() => setSelectedInstance('')}
	className="ml-1 hover:text-white"
	>
	×
	</button>
	</span>
	)}
	{selectedDrive && (
	<span className="px-2 py-0.5 rounded-full bg-purple-400/10 text-purple-400">
	{selectedDrive}
	<button
	type="button"
	aria-label="Clear drive filter"
	onClick={() => setSelectedDrive('')}
	className="ml-1 hover:text-white"
	>
	×
	</button>

[Copilot]

The new guard if (!selectedInstance) { ... return; } prevents loading any data when the dropdown is set to its empty value (currently labeled “All Instances”). That makes the “All Instances” option behave like an error/empty state and breaks the previous ability to call the endpoint without an instanceId. Either remove/rename the “All Instances” option and make the UI clearly require a selection, or allow the undefined instance case and render a meaningful all-instances view.