fenglee/miaojingAI
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: separate mobile create composer from thread

Browse Source
This commit is contained in:
FengLee
2026-06-06 23:47:15 +08:00
parent 1cc44d64a4
commit 8e6a1e162a
2 changed files with 52 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
scripts/test-mobile-create-ui-policy.mjs
View File

@@ -67,4 +67,14 @@ await runTest('reverse prompt mobile composer keeps upload and mode controls rea
assert.match(source, /MobileCreationComposer/, 'reverse prompt should render MobileCreationComposer');
});
await runTest('mobile conversation is separated from the bottom composer instead of being covered by it', () => {
const css = read('src/app/globals.css');
assert.match(css, /\.create-mobile-shell\s*\{[^}]*height:\s*calc\(/, 'mobile create shell should own the available viewport-height region');
assert.match(css, /\.create-chat-layout\s*\{[^}]*height:\s*100%/, 'mobile create layout should fill the shell instead of growing under the composer');
assert.match(css, /\.create-chat-layout\s*\{[^}]*overflow:\s*hidden/, 'mobile create layout should clip children to the conversation/composer split');
assert.match(css, /\.create-chat-thread\s*\{[^}]*overflow-y:\s*auto/, 'mobile conversation thread should scroll independently above the composer');
assert.match(css, /\.create-mobile-dialog-composer\s*\{[^}]*position:\s*sticky/, 'mobile composer should stay in layout flow instead of overlaying the conversation');
assert.doesNotMatch(css, /\.create-mobile-dialog-composer\s*\{[^}]*position:\s*fixed/, 'mobile composer must not be fixed because it covers prompts and previews');
});
if (process.exitCode) process.exit(process.exitCode);

63
src/app/globals.css
View File

@@ -577,10 +577,12 @@
}
.create-mobile-shell {
display: flex;
min-height: calc(100dvh - 4.25rem - env(safe-area-inset-bottom));
flex-direction: column;
padding: 3.55rem 0.75rem 0;
display: flex !important;
height: calc(100dvh - 8.75rem - env(safe-area-inset-bottom));
min-height: 0 !important;
flex-direction: column !important;
padding: 3.55rem 0.75rem 0.75rem !important;
overflow: hidden !important;
}
.create-mobile-heading {
@@ -598,10 +600,10 @@
}
.create-mobile-tabs-root {
display: flex;
min-height: 0;
flex: 1;
flex-direction: column;
display: flex !important;
min-height: 0 !important;
flex: 1 1 auto !important;
flex-direction: column !important;
gap: 0.45rem;
}
@@ -640,23 +642,29 @@
}
.create-tab-content {
min-height: 0;
flex: 1;
min-height: 0 !important;
flex: 1 1 auto !important;
margin-top: 0;
overflow: hidden !important;
}
.create-chat-layout {
display: flex;
min-height: calc(100dvh - 10rem - env(safe-area-inset-bottom));
flex-direction: column;
display: flex !important;
height: 100% !important;
min-height: 0 !important;
flex-direction: column !important;
gap: 0.75rem;
overflow: hidden !important;
}
.create-chat-thread {
order: 1;
min-height: 0;
flex: 1;
padding-bottom: calc(18.75rem + env(safe-area-inset-bottom));
min-height: 0 !important;
flex: 1 1 auto !important;
overflow-y: auto !important;
overscroll-behavior: contain;
padding-bottom: 0.75rem;
-webkit-overflow-scrolling: touch;
}
.create-chat-thread .create-empty-result {
@@ -798,13 +806,14 @@
.create-mobile-dialog-composer {
--create-mobile-ui-font-size: 16px;
position: fixed;
right: 0.75rem;
bottom: calc(0.75rem + env(safe-area-inset-bottom));
left: 0.75rem;
position: sticky;
bottom: 0;
z-index: 35;
order: 2;
display: block;
max-height: calc(100dvh - 8.25rem - env(safe-area-inset-bottom));
width: 100%;
flex: 0 0 auto;
max-height: min(40dvh, 19rem);
overflow-y: auto;
overscroll-behavior: contain;
border: 1px solid rgb(255 255 255 / 0.11);
@@ -820,6 +829,18 @@
-webkit-backdrop-filter: blur(24px) saturate(130%);
}
.create-mobile-dialog-composer::before {
content: "";
position: sticky;
top: 0;
z-index: 2;
display: block;
height: 3px;
margin: -0.75rem -0.75rem 0.72rem;
border-radius: 999px;
background: rgb(219 73 50 / 0.92);
}
.create-mobile-dialog-composer:empty {
display: none;
}