From 404ee696f09a98038ab0941ffb3ea916d0589695 Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Mon, 20 Apr 2026 12:21:20 -0500
Subject: [PATCH] Fleet UI: Add padding to calendar instructions (#43777)

---
 .../cards/Calendars/Calendars.tsx             | 137 +++++++++---------
 .../cards/Calendars/_styles.scss              |  12 +-
 2 files changed, 78 insertions(+), 71 deletions(-)

diff --git a/frontend/pages/admin/IntegrationsPage/cards/Calendars/Calendars.tsx b/frontend/pages/admin/IntegrationsPage/cards/Calendars/Calendars.tsx
index a498260d0d..fdcf632cf9 100644
--- a/frontend/pages/admin/IntegrationsPage/cards/Calendars/Calendars.tsx
+++ b/frontend/pages/admin/IntegrationsPage/cards/Calendars/Calendars.tsx
@@ -301,64 +301,68 @@ const Calendars = ({ appConfig }: IAppConfigFormProps): JSX.Element => {
                 work calendar.)
               </li>
               <li>
-                Save your changes.
-                <Card>
-                  <form onSubmit={onFormSubmit} autoComplete="off">
-                    <InputField
-                      label="API key JSON"
-                      onChange={onInputChange}
-                      name="apiKeyJson"
-                      value={apiKeyJson}
-                      parseTarget
-                      type="textarea"
-                      placeholder={API_KEY_JSON_PLACEHOLDER}
-                      ignore1password
-                      inputClassName={`${baseClass}__api-key-json`}
-                      error={formErrors.apiKeyJson}
-                      disabled={gomEnabled}
-                      helpText={
-                        apiKeyJson === UNCHANGED_PASSWORD_API_RESPONSE
-                          ? "API key is configured. Replace with a new key to update."
-                          : undefined
-                      }
-                    />
-                    <InputField
-                      label="Primary domain"
-                      onChange={onInputChange}
-                      name="domain"
-                      value={domain}
-                      parseTarget
-                      placeholder="example.com"
-                      helpText={
-                        <>
-                          You can find your primary domain in Google Workspace{" "}
-                          <CustomLink
-                            url={GOOGLE_WORKSPACE_DOMAINS}
-                            text="here"
-                            newTab
-                          />
-                        </>
-                      }
-                      error={formErrors.domain}
-                      disabled={gomEnabled}
-                    />
-                    <div className="button-wrap">
-                      <GitOpsModeTooltipWrapper
-                        tipOffset={8}
-                        renderChildren={(dC) => (
-                          <Button
-                            type="submit"
-                            disabled={Object.keys(formErrors).length > 0 || dC}
-                            className="save-loading"
-                            isLoading={isUpdatingSettings}
-                          >
-                            Save
-                          </Button>
-                        )}
+                <div className={`${baseClass}__save-changes`}>
+                  Save your changes.
+                  <Card>
+                    <form onSubmit={onFormSubmit} autoComplete="off">
+                      <InputField
+                        label="API key JSON"
+                        onChange={onInputChange}
+                        name="apiKeyJson"
+                        value={apiKeyJson}
+                        parseTarget
+                        type="textarea"
+                        placeholder={API_KEY_JSON_PLACEHOLDER}
+                        ignore1password
+                        inputClassName={`${baseClass}__api-key-json`}
+                        error={formErrors.apiKeyJson}
+                        disabled={gomEnabled}
+                        helpText={
+                          apiKeyJson === UNCHANGED_PASSWORD_API_RESPONSE
+                            ? "API key is configured. Replace with a new key to update."
+                            : undefined
+                        }
                       />
-                    </div>
-                  </form>
-                </Card>
+                      <InputField
+                        label="Primary domain"
+                        onChange={onInputChange}
+                        name="domain"
+                        value={domain}
+                        parseTarget
+                        placeholder="example.com"
+                        helpText={
+                          <>
+                            You can find your primary domain in Google Workspace{" "}
+                            <CustomLink
+                              url={GOOGLE_WORKSPACE_DOMAINS}
+                              text="here"
+                              newTab
+                            />
+                          </>
+                        }
+                        error={formErrors.domain}
+                        disabled={gomEnabled}
+                      />
+                      <div className="button-wrap">
+                        <GitOpsModeTooltipWrapper
+                          tipOffset={8}
+                          renderChildren={(dC) => (
+                            <Button
+                              type="submit"
+                              disabled={
+                                Object.keys(formErrors).length > 0 || dC
+                              }
+                              className="save-loading"
+                              isLoading={isUpdatingSettings}
+                            >
+                              Save
+                            </Button>
+                          )}
+                        />
+                      </div>
+                    </form>
+                  </Card>
+                </div>
               </li>
             </ul>
           </p>
@@ -389,15 +393,16 @@ const Calendars = ({ appConfig }: IAppConfigFormProps): JSX.Element => {
                 account.
               </li>
               <li>
-                For the OAuth scopes, paste the following value:
-                <InputField
-                  readOnly
-                  inputWrapperClass={`${baseClass}__oauth-scopes`}
-                  name="oauth-scopes"
-                  enableCopy
-                  type="textarea"
-                  value={OAUTH_SCOPES}
-                />
+                <div className={`${baseClass}__oauth-scopes`}>
+                  For the OAuth scopes, paste the following value:
+                  <InputField
+                    readOnly
+                    name="oauth-scopes"
+                    enableCopy
+                    type="textarea"
+                    value={OAUTH_SCOPES}
+                  />
+                </div>
               </li>
               <li>
                 Click <b>Authorize</b>.
diff --git a/frontend/pages/admin/IntegrationsPage/cards/Calendars/_styles.scss b/frontend/pages/admin/IntegrationsPage/cards/Calendars/_styles.scss
index eb20bce4b7..62a70534db 100644
--- a/frontend/pages/admin/IntegrationsPage/cards/Calendars/_styles.scss
+++ b/frontend/pages/admin/IntegrationsPage/cards/Calendars/_styles.scss
@@ -19,10 +19,6 @@
     margin: $pad-small 0;
   }
 
-  .card {
-    margin-top: $pad-small;
-  }
-
   &__configuration {
     button {
       align-self: flex-end;
@@ -36,12 +32,18 @@
     font-size: $x-small;
   }
 
+  &__save-changes,
+  &__oauth-scopes {
+    @include vertical-form-layout;
+    padding-bottom: $pad-large;
+  }
+
   #oauth-scopes {
     font-family: "SourceCodePro", $monospace;
     color: $core-fleet-black;
     min-height: 82px;
+    min-width: 100%;
     padding: $pad-medium;
-    padding-right: $pad-xxlarge;
     resize: none;
   }