Fix missing margin on GitOps info banner in Add Custom Packages page (#41819)

Resloves: #41820

## Summary
- Adds `1.5rem` vertical margin to the GitOps mode info banner on the
**Software > Add Software > Custom Packages** page
- Uses an instance-level `className` prop
(`software-custom-package__gitops-banner`) and a page-scoped SCSS rule,
following existing codebase patterns for instance-specific spacing
- Does **not** modify the shared `InfoBanner` component styles

## Changes
-
`frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareCustomPackage/SoftwareCustomPackage.tsx`
— Added `className` prop to the GitOps `InfoBanner` instance
-
`frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareCustomPackage/_styles.scss`
— Added `&__gitops-banner` rule with `margin: 1.5rem 0`

---

Built for [Marko
Lisica](https://fleetdm.slack.com/archives/D0AFA3M07AP/p1773750050662559?thread_ts=1773749619.263099&cid=D0AFA3M07AP)
by [Kilo for Slack](https://kilo.ai/features/slack-integration)

---------

Co-authored-by: kiloconnect[bot] <240665456+kiloconnect[bot]@users.noreply.github.com>
Co-authored-by: RachelElysia <rachel@fleetdm.com>
This commit is contained in:
kilo-code-bot[bot] 2026-03-17 14:34:08 +01:00 committed by GitHub
parent fadb6382ee
commit 9715ee9825
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 21 additions and 17 deletions

View file

@ -1,4 +1,6 @@
.software-custom-package {
@include vertical-page-layout;
&__premium-message {
margin-top: $pad-xxxlarge;
}

View file

@ -489,23 +489,25 @@ const PackageForm = ({
gitopsCompatible={gitopsCompatible}
gitOpsModeEnabled={gitOpsModeEnabled}
/>
<div
// including `form` class here keeps the children fields subject to the global form
// children styles
className={
gitopsCompatible && gitOpsModeEnabled
? `${baseClass}__form-fields--gitops-disabled form`
: "form"
}
>
{showDeploySoftwareSlider && renderSoftwareDeploySlider()}
{showOptionsTargetsSelectors && (
<div className={`${baseClass}__form-frame`}>
{renderSoftwareOptionsSelector()}
{renderTargetLabelSelector()}
</div>
)}
</div>
{(showDeploySoftwareSlider || showOptionsTargetsSelectors) && ( // Only show container if one of the two components will be rendered to avoid extra gap spacing
<div
// including `form` class here keeps the children fields subject to the global form
// children styles
className={
gitopsCompatible && gitOpsModeEnabled
? `${baseClass}__form-fields--gitops-disabled form`
: "form"
}
>
{showDeploySoftwareSlider && renderSoftwareDeploySlider()}
{showOptionsTargetsSelectors && (
<div className={`${baseClass}__form-frame`}>
{renderSoftwareOptionsSelector()}
{renderTargetLabelSelector()}
</div>
)}
</div>
)}
{showAdvancedOptions && (
<PackageAdvancedOptions
showSchemaButton={showSchemaButton}