nanakura/moeka-project
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix(stage-layouts): center the mobile chat input (#2517)

Browse Source
This commit is contained in:
Neko
2026-09-11 02:36:18 +08:00
committed by GitHub
parent c30d169543
commit 3fcae726c5
2 changed files with 28 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/stage-tamagotchi/src/renderer/components/InteractiveArea.browser.test.ts
+27 -3
View File
@@ -182,6 +182,30 @@ describe('interactive area synchronized state', () => {
await page.viewport(1280, 720)
})
it('centers the mobile textarea when no reply preview is visible', async () => {
// ROOT CAUSE:
//
// Without a reply preview, the 40px bubble has spare height around its
// 32px textarea and borders. Before the fix, justify-end put all spare
// height above the textarea: 6px above and 2px below.
//
// We fixed this with justify-center. The empty and single-line textarea
// now has 4px on each side, and multiline input stays centered.
await page.viewport(390, 844)
const { screen } = await renderArea(MobileInteractiveArea)
const bubble = screen.getByTestId('mobile-input-bubble').element()
const input = screen.getByRole('textbox')
for (const draft of ['', 'Hello', 'First line\nSecond line', '']) {
await input.fill(draft)
await expect.poll(() => {
const outer = bubble.getBoundingClientRect()
const inner = input.element().getBoundingClientRect()
return Math.abs((inner.top - outer.top) - (outer.bottom - inner.bottom))
}).toBeLessThanOrEqual(1)
}
})
it('opens mobile settings from an icon-only header and restores focus', async () => {
await page.viewport(390, 844)
const { screen } = await renderArea(MobileInteractiveArea)
@@ -440,9 +464,9 @@ describe('interactive area synchronized state', () => {
await expect.poll(() => input.getBoundingClientRect().height).toBe(32)
expect(send.getBoundingClientRect().height).toBe(32)
expect(bubble.getBoundingClientRect().bottom).toBe(send.getBoundingClientRect().bottom)
expect(input.getBoundingClientRect().bottom).toBe(
bubble.getBoundingClientRect().bottom - Number.parseFloat(getComputedStyle(bubble).borderBottomWidth),
)
const bubbleBounds = bubble.getBoundingClientRect()
const inputBounds = input.getBoundingClientRect()
expect(inputBounds.top - bubbleBounds.top).toBe(bubbleBounds.bottom - inputBounds.bottom)
})
it('closes mobile settings before requesting sign-in', async () => {
packages/stage-layouts/src/components/Layouts/MobileInteractiveArea.vue
+1 -1
View File
@@ -566,7 +566,7 @@ onUnmounted(() => {
data-testid="mobile-input-bubble"
:data-dragging="inputBubbleDragging"
:class="[
'group relative mx-auto min-h-10 flex flex-col justify-end origin-center overflow-hidden',
'group relative mx-auto min-h-10 flex flex-col justify-center origin-center overflow-hidden',
'touch-none select-none focus-within:touch-auto focus-within:select-text',
'border-2 border-solid border-neutral-200/60 bg-neutral-100/80 backdrop-blur-md',
'dark:border-neutral-700/60 dark:bg-neutral-950/80',