fix(rectification): show mobile natal board as a covering bottom sheet

BUG-330: the compact board sat in the same layer as the composer, so peek copy overlapped the sheet title. Overlay only below 768px; desktop stays a side column.
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Jesse_Chen
2026-08-20 21:35:48 +08:00
co-authored by Cursor
parent 237c7b9d37
commit 9670b661c4
6 changed files with 101 additions and 18 deletions
+36 -3
View File
@@ -322,6 +322,7 @@ button:disabled { cursor: default; opacity: .45; }
@keyframes onboarding-caret { 50% { opacity: 0; } }
@keyframes account-overlay-enter { from { opacity: 0; } }
@keyframes account-dialog-enter { from { opacity: 0; transform: translateY(var(--space-1)) scale(.985); } }
@keyframes rectification-sheet-enter { from { opacity: 0; transform: translateY(18%); } }
@media (hover: hover) {
.session-list button:not(:disabled):hover, .profile-trigger:not(:disabled):hover { background: var(--color-light-hover); color: var(--color-ink); }
@@ -1874,6 +1875,7 @@ input:not([type="radio"]):not([type="checkbox"]):not([class^="ant-"]):not([class
.birth-time-clock-menu .select-item { justify-content: flex-start; }
.rectification-workspace {
position: relative;
min-width: 0;
min-height: 0;
height: 100%;
@@ -1883,9 +1885,11 @@ input:not([type="radio"]):not([type="checkbox"]):not([class^="ant-"]):not([class
}
.rectification-workspace.is-compact {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr);
}
.rectification-workspace.is-compact.is-board-open {
grid-template-rows: minmax(8rem, 1fr) minmax(13rem, 46%);
.rectification-workspace.is-compact .rectification-workspace__chat,
.rectification-workspace.is-compact .rectification-board-overlay {
grid-area: 1 / 1;
}
.rectification-workspace__chat {
min-width: 0;
@@ -1913,13 +1917,42 @@ input:not([type="radio"]):not([type="checkbox"]):not([class^="ant-"]):not([class
background: var(--color-canvas-soft);
color: var(--color-ink);
}
.rectification-workspace.is-compact .rectification-board-overlay {
position: absolute;
inset: 0;
z-index: 20;
display: grid;
align-items: end;
isolation: isolate;
}
.rectification-board-scrim {
position: absolute;
inset: 0;
border: 0;
background: var(--color-scrim);
cursor: pointer;
animation: account-overlay-enter 180ms ease-out both;
}
.rectification-board.is-sheet {
position: relative;
z-index: 1;
width: 100%;
height: 92%;
max-height: 100%;
min-height: 0;
overflow: hidden;
border-inline-start: 0;
border-block-start: 1px solid var(--color-border);
border-start-start-radius: var(--radius-lg);
border-start-end-radius: var(--radius-lg);
box-shadow: 0 -8px 28px color-mix(in srgb, var(--color-ink) 10%, transparent);
background: var(--color-canvas);
box-shadow: 0 -12px 32px color-mix(in srgb, var(--color-ink) 12%, transparent);
padding-bottom: env(safe-area-inset-bottom);
animation: rectification-sheet-enter 280ms var(--ease-out) both;
grid-template-rows: auto auto minmax(0, 1fr);
}
.rectification-board.is-sheet .rectification-board__header {
background: var(--color-canvas);
}
.rectification-board__handle {
width: 36px;