zentral/docs/development/devlog/2025-12-06-011500_tab_flicker_fix.md

Tab Flicker Fix

Issue

The user reports a flicker when clicking a tab before it becomes active.

Diagnosis

The current implementation of the active tab style uses borderBottom: isActive ? 2 : 0. This causes a layout shift (height change or content displacement) of 2px whenever the active state changes. This visual jump is perceived as a flicker.

Solution

Update the styling to maintain a constant border width but change the color.

• Change borderBottom to always be 2.
• Change borderColor to be 'primary.main' when active and 'transparent' when inactive.

Plan

1. Modify src/frontend/src/components/TabsBar.tsx.
2. Update SortableTab styles.