17 lines
683 B
Markdown
17 lines
683 B
Markdown
# 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.
|