Carlo
6ad9497409
<!-- Add the related story/sub-task/bug number, like Resolves #123, or remove if NA --> **Related issue:** Resolves #44325 (follow-up to #47861 and #48009) ## Summary Follow-up to #47861 and #48009 (both merged) for #44325. Those left several GitOps-mode "Manage in YAML" tooltips still misaligned. This makes the wrapper hug its content so the tooltip centers on the disabled control instead of drifting to the full form width. # Checklist for submitter ## Testing - [x] QA'd all new/changed functionality manually <img width="1280" height="860" alt="1_bootstrap_advanced" src="https://github.com/user-attachments/assets/403cabb4-3d24-4ece-91f5-4887efd0da05" /> <img width="1280" height="860" alt="2_install_software" src="https://github.com/user-attachments/assets/2f9b2130-0fd6-4744-9603-1a31aebd773e" /> <img width="1280" height="860" alt="3_fleet_action_rename" src="https://github.com/user-attachments/assets/180f3e8d-1dee-404c-b13d-14124bc3509b" /> <img width="1280" height="860" alt="4_fleet_action_enroll" src="https://github.com/user-attachments/assets/9378b6fb-5b1e-45e0-80e5-61d4996b49e0" /> <img width="1280" height="860" alt="5_fleet_checkbox" src="https://github.com/user-attachments/assets/dcec8992-5407-452a-8b4c-5d4e8dc27d10" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Bug Fixes** * Improved tooltip positioning and width behavior in setup forms so tooltips align more consistently with the visible control. * Input and dropdown fields now keep their full-width behavior, while other controls are centered more naturally. * Updated the macOS and Windows software requirement options to show tooltips beside the control for better readability. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
34 lines
1.1 KiB
SCSS
34 lines
1.1 KiB
SCSS
.gitops-mode-tooltip-wrapper {
|
|
// Arrow styles target the nested react-tooltip via descendant selectors (mirrors the
|
|
// shared TooltipWrapper, which this component no longer delegates to).
|
|
@include tooltip5-arrow-styles;
|
|
display: inline-flex;
|
|
|
|
&__tooltip-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
&__tip-text {
|
|
@include tooltip-text;
|
|
cursor: default;
|
|
}
|
|
|
|
// Inputs/dropdowns must stretch to full width.
|
|
&--inputfield {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
// Hug the wrapped content so the tooltip arrow centers on the visible control (a button,
|
|
// checkbox row, or group) rather than drifting to the center of the full form row. Without
|
|
// this, the global `form > * { width: 100% }` rule (_global.scss) — or a checkbox's own
|
|
// full-width label row — stretches the anchor wider than the control. Inputs/dropdowns opt
|
|
// back into full width via `--inputfield`. (In GitOps mode the control is disabled, so the
|
|
// narrower hover area is moot.)
|
|
&--hug {
|
|
width: fit-content;
|
|
}
|
|
}
|