ewilliams28/openclaw
1
0
Fork 0
mirror of https://github.com/openclaw/openclaw.git synced 2026-08-25 03:45:46 -06:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): align narrow chat composer spacing (#127717)

Browse Source 
* fix(ui): align narrow chat composer spacing

* test(ui): cover short-landscape composer spacing

Co-authored-by: Tak Hoffman <781889+Takhoffman@users.noreply.github.com>

---------

Co-authored-by: RoboClaw <309084314+roboclaw-bot@users.noreply.github.com>
Co-authored-by: Tak Hoffman <781889+Takhoffman@users.noreply.github.com>
This commit is contained in:
ClawSweeper
2026-08-21 18:20:41 -07:00
committed by GitHub
parent fc5cb9e304
commit 249e1bfb00
2 changed files with 11 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/pages/chat/chat-responsive.browser.test.ts
+9 -5
View File
@@ -2067,6 +2067,7 @@ describeBrowserLayout.concurrent("chat responsive browser layout", () => {
it.each([
[393, 852],
[900, 500],
[1366, 900],
[1920, 1080],
] as const)("uses compact radii and optical chat-box insets at %sx%s", async (width, height) => {
@@ -2118,14 +2119,17 @@ describeBrowserLayout.concurrent("chat responsive browser layout", () => {
expect(geometry.assistantBubble?.paddingRight).toBe(0);
expect(geometry.composer?.borderRadius).toBe(mediumRadius);
const composerInset = width <= 768 ? 4 : 8;
const textareaBlockInset = width <= 768 ? 10 : composerInset;
const usesCompactComposer = width <= 768 || (width <= 932 && height <= 500 && width > height);
const composerInset = usesCompactComposer ? 4 : 8;
const textareaBlockInset = usesCompactComposer ? 10 : composerInset;
expect(geometry.textarea?.paddingTop).toBe(textareaBlockInset);
expect(geometry.textarea?.paddingRight).toBe(composerInset);
expect(geometry.textarea?.paddingBottom).toBe(textareaBlockInset);
expect(geometry.textarea?.paddingLeft).toBe(composerInset - 4);
expect(geometry.footer?.paddingLeft).toBe(composerInset);
expect(geometry.footer?.paddingRight).toBe(composerInset);
expect(geometry.textarea?.paddingLeft).toBe(
usesCompactComposer ? composerInset : composerInset - 4,
);
expect(geometry.footer?.paddingLeft).toBe(8);
expect(geometry.footer?.paddingRight).toBe(8);
// #105866 splits the block inset evenly around the footer so the
// settings chip centers between the divider and the card edge.
expect(geometry.footer?.paddingTop).toBe(composerInset / 2);
ui/src/styles/chat/layout.css
+2 -1
View File
@@ -3098,7 +3098,7 @@ button.chat-pr__diff {
border-top: 1px solid color-mix(in srgb, var(--border) 64%, transparent);
/* Split the inset evenly so the settings chip sits centered between the
divider and the card edge instead of hugging the divider. */
padding: calc(var(--chat-box-inset) / 2) var(--chat-box-inset);
padding: calc(var(--chat-box-inset) / 2) max(var(--chat-box-inset), 8px);
}
.agent-chat__composer-meta,
@@ -4120,6 +4120,7 @@ button.chat-pr__diff {
max-height: calc(7em + var(--chat-box-inset) + var(--chat-box-inset));
padding-top: 10px;
padding-bottom: 10px;
padding-left: var(--chat-box-inset);
font-size: var(--control-ui-input-text-size);
}