fix(edge/updates): add padding for edge groups [EE-5349] (#8772)

app/react/portainer/environments/ItemView/EdgeKeyDisplay.tsx

@@ -11,14 +11,16 @@ export function EdgeKeyDisplay({ edgeKey }: { edgeKey: string }) {
         associate the Edge agent with this environment.
       </TextTip>
 
-      <p className="small text-muted">
+      <p className="small text-muted mt-2">
         You can read more about pre-staging in the user-guide available{' '}
         <a href="https://downloads.portainer.io/edge_agent_guide.pdf">here.</a>
       </p>
 
       <Code>{edgeKey}</Code>
 
-      <CopyButton copyText={edgeKey}>Copy token</CopyButton>
+      <CopyButton copyText={edgeKey} className="mt-2">
+        Copy token
+      </CopyButton>
     </FormSection>
   );
 }

app/react/portainer/environments/update-schedules/CreateView/CreateView.tsx

@@ -62,7 +62,7 @@ function CreateView() {
           <Widget>
             <Widget.Title title="Update & Rollback Scheduler" icon={Settings} />
             <Widget.Body>
-              <TextTip color="blue">
+              <TextTip color="blue" className="mb-2">
                 Devices need to be allocated to an Edge group, visit the{' '}
                 <Link to="edge.groups">Edge Groups</Link> page to assign
                 environments and create groups.
@@ -91,7 +91,9 @@ function CreateView() {
                       for 2.15.0+ only.
                     </TextTip>
 
-                    <ScheduleTypeSelector />
+                    <div className="mt-2">
+                      <ScheduleTypeSelector />
+                    </div>
 
                     <div className="form-group">
                       <div className="col-sm-12">

app/react/portainer/environments/update-schedules/ItemView/ItemView.tsx

@@ -129,17 +129,19 @@ function ItemView() {
                       error={errors.groupIds}
                     />
 
-                    {isScheduleActive ? (
+                    <div className="mt-2">
-                      <InformationPanel>
+                      {isScheduleActive ? (
-                        <TextTip color="blue">
+                        <InformationPanel>
-                          {environmentsCount} environment(s) will be updated to
+                          <TextTip color="blue">
-                          version {item.version} on {item.scheduledTime} (local
+                            {environmentsCount} environment(s) will be updated
-                          time)
+                            to version {item.version} on {item.scheduledTime}{' '}
-                        </TextTip>
+                            (local time)
-                      </InformationPanel>
+                          </TextTip>
-                    ) : (
+                        </InformationPanel>
-                      <ScheduleTypeSelector />
+                      ) : (
-                    )}
+                        <ScheduleTypeSelector />
+                      )}
+                    </div>
 
                     <div className="form-group">
                       <div className="col-sm-12">

app/react/portainer/gitops/AuthFieldset/AuthFieldset.tsx

@@ -57,7 +57,7 @@ export function AuthFieldset({
       {value.RepositoryAuthentication && (
         <>
           {isAuthExplanationVisible && (
-            <TextTip color="orange">
+            <TextTip color="orange" className="mb-2">
               Enabling authentication will store the credentials and it is
               advisable to use a git service account
             </TextTip>

app/react/portainer/gitops/AuthFieldset/NewCredentialForm.tsx

@@ -43,7 +43,7 @@ export function NewCredentialForm({
             )}
 
             {value.SaveCredential && (
-              <TextTip color="blue" className="!mb-0">
+              <TextTip color="blue">
                 This git credential can be managed through your account page
               </TextTip>
             )}

app/react/portainer/gitops/AutoUpdateFieldset/AutoUpdateFieldset.tsx

@@ -30,7 +30,7 @@ export function AutoUpdateFieldset({
     <>
       <div className="form-group">
         <div className="col-sm-12">
-          <TextTip color="blue">
+          <TextTip color="blue" className="mb-2">
             When enabled, at each polling interval or webhook invocation, if the
             git repo differs from what was stored locally on the last git pull,
             the changes are deployed.

app/react/portainer/gitops/AutoUpdateFieldset/AutoUpdateSettings.tsx

@@ -33,7 +33,7 @@ export function AutoUpdateSettings({
 }) {
   return (
     <>
-      <TextTip color="orange">
+      <TextTip color="orange" className="mb-2">
         Any changes to this stack or application that have been made locally via
         Portainer or directly in the cluster will be overwritten by the git
         repository content, which may cause service interruption.

app/react/portainer/gitops/ComposePathField/ComposePathField.tsx

@@ -31,7 +31,7 @@ export function ComposePathField({
   return (
     <div className="form-group">
       <span className="col-sm-12">
-        <TextTip color="blue">
+        <TextTip color="blue" className="mb-2">
           <span>
             Indicate the path to the {isCompose ? 'Compose' : 'Manifest'} file
             from the root of your repository (requires a yaml, yml, json, or hcl

app/react/portainer/gitops/RefField/RefField.tsx

@@ -80,7 +80,7 @@ function Wrapper({
 }: PropsWithChildren<{ tip: ReactNode; errors?: string }>) {
   return (
     <div className="form-group">
-      <span className="col-sm-12">
+      <span className="col-sm-12 mb-2">
         <TextTip color="blue">{tip}</TextTip>
       </span>
       <div className="col-sm-12">

app/react/portainer/gitops/TimeWindowDisplay.tsx

@@ -36,7 +36,7 @@ function TimeWindowDisplay() {
   );
 
   return (
-    <TextTip color="orange">
+    <TextTip color="orange" className="mb-2">
       A change window is enabled, automatic updates will not occur outside of{' '}
       <span className="font-bold">
         {shortTime(startTimeUtc)} - {shortTime(endTimeUtc)} UTC (

app/react/portainer/settings/EdgeComputeView/EdgeComputeSettings/EdgeComputeSettings.tsx

@@ -78,7 +78,7 @@ export function EdgeComputeSettings({ settings, onSubmit }: Props) {
                   />
                 </FormControl>
 
-                <TextTip color="blue">
+                <TextTip color="blue" className="mb-2">
                   Enable this setting to use Portainer Edge Compute
                   capabilities.
                 </TextTip>

app/react/portainer/settings/EdgeComputeView/SettingsFDO/SettingsFDO.tsx

@@ -109,7 +109,7 @@ export function SettingsFDOForm({ settings, onSubmit }: Props) {
                   />
                 </FormControl>
 
-                <TextTip color="blue">
+                <TextTip color="blue" className="mb-2">
                   When enabled, this will allow Portainer to interact with FDO
                   Services.
                 </TextTip>
@@ -185,7 +185,7 @@ export function SettingsFDOForm({ settings, onSubmit }: Props) {
           {edgeComputeFeaturesEnabled && isFDOEnabled && (
             <div className={styles.fdoTable}>
               <FormSectionTitle>Device Profiles</FormSectionTitle>
-              <TextTip color="blue">
+              <TextTip color="blue" className="mb-2">
                 Add, Edit and Manage the list of device profiles available
                 during FDO device setup
               </TextTip>

app/react/portainer/settings/EdgeComputeView/SettingsOpenAMT/SettingsOpenAMT.tsx

@@ -130,7 +130,7 @@ export function SettingsOpenAMT({ settings, onSubmit }: Props) {
                   />
                 </FormControl>
 
-                <TextTip color="blue">
+                <TextTip color="blue" className="mb-2">
                   When enabled, this will allow Portainer to interact with an
                   OpenAMT MPS API.
                 </TextTip>