Skip to content

Conversation

@pd-redis
Copy link
Contributor

@pd-redis pd-redis commented Nov 28, 2025

What

Remove vertical padding from db index button container and add inline-flex display to tooltip anchor for proper alignment.

Adding inline-flex wraps the span that is around anchor contents tightly and allows for flex alignment to kick in.
This 'fix' is kind of dirty because is one-off and uses scss, but appropriate considering the time preasure.
The tooltip component should be modified a little to accomodate for this use-case by default, but considering its wide use, probably now is not the moment to do it.

Before
image
After
image

Testing

Open browser page, see that info icon is aligned with rest of the header


Note

Aligns the Instance Header info icon and DB index button and adds Storybook stories covering key scenarios.

  • UI/Styles (Instance Header)
    • Adjust FlexItem around DB index to use paddingLeft: 12 (removes vertical padding).
    • Set tooltip anchor (.tooltipAnchor) to display: inline-flex for proper info icon alignment; keep tooltip width cap.
  • Storybook
    • Add instance-header/InstanceHeader.stories.tsx with scenarios: default, multiple databases, long name, Redis Stack, return URL, loading, DB index disabled, and cluster connection; includes Redux store setup via StorePopulator.

Written by Cursor Bugbot for commit 7aefed5. This will update automatically on new commits. Configure here.

Remove vertical padding from db index button container and add
inline-flex display to tooltip anchor for proper alignment.
Add InstanceHeader.stories.tsx

References: #RI-7835
@github-actions
Copy link
Contributor

Code Coverage - Frontend unit tests

St.
Category Percentage Covered / Total
🟢 Statements 82.89% 20964/25292
🟡 Branches 68.12% 8853/12996
🟡 Functions 77.91% 5724/7347
🟢 Lines 83.3% 20529/24646

Test suite run success

5446 tests passing in 703 suites.

Report generated by 🧪jest coverage report action from 7aefed5

@pd-redis pd-redis merged commit 182deaa into main Dec 1, 2025
19 checks passed
@pd-redis pd-redis deleted the fe/bugfix/RI-7835-info-icon-alignment branch December 1, 2025 09:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants