aidar/SHiNE-server
SHA256
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Улучшить раскладку чата при клавиатуре

Browse Source
This commit is contained in:
tram
2026-08-20 07:12:46 +03:00
parent 4656a03ea9
commit 8741be6cba
6 changed files with 529 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
shine-UI/styles/layout.css
+53 -22
View File
@@ -2,7 +2,7 @@ body {
display: flex;
justify-content: center;
background: #05070A;
min-height: 100vh;
min-height: 100dvh;
position: relative;
overflow: hidden;
}
@@ -22,12 +22,11 @@ body::before {
}
.app-shell {
width: min(100vw, 430px);
height: 100vh;
height: 100svh;
width: min(var(--app-viewport-width, 100vw), 430px);
height: var(--app-viewport-height, 100vh);
position: fixed;
top: 0;
left: 50%;
top: var(--app-viewport-offset-top, 0px);
left: calc(50% + var(--app-viewport-offset-left, 0px) / 2);
transform: translateX(-50%);
--call-minimized-bar-height: 0px;
--topbar-height: 0px;
@@ -94,10 +93,11 @@ body::before {
.composer-slot {
position: absolute;
left: 0;
right: 0;
left: 50%;
width: min(var(--app-viewport-width, 100vw), 430px);
transform: translateX(-50%);
bottom: calc(var(--toolbar-height, 78px) + env(safe-area-inset-bottom));
padding: 0 12px 8px;
padding: 0 12px;
pointer-events: none;
}
@@ -115,20 +115,42 @@ body::before {
transition: opacity 0.18s ease, transform 0.18s ease;
}
body.chat-keyboard-open .screen-content {
bottom: calc(var(--composer-height, 0px) + max(var(--toolbar-height, 78px), var(--keyboard-offset, 0px)));
padding-bottom: calc(14px + env(safe-area-inset-bottom));
}
body.chat-keyboard-open .composer-slot {
bottom: max(var(--toolbar-height, 78px), var(--keyboard-offset, 0px));
padding-bottom: calc(8px + env(safe-area-inset-bottom));
}
body.chat-keyboard-open .toolbar-slot {
opacity: 1;
pointer-events: auto;
body.chat-topbar-overlay .topbar-slot {
position: fixed;
top: var(--call-minimized-bar-height, 0px);
left: 0;
right: 0;
width: min(100vw, 430px);
margin: 0 auto;
transform: none;
padding: 0 12px;
}
body.chat-topbar-overlay .screen-content {
top: calc(var(--call-minimized-bar-height, 0px) + var(--topbar-height, 0px));
bottom: calc(var(--toolbar-height, 78px) + var(--composer-height, 0px));
}
body.chat-topbar-overlay .composer-slot {
position: absolute;
left: 50%;
width: min(var(--app-viewport-width, 100vw), 430px);
bottom: calc(var(--toolbar-height, 78px) + env(safe-area-inset-bottom));
}
/* При открытой клавиатуре toolbar остаётся на физическом дне экрана и
перекрывается клавиатурой. Composer прижимается ровно к верхней границе
visualViewport, а область сообщений заканчивается прямо над composer. */
.app-shell.keyboard-open .toolbar-slot {
bottom: 0;
}
body.chat-topbar-overlay .app-shell.keyboard-open .composer-slot {
bottom: var(--keyboard-offset, 0px);
}
body.chat-topbar-overlay .app-shell.keyboard-open .screen-content {
bottom: calc(var(--keyboard-offset, 0px) + var(--composer-height, 0px));
}
.connection-retry-banner {
@@ -177,3 +199,12 @@ body.chat-keyboard-open .toolbar-slot {
border-radius: 24px;
}
}
/* Android keyboard: composer touches the keyboard edge; only the composer moves. */
body.chat-topbar-overlay .app-shell.keyboard-open .composer-slot {
padding-bottom: 0;
}
body.chat-topbar-overlay .app-shell.keyboard-open .composer-slot .dm-chat-input {
padding-bottom: 0;
}