root/Jyotisha
1
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

style: refine rectification scrollbar

Browse Source
This commit is contained in:
Jesse_Chen
2026-07-23 16:35:51 +08:00
parent b9fa304b1a
commit c9821cc4d4
3 changed files with 42 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/globals.css
+23 -1
View File
@@ -782,7 +782,29 @@ input:disabled, select:disabled { color: var(--color-ink-tertiary); background:
/* Conversational rectification shell */
.conversation.is-rectification { overflow: hidden; padding-bottom: 0; }
.rectification-chat { height: 100%; min-height: 0; display: flex; flex-direction: column; color: var(--color-ink); }
.rectification-message-list { min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-bottom: var(--space-6); }
.rectification-message-list {
min-height: 0;
flex: 1;
overflow-y: auto;
overscroll-behavior: contain;
padding-bottom: var(--space-6);
scrollbar-color: color-mix(in srgb, var(--color-ink-tertiary) 46%, transparent) transparent;
scrollbar-gutter: stable;
scrollbar-width: thin;
}
.rectification-message-list::-webkit-scrollbar { width: 10px; }
.rectification-message-list::-webkit-scrollbar-track { background: transparent; }
.rectification-message-list::-webkit-scrollbar-thumb {
min-height: 40px;
border: 3px solid transparent;
border-radius: 999px;
background: color-mix(in srgb, var(--color-ink-tertiary) 42%, transparent);
background-clip: padding-box;
}
.rectification-message-list::-webkit-scrollbar-thumb:hover {
background: color-mix(in srgb, var(--color-ink-secondary) 62%, transparent);
background-clip: padding-box;
}
.rectification-message-details { margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--color-border); color: var(--color-ink-secondary); font-size: var(--type-caption); }
.rectification-message-details summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: var(--type-body-sm); font-weight: 600; }
.rectification-message-details p { margin: 0 0 var(--space-2); font-size: var(--type-caption); line-height: 1.6; }
frontend/tests/conversational-rectification-component.test.ts
+3
View File
@@ -287,6 +287,9 @@ test("pending markup and responsive CSS expose accessibility contracts", () => {
assert.match(css, /\.conversation\.is-rectification[^}]*padding-bottom:\s*0/);
assert.match(css, /\.rectification-chat[^}]*height:\s*100%[^}]*display:\s*flex/);
assert.match(css, /\.rectification-message-list[^}]*flex:\s*1[^}]*overflow-y:\s*auto/);
assert.match(css, /\.rectification-message-list[^}]*scrollbar-width:\s*thin/);
assert.match(css, /\.rectification-message-list::\-webkit-scrollbar-thumb[^}]*background-clip:\s*padding-box/);
assert.match(css, /\.rectification-message-list::\-webkit-scrollbar-thumb:hover[^}]*color-mix/);
assert.match(css, /\.rectification-message-details button[^}]*min-height:\s*44px/);
assert.match(css, /\.composer:focus-within[^}]*border-color:/);
assert.match(css, /\.composer textarea[^}]*border:\s*0/);