kate522/wordpress-theme-aksrt
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(admin): align ticket sidebar and conversation pane heights

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
kate522andClaude Fable 5 committed 2026-10-31 15:20:45 +08:00
1 parent b9000e1b93
commit ed526709c8
1 file changed
+5 -5
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/admin/tickets.css
+5 -5
View File
@@ -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; }