From 236c00010a72add68b41adf5e7166053140843d0 Mon Sep 17 00:00:00 2001
From: Tony Xin <tony@kikoff.com>
Date: Fri, 24 Apr 2026 11:53:59 -0400
Subject: [PATCH] fix(CalendarAccounts): align Add calendar button and
 disclaimer spacing

Move the Add calendar v-dialog back inside the padded container so the
button and disclaimer share the same tw-px-4 indent as the account row.
Switch the button to left-aligned fit-width (was tw-w-full, which centered
the label awkwardly) and zero out the default <p> margins.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../components/settings/CalendarAccounts.vue  | 61 ++++++++++---------
 1 file changed, 33 insertions(+), 28 deletions(-)

diff --git a/frontend/src/components/settings/CalendarAccounts.vue b/frontend/src/components/settings/CalendarAccounts.vue
index e76b71b4..3c3ac366 100644
--- a/frontend/src/components/settings/CalendarAccounts.vue
+++ b/frontend/src/components/settings/CalendarAccounts.vue
@@ -43,37 +43,42 @@
             "
             @openRemoveDialog="openRemoveDialog"
           ></CalendarAccount>
+          <v-dialog
+            v-if="allowAddCalendarAccount"
+            v-model="addCalendarAccountDialog"
+            width="400"
+            content-class="tw-m-0"
+          >
+            <template v-slot:activator="{ on, attrs }">
+              <div>
+                <v-btn
+                  text
+                  color="primary"
+                  :class="
+                    toggleState
+                      ? '-tw-ml-2 tw-mt-0 tw-w-min tw-px-2'
+                      : '-tw-ml-2 tw-w-fit tw-px-2'
+                  "
+                  v-bind="attrs"
+                  v-on="on"
+                  >+ Add calendar</v-btn
+                >
+                <p class="tw-mb-0 tw-mt-1 tw-text-xs tw-text-dark-gray">
+                  Only your available times are shared with respondents. Your
+                  personal event details are never shared.
+                </p>
+              </div>
+            </template>
+            <CalendarTypeSelector
+              :visible="addCalendarAccountDialog"
+              @addGoogleCalendar="addGoogleCalendar"
+              @addOutlookCalendar="addOutlookCalendar"
+              @addedCalendar="addedCalendar"
+            />
+          </v-dialog>
         </div>
       </span>
     </v-expand-transition>
-    <v-dialog
-      v-if="allowAddCalendarAccount && (showCalendars || !toggleState)"
-      v-model="addCalendarAccountDialog"
-      width="400"
-      content-class="tw-m-0"
-    >
-      <template v-slot:activator="{ on, attrs }">
-        <div>
-          <v-btn
-            text
-            color="primary"
-            :class="
-              toggleState ? '-tw-ml-2 tw-mt-0 tw-w-min tw-px-2' : 'tw-w-full'
-            "
-            v-bind="attrs"
-            v-on="on"
-            >+ Add calendar</v-btn
-          >
-          <p class="tw-text-xs tw-text-dark-gray">Only your available times are shared with respondents. Your personal event details are never shared.</p>
-        </div>
-      </template>
-      <CalendarTypeSelector
-        :visible="addCalendarAccountDialog"
-        @addGoogleCalendar="addGoogleCalendar"
-        @addOutlookCalendar="addOutlookCalendar"
-        @addedCalendar="addedCalendar"
-      />
-    </v-dialog>
     <v-dialog v-model="removeDialog" width="500" persistent>
       <v-card>
         <v-card-title>Are you sure?</v-card-title>