From ed526709c8383a51aa7d084c783d24baf6ab9746 Mon Sep 17 00:00:00 2001 From: unknown Date: Sat, 31 Oct 2026 15:20:45 +0800 Subject: [PATCH] fix(admin): align ticket sidebar and conversation pane heights Share one --aksrt-ticket-pane-height between the conversation panel and the sidebar cap so both columns line up, and drop the sidebar sticky offset that no longer matches the pane height. Co-Authored-By: Claude Fable 5 --- assets/css/admin/tickets.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/assets/css/admin/tickets.css b/assets/css/admin/tickets.css index 7158baad..68b1f85f 100644 --- a/assets/css/admin/tickets.css +++ b/assets/css/admin/tickets.css @@ -51,15 +51,15 @@ .aksrt-ticket-dialog__foot > .aksrt-ticket-hint { margin-right: auto; } /* 处理工作区：会话与回复在左，处理信息与内部备注在右。 */ -.aksrt-ticket-detail { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; } +/* 主内容与侧栏共用同一个面板高度：会话面板固定为该高度，侧栏最多到该高度、超出时栏内滚动，两栏顶边和底边对齐。 */ +.aksrt-ticket-detail { --aksrt-ticket-pane-height: max(460px, calc(100vh - 200px)); display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; } .aksrt-ticket-detail__main, .aksrt-ticket-detail__side { display: flex; flex-direction: column; gap: 16px; min-width: 0; } -/* 侧栏在页面滚动时吸顶（让出 WP 管理工具栏），超出视口高度时栏内滚动。 */ -.aksrt-ticket-detail__side { position: sticky; top: 48px; max-height: calc(100vh - 64px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } +.aksrt-ticket-detail__side { max-height: var(--aksrt-ticket-pane-height); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } .aksrt-ticket-conversation, .aksrt-ticket-detail__card { background: var(--an-card); border: 1px solid var(--an-border); border-radius: var(--an-radius); } /* 会话面板（IM 式）：头部、时间线、回复框同属一张卡片；卡片高度跟随视口，开屏即可看到回复框与发送按钮，只有时间线滚动。 */ -.aksrt-ticket-conversation { display: flex; flex-direction: column; height: calc(100vh - 200px); min-height: 460px; overflow: hidden; } +.aksrt-ticket-conversation { display: flex; flex-direction: column; height: var(--aksrt-ticket-pane-height); overflow: hidden; } .aksrt-ticket-detail__card { padding: 16px; } .aksrt-ticket-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; } .aksrt-ticket-section-head h3 { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--an-text); font-size: 14px; font-weight: 600; } @@ -153,7 +153,7 @@ .aksrt-ticket-detail__side { position: static; max-height: none; overflow: visible; } } @media (max-width: 600px) { - .aksrt-ticket-conversation { height: calc(100vh - 160px); min-height: 400px; } + .aksrt-ticket-detail { --aksrt-ticket-pane-height: max(400px, calc(100vh - 160px)); } .aksrt-ticket-conversation__scroll { padding: 14px 12px; } .aksrt-ticket-composer { padding: 10px 12px 12px; } .aksrt-ticket-composer__shortcut { display: none; }