Fleet UI: Fix gitops mode wonkiness#43428
Conversation
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #43428 +/- ##
==========================================
- Coverage 66.86% 66.86% -0.01%
==========================================
Files 2586 2588 +2
Lines 207452 207477 +25
Branches 9284 9288 +4
==========================================
+ Hits 138714 138730 +16
- Misses 56111 56121 +10
+ Partials 12627 12626 -1
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
| /> | ||
| <form onSubmit={onFormSubmit} autoComplete="off"> | ||
| {/* "form" class applies global form styling to fields for free */} | ||
| <div |
There was a problem hiding this comment.
just removed this wrapper and used disabled states per field
![claude[bot]](https://avatars.githubusercontent.com/in/1236702?s=60&v=4){kind=small}
There was a problem hiding this comment.
Claude Code Review
This repository is configured for manual code reviews. Comment @claude review to trigger a review and subscribe this PR to future pushes, or @claude review once for a one-time review.
Tip: disable this comment in your organization's Code Review settings.
There was a problem hiding this comment.
Pull request overview
This PR addresses UI layout/styling issues when GitOps mode is enabled, focusing on tooltip positioning/appearance and disabled-state behavior across multiple settings pages.
Changes:
- Removes custom
tipOffsetoverrides across manyGitOpsModeTooltipWrapperusages to standardize tooltip positioning. - Updates GitOps tooltip wrapper styling to better support full-width form controls.
- Refactors Org settings “Info” and “Advanced” cards to avoid “disabled wrapper” behavior that prevented tooltips from showing, and adds a small OrgSettingsPage-specific styling hook.
Reviewed changes
Copilot reviewed 15 out of 16 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/pages/ManageControlsPage/OSSettings/cards/DiskEncryption/DiskEncryption.tsx | Removes GitOps tooltip offset override on a button wrapper. |
| frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/TeamSettings/TeamSettings.tsx | Removes GitOps tooltip offset override on a submit button wrapper. |
| frontend/pages/admin/OrgSettingsPage/cards/WebAddress/WebAddress.tsx | Removes GitOps tooltip offset override on a submit button wrapper. |
| frontend/pages/admin/OrgSettingsPage/cards/Statistics/Statistics.tsx | Removes GitOps tooltip offset override on a submit button wrapper. |
| frontend/pages/admin/OrgSettingsPage/cards/Smtp/Smtp.tsx | Removes GitOps tooltip offset override on a submit control wrapper. |
| frontend/pages/admin/OrgSettingsPage/cards/Info/Info.tsx | Refactors org info fields to use per-field disabled instead of disabling the whole form wrapper. |
| frontend/pages/admin/OrgSettingsPage/cards/FleetDesktop/FleetDesktop.tsx | Removes GitOps tooltip offset override on a submit button wrapper. |
| frontend/pages/admin/OrgSettingsPage/cards/Agents/Agents.tsx | Removes GitOps tooltip offset override on a submit button wrapper. |
| frontend/pages/admin/OrgSettingsPage/cards/Advanced/Advanced.tsx | Adds a wrapper for a tooltip-wrapped input and restructures the form layout. |
| frontend/pages/admin/OrgSettingsPage/_styles.scss | Adds a local width override for tooltip-wrapped input fields in Org settings. |
| frontend/pages/admin/IntegrationsPage/cards/Sso/Sso.tsx | Removes GitOps tooltip offset override on a submit button wrapper. |
| frontend/pages/admin/IntegrationsPage/cards/IdentityProviders/components/EndUserAuthSection/EndUserAuthSection.tsx | Removes GitOps tooltip offset override on a submit control wrapper. |
| frontend/pages/admin/IntegrationsPage/cards/GlobalHostStatusWebhook/GlobalHostStatusWebhook.tsx | Removes GitOps tooltip offset override on a submit button wrapper. |
| frontend/components/GitOpsModeTooltipWrapper/GitOpsModeTooltipWrapper.tsx | Adds inline documentation for position usage. |
| frontend/components/GitOpsModeTooltipWrapper/_styles.scss | Overrides TooltipWrapper layout so wrapped block-level form elements can stretch. |
| changes/43341-gitops-mode-wonkiness | Adds a release note entry for the GitOps mode styling fix. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <form onSubmit={onFormSubmit} autoComplete="off"> | ||
| <div className="form"> | ||
| {/* Wrapper used to ensure input field has 100% width without adverse effects to gitops tooltips elsewhere */} | ||
| <div className={`${baseClass}__gitops-inputfield-wrapper`}> | ||
| <GitOpsModeTooltipWrapper |
There was a problem hiding this comment.
This card previously relied on the global .form class for consistent vertical spacing and width behavior of its children. Replacing it with only app-config-form__gitops-inputfield-wrapper removes that shared layout styling and may cause the advanced settings controls to render without expected gaps/alignments. Suggest wrapping the whole set of fields in a <div className="form"> (and keep the narrower __gitops-inputfield-wrapper inside it for the specific tooltip-width fix).
There was a problem hiding this comment.
<form> already wraps it which gives it a className="form" already.
| <form onSubmit={onFormSubmit} autoComplete="off"> | ||
| {/* "form" class applies global form styling to fields for free */} | ||
| <div | ||
| className={`form ${ | ||
| gitOpsModeEnabled ? "disabled-by-gitops-mode" : "" | ||
| }`} | ||
| > | ||
| <div className={`${cardClass}__logo-field-set`}> | ||
| <InputField | ||
| label="Logo URL for dark background" | ||
| onChange={onInputChange} | ||
| name="orgLogoURL" | ||
| value={orgLogoURL} | ||
| parseTarget | ||
| onBlur={validateForm} | ||
| error={formErrors.org_logo_url} | ||
| inputWrapperClass={`${cardClass}__logo-field`} | ||
| tooltip="Logo is displayed in Fleet on top of dark backgrounds." | ||
| /> | ||
| <div | ||
| className={`${cardClass}__icon-preview ${cardClass}__dark-background`} | ||
| > | ||
| <OrgLogoIcon | ||
| className={`${cardClass}__icon-img`} | ||
| src={orgLogoURL} | ||
| /> | ||
| </div> | ||
| </div> | ||
| <div className={`${cardClass}__logo-field-set`}> | ||
| <InputField | ||
| label="Logo URL for light background" | ||
| onChange={onInputChange} | ||
| name="orgLogoURLLightBackground" | ||
| value={orgLogoURLLightBackground} | ||
| parseTarget | ||
| onBlur={validateForm} | ||
| error={formErrors.org_logo_url_light_background} | ||
| inputWrapperClass={`${cardClass}__logo-field`} | ||
| tooltip="Logo is displayed in Fleet on top of light backgrounds. | ||
| " | ||
| /> | ||
| <div | ||
| className={`${cardClass}__icon-preview ${cardClass}__light-background`} | ||
| > | ||
| <OrgLogoIcon | ||
| className={`${cardClass}__icon-img`} | ||
| src={orgLogoURLLightBackground} | ||
| /> | ||
| </div> | ||
| </div> | ||
| <div className={`${cardClass}__logo-field-set`}> | ||
| <InputField |
There was a problem hiding this comment.
The .form wrapper (used across settings pages) provides global form layout (flex column + consistent gap + > * { width: 100% }). Removing it here will likely regress spacing/alignment for the org info fields. Consider reintroducing a <div className="form"> wrapper (without disabled-by-gitops-mode) and keep the per-field disabled={gitOpsModeEnabled} approach to preserve tooltips while maintaining layout consistency.
There was a problem hiding this comment.
Since there's already a <form> element, the global form styles already apply to it.
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (3)
✅ Files skipped from review due to trivial changes (1)
🚧 Files skipped from review as they are similar to previous changes (2)
WalkthroughThis pull request addresses styling inconsistencies in GitOps mode UI. The changes modify the Possibly related PRs
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@frontend/pages/admin/OrgSettingsPage/_styles.scss`:
- Around line 83-88: The current selector (&__gitops-inputfield-wrapper
.component__tooltip-wrapper__element) only affects descendants of
app-config-form__gitops-inputfield-wrapper and misses other GitOps-wrapped
inputs; update the shared styling so any InputField wrapped by
GitOpsModeTooltipWrapper gets full width. Add or change a global/reusable
selector (e.g., .gitops-inputfield-wrapper or the GitOpsModeTooltipWrapper root
class) to target .component__tooltip-wrapper__element { width: 100%; } so the
Apple MDM server URL and Host expiry window fields (and any other GitOps-wrapped
InputField) receive the same full-width rule instead of being scoped to
app-config-form.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: dc04c21f-2c80-48dc-b253-dd5d80553c2a
📒 Files selected for processing (16)
changes/43341-gitops-mode-wonkinessfrontend/components/GitOpsModeTooltipWrapper/GitOpsModeTooltipWrapper.tsxfrontend/components/GitOpsModeTooltipWrapper/_styles.scssfrontend/pages/ManageControlsPage/OSSettings/cards/DiskEncryption/DiskEncryption.tsxfrontend/pages/admin/IntegrationsPage/cards/GlobalHostStatusWebhook/GlobalHostStatusWebhook.tsxfrontend/pages/admin/IntegrationsPage/cards/IdentityProviders/components/EndUserAuthSection/EndUserAuthSection.tsxfrontend/pages/admin/IntegrationsPage/cards/Sso/Sso.tsxfrontend/pages/admin/OrgSettingsPage/_styles.scssfrontend/pages/admin/OrgSettingsPage/cards/Advanced/Advanced.tsxfrontend/pages/admin/OrgSettingsPage/cards/Agents/Agents.tsxfrontend/pages/admin/OrgSettingsPage/cards/FleetDesktop/FleetDesktop.tsxfrontend/pages/admin/OrgSettingsPage/cards/Info/Info.tsxfrontend/pages/admin/OrgSettingsPage/cards/Smtp/Smtp.tsxfrontend/pages/admin/OrgSettingsPage/cards/Statistics/Statistics.tsxfrontend/pages/admin/OrgSettingsPage/cards/WebAddress/WebAddress.tsxfrontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/TeamSettings/TeamSettings.tsx
💤 Files with no reviewable changes (10)
- frontend/pages/admin/OrgSettingsPage/cards/WebAddress/WebAddress.tsx
- frontend/pages/ManageControlsPage/OSSettings/cards/DiskEncryption/DiskEncryption.tsx
- frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/TeamSettings/TeamSettings.tsx
- frontend/pages/admin/IntegrationsPage/cards/GlobalHostStatusWebhook/GlobalHostStatusWebhook.tsx
- frontend/pages/admin/OrgSettingsPage/cards/Statistics/Statistics.tsx
- frontend/pages/admin/IntegrationsPage/cards/IdentityProviders/components/EndUserAuthSection/EndUserAuthSection.tsx
- frontend/pages/admin/OrgSettingsPage/cards/FleetDesktop/FleetDesktop.tsx
- frontend/pages/admin/OrgSettingsPage/cards/Smtp/Smtp.tsx
- frontend/pages/admin/IntegrationsPage/cards/Sso/Sso.tsx
- frontend/pages/admin/OrgSettingsPage/cards/Agents/Agents.tsx
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 14 out of 15 changed files in this pull request and generated no new comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Issue
Closes #43341
Description
Screenrecording of fixes
Screen.Recording.2026-04-13.at.9.23.10.AM.mov
Checklist for submitter
If some of the following don't apply, delete the relevant line.
changes/,orbit/changes/oree/fleetd-chrome/changes.See Changes files for more information.
Testing
Summary by CodeRabbit
Release Notes
Bug Fixes
New Features