From 992d552e2aea3ab1add7a6d350634cc40f5dbe87 Mon Sep 17 00:00:00 2001
From: waleed <walif6@gmail.com>
Date: Sun, 14 Jun 2026 09:57:02 -0700
Subject: [PATCH] fix(settings): align general appearance dropdowns to a
 uniform width
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Theme/Snap-to-grid (ChipSelect) hugged their content (~90px) while Timezone
(ChipCombobox) was pinned to 260px, so the three read as a ragged column. Give
all three a shared 240px trigger via fullWidth + a common width wrapper so they
align as one column; menus match their triggers. No behavioral change — timezone
keeps search, options and handlers are untouched.
---
 .../settings/components/general/general.tsx   | 71 +++++++++++--------
 1 file changed, 42 insertions(+), 29 deletions(-)

diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/general/general.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/general/general.tsx
index 647b021a43..bce32a2995 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/general/general.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/general/general.tsx
@@ -45,6 +45,13 @@ const logger = createLogger('General')
 /** Human-friendly timezone options for the picker, common zones first. */
 const TIMEZONE_OPTIONS = getTimezoneOptions()
 
+/**
+ * Shared trigger width for the three appearance dropdowns (Theme, Timezone, Snap
+ * to grid) so they line up as one column instead of three differently-sized
+ * pills. Wide enough for the longest common timezone label.
+ */
+const DROPDOWN_TRIGGER_CLASS = 'w-[240px] flex-shrink-0'
+
 /**
  * Extracts initials from a user's name.
  * @param name - The user's full name
@@ -401,26 +408,29 @@ export function General() {
             <div className='flex flex-col gap-4'>
               <div className='flex items-center justify-between'>
                 <Label htmlFor='theme-select'>Theme</Label>
-                <ChipSelect
-                  align='start'
-                  dropdownWidth={140}
-                  value={settings?.theme}
-                  onChange={handleThemeChange}
-                  placeholder='Select theme'
-                  options={[
-                    { label: 'System', value: 'system' },
-                    { label: 'Light', value: 'light' },
-                    { label: 'Dark', value: 'dark' },
-                  ]}
-                />
+                <div className={DROPDOWN_TRIGGER_CLASS}>
+                  <ChipSelect
+                    align='start'
+                    fullWidth
+                    dropdownWidth='trigger'
+                    value={settings?.theme}
+                    onChange={handleThemeChange}
+                    placeholder='Select theme'
+                    options={[
+                      { label: 'System', value: 'system' },
+                      { label: 'Light', value: 'light' },
+                      { label: 'Dark', value: 'dark' },
+                    ]}
+                  />
+                </div>
               </div>
 
               <div className='flex items-center justify-between gap-4'>
                 <Label>Timezone</Label>
-                <div className='w-[260px] flex-shrink-0'>
+                <div className={DROPDOWN_TRIGGER_CLASS}>
                   <ChipCombobox
                     align='start'
-                    dropdownWidth={260}
+                    dropdownWidth={240}
                     searchable
                     searchPlaceholder='Search timezones'
                     value={settings?.timezone ?? getBrowserTimezone()}
@@ -480,21 +490,24 @@ export function General() {
 
               <div className='flex items-center justify-between'>
                 <Label htmlFor='snap-to-grid'>Snap to grid</Label>
-                <ChipSelect
-                  align='start'
-                  dropdownWidth={140}
-                  value={String(snapToGridValue)}
-                  onChange={handleSnapToGridChange}
-                  placeholder='Select size'
-                  options={[
-                    { label: 'Off', value: '0' },
-                    { label: '10px', value: '10' },
-                    { label: '20px', value: '20' },
-                    { label: '30px', value: '30' },
-                    { label: '40px', value: '40' },
-                    { label: '50px', value: '50' },
-                  ]}
-                />
+                <div className={DROPDOWN_TRIGGER_CLASS}>
+                  <ChipSelect
+                    align='start'
+                    fullWidth
+                    dropdownWidth='trigger'
+                    value={String(snapToGridValue)}
+                    onChange={handleSnapToGridChange}
+                    placeholder='Select size'
+                    options={[
+                      { label: 'Off', value: '0' },
+                      { label: '10px', value: '10' },
+                      { label: '20px', value: '20' },
+                      { label: '30px', value: '30' },
+                      { label: '40px', value: '40' },
+                      { label: '50px', value: '50' },
+                    ]}
+                  />
+                </div>
               </div>
 
               <div className='flex items-center justify-between'>