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

fix(web): stack mobile audit tables and restore sidebar hierarchy
Independent Staging Quality Gate / validate (push) Successful in 9m27s
Details
Independent Staging Quality Gate / publish (push) Successful in 7m40s
Details

Browse Source 
Narrow screens were wrapping 已执行 into a glyph column and painting every sidebar row the same gray, so history looked like top-level chrome.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Jesse_Chen
2026-08-22 09:57:06 +08:00
co-authored by Cursor
parent 41fde85647
commit 92558ee61d
7 changed files with 217 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/globals.css
+154 -40
View File
@@ -151,8 +151,8 @@ button:disabled { cursor: default; opacity: .45; }
.app-loading-orbit::after { position: absolute; top: -3px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--color-action); box-shadow: 0 0 0 3px var(--color-canvas); content: ""; }
.app-loading-actions { display: flex; gap: 10px; margin-top: 12px; }
.brand-mark, .welcome-mark, .auth-brand span { width: 28px; height: 28px; display: block; flex: 0 0 auto; background: url("/jyotish-logo.png") center / contain no-repeat; font-size: 0; }
.new-chat svg { width: 18px; height: 18px; }
.session-nav { min-height: 0; flex: 1; display: flex; flex-direction: column; }
.session-nav { min-height: 0; flex: 0 0 auto; }
.session-nav:last-of-type { min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.chevron { width: 18px; height: 18px; color: var(--color-ink-tertiary); }
.chat-header strong, .chat-header span { display: block; }
.credit-button span { display: inline-flex; align-items: center; margin: 0; color: inherit; font-size: inherit; line-height: 1; }
@@ -228,7 +228,8 @@ button:disabled { cursor: default; opacity: .45; }
border-bottom: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
vertical-align: top;
text-align: start;
overflow-wrap: anywhere;
overflow-wrap: break-word;
word-break: keep-all;
}
.markdown-table thead th {
color: var(--color-ink-secondary);
@@ -239,6 +240,11 @@ button:disabled { cursor: default; opacity: .45; }
.markdown-table tbody th {
font-weight: 550;
}
.markdown-table table:has(thead th:nth-child(3):last-child) td:nth-child(2) {
width: 4.5em;
color: var(--color-ink-secondary);
white-space: nowrap;
}
.markdown-table tr:last-child th,
.markdown-table tr:last-child td { border-bottom: 0; }
.agent-activity-status,
@@ -446,8 +452,8 @@ button:disabled { cursor: default; opacity: .45; }
.group\/sidebar-provider[data-viewport] { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
.chat-app { width: 100%; height: 100%; min-height: 0; overflow: hidden; display: grid; background: var(--color-canvas); grid-template-columns: minmax(0, 1fr); }
.sidebar { position: relative; width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; border-right: 1px solid var(--sidebar-border); color: var(--sidebar-foreground); padding: var(--space-5) var(--space-3) 0; background: var(--sidebar-background); backdrop-filter: saturate(130%) blur(20px); }
[data-sidebar="header"] { flex: 0 0 auto; }
[data-sidebar="content"] { min-height: 0; flex: 1 1 auto; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
[data-sidebar="header"] { flex: 0 0 auto; padding-bottom: var(--space-3); }
[data-sidebar="content"] { min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--space-3); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
[data-sidebar="content"],
.conversation,
.rectification-board__body {
@@ -496,59 +502,73 @@ button:disabled { cursor: default; opacity: .45; }
.brand-row strong { font-weight: 400; }
.brand-mark, .auth-brand span { width: 32px; height: 32px; border-radius: 50%; background: var(--color-canvas) url("/jyotish-logo.png") center / contain no-repeat; box-shadow: 0 0 0 1px oklch(0 0 0 / .1); }
.auth-story-brand img { width: 32px; height: 32px; border-radius: 50%; object-fit: contain; box-shadow: 0 0 0 1px oklch(0 0 0 / .1); }
.new-chat { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0 var(--space-3); border: 0; background: transparent; color: var(--sidebar-foreground); cursor: pointer; font-size: var(--type-body-sm); transition: background-color 120ms ease-out, transform 120ms ease-out; margin: 0; border-radius: var(--radius-md); font-weight: 500; }
.report-nav-button { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0 var(--space-3); margin-bottom: var(--space-2); border: 0; border-radius: var(--radius-md); color: var(--sidebar-foreground); }
.new-chat { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0 var(--space-3); border: 0; background: transparent; color: var(--sidebar-foreground); cursor: pointer; font-size: var(--type-body-sm); line-height: 1.35; transition: background-color 120ms ease-out, transform 120ms ease-out; margin: 0; border-radius: var(--radius-md); font-weight: 500; }
.report-nav-button { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0 var(--space-3); margin: 0; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--sidebar-foreground); cursor: pointer; font-size: var(--type-body-sm); font-weight: 500; line-height: 1.35; transition: background-color 120ms ease-out, transform 120ms ease-out; }
.report-nav-button:hover,
.new-chat:hover { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); }
[data-state="expanded"] .new-chat,
[data-state="expanded"] .report-nav-button { justify-content: flex-start; }
.session-nav-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); padding: 0 var(--space-3) var(--space-2); }
.session-nav-header-inline { padding-top: 0; }
.sidebar-section { margin: 0 0 var(--space-3); }
.new-chat svg,
.report-nav-button svg,
.sidebar-label > svg,
.sidebar-section-summary > svg,
.session-nav-toggle svg {
width: 18px;
height: 18px;
flex: 0 0 auto;
stroke-width: 1.75;
}
.session-nav-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); padding: 0 var(--space-3); }
.sidebar-section { margin: 0; }
.sidebar-label,
.sidebar-section-summary {
display: flex;
min-height: 44px;
align-items: center;
gap: var(--space-2);
color: var(--color-ink-tertiary);
font-size: var(--type-caption);
font-weight: 500;
letter-spacing: 0;
line-height: 1.35;
}
.sidebar-section-summary {
padding: 0 var(--space-3);
list-style: none;
color: var(--sidebar-muted-foreground);
cursor: pointer;
font-size: var(--type-overline);
font-weight: 500;
letter-spacing: 1.5px;
}
.sidebar-section-summary::-webkit-details-marker { display: none; }
.sidebar-section-summary > svg { width: 16px; height: 16px; flex: 0 0 auto; }
.sidebar-section-chevron { margin-left: auto; width: 16px; height: 16px; transition: transform 120ms ease-out; }
.sidebar-section-summary > .sidebar-section-chevron { margin-left: auto; width: 16px; height: 16px; flex: 0 0 auto; color: currentColor; opacity: .72; transition: transform 120ms ease-out; }
.sidebar-section[open] .sidebar-section-chevron { transform: rotate(180deg); }
.sidebar-empty { margin: 0; padding: 0 var(--space-3) var(--space-2); color: var(--color-ink-tertiary); font-size: var(--type-caption); }
.chart-nav-list { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0 var(--space-3) var(--space-2); }
.sidebar-nested { padding: 0 var(--space-3) var(--space-1) calc(var(--space-3) + 18px + var(--space-2)); }
.sidebar-empty { margin: 0; padding: 0 0 var(--space-2); color: var(--color-ink-tertiary); font-size: var(--type-caption); line-height: 1.35; }
.chart-nav-list { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0 0 var(--space-2); }
.chart-nav-chip {
min-height: 32px;
max-width: 100%;
padding: 0 12px;
padding: 0 var(--space-3);
border: 1px solid var(--sidebar-border);
border-radius: 999px;
background: var(--color-canvas);
color: var(--sidebar-foreground);
cursor: pointer;
font-size: var(--type-caption);
font-weight: 400;
line-height: 1.35;
}
.chart-nav-chip:hover { background: var(--sidebar-accent); }
.sidebar-label { min-height: 44px; display: flex; align-items: center; gap: var(--space-2); color: var(--sidebar-muted-foreground); font-size: var(--type-overline); font-weight: 500; letter-spacing: 1.5px; }
.chart-nav-chip:hover { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); }
.sidebar-label:focus-visible { outline: 3px solid color-mix(in srgb, var(--sidebar-ring) 56%, transparent); outline-offset: 2px; border-radius: var(--radius-sm); }
.session-nav-toggle { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--space-2); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--sidebar-muted-foreground); cursor: pointer; font-size: var(--type-overline); transition: background-color 120ms ease-out, color 120ms ease-out; }
.session-nav-toggle svg { width: 16px; height: 16px; }
.session-nav-toggle { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--color-ink-tertiary); cursor: pointer; font-size: var(--type-caption); transition: background-color 120ms ease-out, color 120ms ease-out; }
.session-nav-toggle:hover { background: var(--sidebar-accent); color: var(--sidebar-foreground); }
.session-list { min-height: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.session-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; border-radius: var(--radius-lg); color: var(--sidebar-muted-foreground); transition: background-color 120ms ease-out, box-shadow 120ms ease-out, color 120ms ease-out; }
.session-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: center; border-radius: var(--radius-lg); color: var(--sidebar-foreground); transition: background-color 120ms ease-out, box-shadow 120ms ease-out, color 120ms ease-out; }
.session-row:hover, .session-row:focus-within { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); }
.session-row:has(.session-main[data-active="true"]) { background: var(--sidebar-accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sidebar-ring) 22%, transparent); color: var(--sidebar-accent-foreground); }
.session-main { position: relative; width: 100%; min-height: 44px; display: grid; gap: 2px; padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4); border: 0; border-radius: var(--radius-md); background: transparent; color: inherit; cursor: pointer; text-align: left; transition: background-color 120ms ease-out, color 120ms ease-out, transform 120ms ease-out; }
.session-main { position: relative; width: 100%; min-height: 44px; display: grid; gap: 2px; padding: var(--space-2); border: 0; border-radius: var(--radius-md); background: transparent; color: inherit; cursor: pointer; text-align: left; transition: background-color 120ms ease-out, color 120ms ease-out, transform 120ms ease-out; }
.session-main[data-active="true"] { color: var(--sidebar-accent-foreground); background: transparent; }
.session-main[data-active="true"]::before { position: absolute; border-radius: 3px; content: ""; top: var(--space-3); bottom: var(--space-3); left: var(--space-1); width: 2px; background: var(--sidebar-ring); }
.session-title { min-width: 0; display: flex; align-items: center; gap: var(--space-1); overflow: hidden; line-height: 1.35; font-size: var(--type-body-sm); font-weight: 500; }
.session-title > svg { width: var(--space-3); height: var(--space-3); flex: 0 0 auto; color: var(--sidebar-ring); }
.session-main[data-active="true"]::before { position: absolute; border-radius: 3px; content: ""; top: var(--space-3); bottom: var(--space-3); left: 0; width: 2px; background: var(--sidebar-ring); }
.session-title { min-width: 0; display: flex; align-items: center; gap: var(--space-1); overflow: hidden; line-height: 1.35; font-size: var(--type-caption); font-weight: 500; }
.session-title > svg { width: 14px; height: 14px; flex: 0 0 auto; color: currentColor; }
.session-main small { color: var(--color-ink-tertiary); line-height: 1.3; font-size: var(--type-overline); }
.session-menu-trigger { width: 44px; height: 44px; display: grid; place-items: center; justify-self: center; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; cursor: pointer; opacity: .64; transition: background-color 120ms ease-out, color 120ms ease-out, opacity 120ms ease-out, transform 120ms ease-out; }
.session-menu-trigger > svg { width: 18px; height: 18px; }
@@ -998,7 +1018,8 @@ button:disabled { cursor: default; opacity: .45; }
border-bottom: 1px solid color-mix(in srgb, var(--color-border) 64%, transparent);
vertical-align: top;
text-align: start;
overflow-wrap: anywhere;
overflow-wrap: break-word;
word-break: keep-all;
}
.technique-audit-panel thead th {
color: var(--color-ink-tertiary);
@@ -1019,6 +1040,67 @@ button:disabled { cursor: default; opacity: .45; }
.technique-audit-panel td:last-child { color: var(--color-ink-secondary); }
.technique-audit-panel tr:last-child th,
.technique-audit-panel tr:last-child td { border-bottom: 0; }
@media (max-width: 767px) {
.markdown-table table:has(thead th:nth-child(3):last-child) thead,
.technique-audit-panel thead {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.markdown-table table:has(thead th:nth-child(3):last-child) tbody tr,
.technique-audit-panel tbody tr {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--space-1) var(--space-3);
padding: var(--space-3) 0;
border-bottom: 1px solid color-mix(in srgb, var(--color-border) 64%, transparent);
}
.markdown-table table:has(thead th:nth-child(3):last-child) tbody th,
.markdown-table table:has(thead th:nth-child(3):last-child) tbody td,
.technique-audit-panel tbody th,
.technique-audit-panel tbody td {
padding: 0;
border: 0;
width: auto;
}
.markdown-table table:has(thead th:nth-child(3):last-child) tbody td:nth-child(1),
.technique-audit-panel tbody th {
grid-column: 1;
grid-row: 1;
color: var(--color-ink);
font-weight: 550;
}
.markdown-table table:has(thead th:nth-child(3):last-child) tbody td:nth-child(2),
.technique-audit-panel td[data-status] {
grid-column: 2;
grid-row: 1;
width: auto;
color: var(--color-ink-secondary);
white-space: nowrap;
}
.markdown-table table:has(thead th:nth-child(3):last-child) tbody td:nth-child(3),
.technique-audit-panel td:last-child {
grid-column: 1 / -1;
grid-row: 2;
color: var(--color-ink-secondary);
font-size: var(--type-caption);
line-height: 1.5;
}
.markdown-table table:has(thead th:nth-child(3):last-child) tbody tr:last-child,
.technique-audit-panel tbody tr:last-child {
border-bottom: 0;
}
}
.error-message { margin: 12px 0 0; padding: 12px 14px; border-left: 3px solid var(--color-danger); background: var(--color-danger-muted); color: var(--color-danger); font-size: 13px; line-height: 1.6; border-color: var(--color-danger); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.composer-wrap { position: sticky; bottom: 0; z-index: 2; min-width: 0; border-top: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent); padding: var(--space-3) var(--space-6) var(--space-4); background: var(--color-frosted); backdrop-filter: saturate(130%) blur(20px); }
@@ -1507,6 +1589,10 @@ input:not([type="radio"]):not([type="checkbox"]):not([class^="ant-"]):not([class
flex: 1;
}
.product-entrypoint-footer small:empty {
display: none;
}
.product-entrypoint-action {
display: inline-flex;
flex: 0 0 auto;
@@ -1657,11 +1743,28 @@ input:not([type="radio"]):not([type="checkbox"]):not([class^="ant-"]):not([class
grid-template-columns: 1fr;
}
.daily-starlanguage-card,
.birth-rectification-card {
min-height: 0;
grid-template-rows: auto auto;
}
.birth-rectification-card {
border-top: 1px solid var(--color-border);
border-left: 0;
}
.product-entrypoint-footer {
flex-direction: column;
align-items: flex-start;
gap: var(--space-3);
}
.product-entrypoint-action {
margin-left: 0;
justify-content: flex-start;
}
.starter-theme-accordion {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@@ -1698,8 +1801,10 @@ input:not([type="radio"]):not([type="checkbox"]):not([class^="ant-"]):not([class
.daily-starlanguage-card,
.birth-rectification-card {
min-height: 210px;
padding: var(--space-6);
min-height: 0;
grid-template-rows: auto auto;
gap: var(--space-4);
padding: var(--space-5);
}
.birth-rectification-card {
@@ -1707,6 +1812,24 @@ input:not([type="radio"]):not([type="checkbox"]):not([class^="ant-"]):not([class
border-left: 0;
}
.product-entrypoint-copy h2 {
font-size: var(--type-title-md);
}
.product-entrypoint-footer {
flex-direction: column;
align-items: flex-start;
gap: var(--space-3);
padding-top: var(--space-4);
}
.product-entrypoint-action {
margin-left: 0;
justify-content: flex-start;
font-size: var(--type-body-sm);
font-weight: 500;
}
.starter-section-heading {
display: grid;
gap: var(--space-1);
@@ -1731,15 +1854,6 @@ input:not([type="radio"]):not([type="checkbox"]):not([class^="ant-"]):not([class
padding: var(--space-6) var(--space-5);
}
.product-entrypoint-footer {
display: grid;
gap: var(--space-4);
}
.product-entrypoint-action {
justify-self: start;
}
.starter-content span {
font-size: var(--type-title-sm);
}
frontend/src/app/page.tsx
+3 -1
View File
@@ -3866,7 +3866,9 @@ export default function Home() {
>{natalMinuteAvailable ? dailyStarlanguageTrend : "看看今天的整体节奏、适合推进的事和需要留意的地方。"}</p>
</div>
<div className="product-entrypoint-footer">
<small>{natalMinuteAvailable ? dailyStarlanguageAction : "不支持的个人判断会明确说明，不会补造出生时间。"}</small>
{natalMinuteAvailable
? (dailyStarlanguageAction ? <small>{dailyStarlanguageAction}</small> : null)
: <small>不支持的个人判断会明确说明，不会补造出生时间。</small>}
<span className="product-entrypoint-action" aria-hidden="true">{natalMinuteAvailable ? dailyStarlanguageQuestion : "查看今日运势"} <ArrowUpRight className="starter-arrow" /></span>
</div>
</article>
frontend/src/components/app-sidebar.tsx
+12 -17
View File
@@ -168,7 +168,7 @@ export function AppSidebar({
disabled={newChatDisabled}
onClick={handleNewChat}
>
<SquarePen aria-hidden="true" />
<SquarePen size={18} strokeWidth={1.75} aria-hidden="true" />
{showExpandedContent ? <span>{creatingSession ? "正在创建" : "新建对话"}</span> : null}
</SidebarMenuButton>
</SidebarMenuItem>
@@ -179,7 +179,7 @@ export function AppSidebar({
tooltip="我的报告"
onClick={handleOpenReports}
>
<FileText aria-hidden="true" />
<FileText size={18} strokeWidth={1.75} aria-hidden="true" />
{showExpandedContent ? <span>我的报告</span> : null}
</SidebarMenuButton>
</SidebarMenuItem>
@@ -192,7 +192,7 @@ export function AppSidebar({
<SidebarGroup className="chart-nav" aria-label="星盘列表">
<div className="session-nav-header">
<SidebarGroupLabel className="sidebar-label">
<Users aria-hidden="true" />
<Users size={18} strokeWidth={1.75} aria-hidden="true" />
星盘列表
</SidebarGroupLabel>
<button
@@ -201,10 +201,10 @@ export function AppSidebar({
aria-label="添加星盘"
onClick={onAddChart}
>
<UserPlus aria-hidden="true" />
<UserPlus size={18} strokeWidth={1.75} aria-hidden="true" />
</button>
</div>
<SidebarGroupContent>
<SidebarGroupContent className="sidebar-nested">
{charts.length === 0 ? <p className="sidebar-empty">还没有星盘</p> : (
<div className="chart-nav-list">
{charts.map((chart) => (
@@ -225,11 +225,11 @@ export function AppSidebar({
<SidebarGroup className="session-nav" aria-label="收藏对话">
<details className="sidebar-section" open>
<summary className="sidebar-section-summary">
<Star aria-hidden="true" />
<Star size={18} strokeWidth={1.75} aria-hidden="true" />
<span>收藏对话</span>
<ChevronDown className="sidebar-section-chevron" aria-hidden="true" />
<ChevronDown className="sidebar-section-chevron" size={16} strokeWidth={1.75} aria-hidden="true" />
</summary>
<SidebarGroupContent>
<SidebarGroupContent className="sidebar-nested">
{favoriteSessions.length === 0 ? <p className="sidebar-empty">还没有收藏</p> : (
<SidebarMenu className="session-list">
{favoriteSessions.map((session, index) => renderSession(session, index))}
@@ -242,16 +242,11 @@ export function AppSidebar({
<SidebarGroup className="session-nav" aria-label={sessionControls.showingArchived ? "归档记录" : "历史对话"}>
<details className="sidebar-section" open>
<summary className="sidebar-section-summary" ref={historyHeadingRef} tabIndex={-1}>
<Clock3 aria-hidden="true" />
<Clock3 size={18} strokeWidth={1.75} aria-hidden="true" />
<span>{sessionControls.showingArchived ? "归档记录" : "历史对话"}</span>
<ChevronDown className="sidebar-section-chevron" aria-hidden="true" />
<ChevronDown className="sidebar-section-chevron" size={16} strokeWidth={1.75} aria-hidden="true" />
</summary>
<div className="session-nav-header session-nav-header-inline">
<button className="session-nav-toggle" type="button" onClick={sessionControls.onToggleArchivedView}>
{sessionControls.showingArchived ? "返回" : `归档 ${sessionControls.archivedCount}`}
</button>
</div>
<SidebarGroupContent>
<SidebarGroupContent className="sidebar-nested">
{historySessions.length === 0 ? <p className="sidebar-empty">暂无对话</p> : (
<SidebarMenu className="session-list">
{historySessions.map((session, index) => renderSession(session, favoriteSessions.length + index))}
@@ -270,7 +265,7 @@ export function AppSidebar({
aria-label="聊天记录"
onClick={handleExpandHistory}
>
<MessageSquareText aria-hidden="true" />
<MessageSquareText size={18} strokeWidth={1.75} aria-hidden="true" />
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>