fix(rectification): show natal houses and lagna changes in a live right rail
The board was live data sitting under chat, so each new event looked like nothing changed. Keep candidate cards in the transcript and group 换升 by minute for the side panel. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Jesse_Chen
@@ -474,6 +474,7 @@ button:disabled { cursor: default; opacity: .45; }
|
||||
}
|
||||
|
||||
.chat-panel { height: 100%; min-width: 0; min-height: 0; overflow: hidden; display: grid; background: var(--color-canvas); grid-template-rows: 68px minmax(0, 1fr) auto; }
|
||||
.chat-panel.is-rectification { grid-template-rows: 68px minmax(0, 1fr); }
|
||||
.chat-header { z-index: 2; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px; border-bottom: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent); padding: 0 var(--space-8); background: var(--color-frosted); backdrop-filter: saturate(130%) blur(20px); text-align: left; }
|
||||
.chat-header > div { min-width: 0; }
|
||||
.chat-header strong { max-width: min(560px, 62vw); overflow: hidden; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-display); font-size: var(--type-title-md); font-weight: 400; letter-spacing: -.3px; }
|
||||
@@ -1069,6 +1070,7 @@ input:not([type="radio"]):not([type="checkbox"]):not([class^="ant-"]):not([class
|
||||
.sidebar-scrim { position: fixed; z-index: 11; inset: 0; display: block; border: 0; background: var(--color-scrim); opacity: 1; visibility: visible; }
|
||||
[data-sidebar="rail"] { display: none; }
|
||||
.chat-panel { grid-template-rows: calc(64px + env(safe-area-inset-top)) minmax(0, 1fr) auto; }
|
||||
.chat-panel.is-rectification { grid-template-rows: calc(64px + env(safe-area-inset-top)) minmax(0, 1fr); }
|
||||
.chat-header { gap: 10px; padding: max(0px, env(safe-area-inset-top)) var(--space-3) 0; }
|
||||
.conversation.is-empty {
|
||||
display: block;
|
||||
@@ -1122,6 +1124,17 @@ input:not([type="radio"]):not([type="checkbox"]):not([class^="ant-"]):not([class
|
||||
.paywall-footer > a, .paywall-footer > button { width: 100%; }
|
||||
.dialog-actions { flex-direction: column-reverse; }
|
||||
.dialog-actions > button { width: 100%; }
|
||||
dialog.rectification-board {
|
||||
width: 100%;
|
||||
height: min(86dvh, 100%);
|
||||
margin-block-start: auto;
|
||||
margin-inline: 0;
|
||||
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);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
.auth-story { min-height: 0; padding: var(--space-5); }
|
||||
.auth-story h2 { font-size: var(--type-title-lg); }
|
||||
.auth-panel { padding: var(--space-6) var(--space-5) max(var(--space-6), env(safe-area-inset-bottom)); }
|
||||
@@ -1847,12 +1860,218 @@ input:not([type="radio"]):not([type="checkbox"]):not([class^="ant-"]):not([class
|
||||
.birth-time-clock-menu.select-content { width: 108px; min-width: 108px; }
|
||||
.birth-time-clock-menu .select-item { justify-content: flex-start; }
|
||||
|
||||
.rectification-workspace {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(18rem, 22.5rem);
|
||||
background: var(--color-canvas);
|
||||
}
|
||||
.rectification-workspace.is-compact {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
.rectification-workspace__chat {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-rows: minmax(0, 1fr) auto;
|
||||
}
|
||||
.rectification-workspace__chat .conversation {
|
||||
padding-bottom: var(--space-4);
|
||||
}
|
||||
.rectification-workspace__chat .message-list {
|
||||
width: 100%;
|
||||
max-width: 720px;
|
||||
}
|
||||
.rectification-workspace__chat .composer-wrap {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.rectification-board {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
border-inline-start: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
|
||||
background: var(--color-canvas-soft);
|
||||
color: var(--color-ink);
|
||||
}
|
||||
dialog.rectification-board {
|
||||
width: min(22.5rem, 100%);
|
||||
height: 100dvh;
|
||||
max-width: none;
|
||||
max-height: none;
|
||||
margin: 0;
|
||||
margin-inline-start: auto;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-inline-start: 1px solid var(--color-border);
|
||||
background: var(--color-canvas-soft);
|
||||
color: var(--color-ink);
|
||||
}
|
||||
dialog.rectification-board::backdrop {
|
||||
background: var(--color-scrim);
|
||||
}
|
||||
.rectification-board__header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
padding: var(--space-4) var(--space-4) var(--space-3);
|
||||
background: var(--color-canvas-soft);
|
||||
}
|
||||
.rectification-board__title-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: var(--space-2) var(--space-3);
|
||||
}
|
||||
.rectification-board__header h2 {
|
||||
margin: 0;
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--type-title-sm);
|
||||
font-weight: 600;
|
||||
letter-spacing: -.2px;
|
||||
}
|
||||
.rectification-board__clock {
|
||||
color: var(--color-ink);
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-size: var(--type-body-sm);
|
||||
font-weight: 600;
|
||||
}
|
||||
.rectification-board__close {
|
||||
min-height: 44px;
|
||||
margin-inline-start: auto;
|
||||
padding: 0 var(--space-3);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-canvas);
|
||||
color: var(--color-ink);
|
||||
cursor: pointer;
|
||||
}
|
||||
.rectification-board__close:focus-visible,
|
||||
.rectification-board-peek:focus-visible {
|
||||
outline: 2px solid var(--color-focus);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.rectification-board__stage,
|
||||
.rectification-board__empty,
|
||||
.rectification-board__disclosure {
|
||||
margin: 0;
|
||||
color: var(--color-ink-secondary);
|
||||
font-size: var(--type-body-sm);
|
||||
line-height: 1.55;
|
||||
}
|
||||
.rectification-board__body {
|
||||
min-height: 0;
|
||||
display: grid;
|
||||
align-content: start;
|
||||
gap: var(--space-6);
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
padding: 0 var(--space-4) var(--space-6);
|
||||
}
|
||||
.rectification-board .rectification-snapshot {
|
||||
display: grid;
|
||||
gap: var(--space-4);
|
||||
width: auto;
|
||||
margin: 0;
|
||||
}
|
||||
.rectification-board .rectification-house-table {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
}
|
||||
.rectification-board .technique-audit {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
border-top: 0;
|
||||
}
|
||||
.rectification-board__section {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
.rectification-board__section h3 {
|
||||
margin: 0;
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--type-title-sm);
|
||||
font-weight: 600;
|
||||
letter-spacing: -.2px;
|
||||
}
|
||||
.rectification-board__minutes {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.rectification-board__minute {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: baseline;
|
||||
gap: 6px 10px;
|
||||
}
|
||||
.rectification-board__minute time {
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-weight: 600;
|
||||
}
|
||||
.rectification-board__minute-note {
|
||||
color: var(--color-ink-secondary);
|
||||
font-size: var(--type-caption);
|
||||
}
|
||||
.rectification-board__chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
flex: 1 1 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
.rectification-board__chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 24px;
|
||||
padding: 0 8px;
|
||||
border-radius: 999px;
|
||||
background: var(--color-canvas);
|
||||
color: var(--color-ink);
|
||||
font-size: var(--type-caption);
|
||||
}
|
||||
.rectification-board-peek {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
width: 100%;
|
||||
min-height: 44px;
|
||||
margin: 0 0 var(--space-2);
|
||||
padding: var(--space-2) var(--space-4);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-canvas-soft);
|
||||
color: var(--color-ink);
|
||||
text-align: start;
|
||||
cursor: pointer;
|
||||
}
|
||||
.rectification-board-peek strong { font-size: var(--type-body-sm); }
|
||||
.rectification-board-peek span {
|
||||
color: var(--color-ink-secondary);
|
||||
font-size: var(--type-caption);
|
||||
}
|
||||
.rectification-house-table__changed {
|
||||
display: inline;
|
||||
margin-inline-start: .4em;
|
||||
color: var(--color-ink-secondary);
|
||||
font-size: var(--type-caption);
|
||||
}
|
||||
|
||||
.rectification-snapshot {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
width: calc(100% - var(--assistant-content-inset));
|
||||
margin: 8px 0 16px;
|
||||
margin-inline-start: var(--assistant-content-inset);
|
||||
}
|
||||
.rectification-candidates {
|
||||
display: grid;
|
||||
|
||||
@@ -3552,7 +3552,7 @@ export default function Home() {
|
||||
</section>
|
||||
</div>
|
||||
) : null}
|
||||
<SidebarInset className="chat-panel" inert={modalOpen}>
|
||||
<SidebarInset className={`chat-panel${rectificationSurfaceOpen ? " is-rectification" : ""}`} inert={modalOpen}>
|
||||
<header className="chat-header">
|
||||
<SidebarTrigger placement="inset" />
|
||||
<div>
|
||||
|
||||
Reference in New Issue
Block a user