From 0af6e0371736e299b0106d45ba745691f2dc6cc6 Mon Sep 17 00:00:00 2001 From: 404ARE <936233544@qq.com> Date: Sun, 23 Aug 2026 15:14:02 +0800 Subject: [PATCH] fix(desktop): center compact appearance choices --- apps/desktop/e2e/settings.spec.ts | 37 +++++++++++++++++++ .../settings/appearance-settings-page.tsx | 4 +- 2 files changed, 39 insertions(+), 2 deletions(-) diff --git a/apps/desktop/e2e/settings.spec.ts b/apps/desktop/e2e/settings.spec.ts index 70aea23098..d1e588fd7f 100644 --- a/apps/desktop/e2e/settings.spec.ts +++ b/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); + } +}); diff --git a/apps/desktop/src/renderer/settings/appearance-settings-page.tsx b/apps/desktop/src/renderer/settings/appearance-settings-page.tsx index 2140b06f08..2c0dc9777e 100644 --- a/apps/desktop/src/renderer/settings/appearance-settings-page.tsx +++ b/apps/desktop/src/renderer/settings/appearance-settings-page.tsx @@ -373,7 +373,7 @@ export function AppearanceSettingsPage(props: { onChange={() => void setPalette(palette)} padding={2} > - +