fix(desktop): center compact appearance choices (#3564)

Author: ARE404

apps/desktop/e2e/settings.spec.ts

@@ -19,6 +19,23 @@
 
 import { test, expect, COMPOSER_INPUT } from './fixtures';
 
+async function choiceContentGeometry(card: import('@playwright/test').Locator) {
+  return card.evaluate((element) => {
+    const content = Array.from(element.children).find((child) => child.tagName !== 'INPUT');
+    if (!(content instanceof HTMLElement)) {
+      throw new Error('SelectableCard content is missing');
+    }
+    const cardRect = element.getBoundingClientRect();
+    const contentRect = content.getBoundingClientRect();
+    return {
+      cardHeight: cardRect.height,
+      contentHeight: contentRect.height,
+      topGap: contentRect.top - cardRect.top,
+      bottomGap: cardRect.bottom - contentRect.bottom,
+    };
+  });
+}
+
 test('opening settings commits an active titlebar rename', async ({ window: page }) => {
   const composer = page.locator(COMPOSER_INPUT);
   await composer.fill('create a session for settings rename');
@@ -104,3 +121,23 @@ test('wide settings gutters scroll the whole main pane', async ({ window: page }
   await expect.poll(() => pane.evaluate((element) => element.scrollTop)).toBeGreaterThan(0);
   await expect(content).toBeVisible();
 });
+
+test('appearance choice content stays vertically centered in stretched grid rows', async ({ window: page }) => {
+  await page.evaluate(async () => {
+    await window.maka.settings.update({ personalization: { uiLocale: 'en' } });
+  });
+  await page.reload();
+  await page.waitForSelector(COMPOSER_INPUT);
+  await page.setViewportSize({ width: 1650, height: 992 });
+  await page.getByRole('button', { name: 'Settings' }).click();
+  await page.getByRole('button', { name: 'Appearance', exact: true }).click();
+  await expect(page.getByRole('heading', { name: 'App icon' })).toBeVisible();
+
+  for (const name of ['Azure', 'Classic']) {
+    const card = page.getByRole('checkbox', { name, exact: true }).locator('..');
+    await expect(card).toBeVisible();
+    const geometry = await choiceContentGeometry(card);
+    expect(geometry.cardHeight).toBeGreaterThan(geometry.contentHeight);
+    expect(Math.abs(geometry.topGap - geometry.bottomGap)).toBeLessThanOrEqual(1);
+  }
+});

apps/desktop/src/renderer/settings/appearance-settings-page.tsx

@@ -373,7 +373,7 @@ export function AppearanceSettingsPage(props: {
                   onChange={() => void setPalette(palette)}
                   padding={2}
                 >
-                  <HStack gap={2} align="center">
+                  <HStack gap={2} align="center" height="100%">
                     <span
                       className={`settingsPaletteSwatch settingsPaletteSwatch-${palette}`}
                       aria-hidden="true"
@@ -429,7 +429,7 @@ export function AppearanceSettingsPage(props: {
                       onChange={() => void setAppIcon(option.id)}
                       padding={2}
                     >
-                      <HStack gap={2} align="center">
+                      <HStack gap={2} align="center" height="100%">
                         {/* Decorative: the tile's own label already names the icon. */}
                         <img className="settingsAppIconPreview" src={option.dataUrl} alt="" width={48} height={48} />
                         <VStack gap={0.5}>