fix: align tooltip-wrapped buttons with non-wrapped buttons - #1341
Merged
Conversation
Mantine wraps a tooltip's child in an `inline-block` div, which establishes a line box and ends up a few pixels taller than the child. In the action logs, some quick links are tooltip-wrapped and some aren't, so the extra space knocked adjacent buttons (e.g. "Open doc" and "Show changes") out of alignment. Adds a shared `<Tooltip>` wrapper that makes Mantine's wrapper element shrink-wrap its child, and uses it in the action logs. This replaces the ad-hoc `.mantine-Tooltip-root` display overrides that several components already carry. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RiTPcKxHMvqMR7vyy4VzSh
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fixes vertical alignment issues in the ActionLogs component where tooltip-wrapped buttons were misaligned with non-wrapped buttons. Mantine's
<Tooltip>wrapper usesdisplay: inline-block, which establishes a line box and adds extra vertical space. This caused buttons next to tooltips to sit at different heights.Fixes #1340
Changes
New
Tooltipcomponent (packages/root-cms/ui/components/Tooltip/): A drop-in replacement for Mantine's<Tooltip>that wraps the child in a flex box instead of an inline-block div. This shrink-wraps the wrapper around its child without establishing a line box, keeping the layout neutral.Tooltip.tsx: Component that applies the custom CSS class to Mantine's tooltip.Tooltip.css: Setsdisplay: inline-flexon the wrapper to override Mantine'sinline-block.Updated ActionLogs: Changed import from Mantine's
Tooltipto the new customTooltipcomponent.Added visual test (
ActionLogs.visual.test.tsx): Tests that verify buttons are vertically aligned both within a row and across multiple rows, ensuring the fix works correctly.Implementation Details
The custom
Tooltipcomponent usesjoinClassNamesto apply theTooltipclass alongside Mantine's classes, ensuring the flex display rule wins over Mantine's inline-block without relying on stylesheet order. This maintains full compatibility with Mantine's tooltip API while fixing the alignment issue.https://claude.ai/code/session_01RiTPcKxHMvqMR7vyy4VzSh