From 4083613dbebcb7792f0efa76af0879674c6133a5 Mon Sep 17 00:00:00 2001 From: unknown Date: Sat, 31 Oct 2026 15:34:24 +0800 Subject: [PATCH] fix(admin): scroll ticket notes inside their card instead of the whole sidebar Keep ticket info at its natural height and let the internal notes card fill the remaining sidebar height, so only the notes list scrolls. Co-Authored-By: Claude Fable 5 --- assets/css/admin/tickets.css | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/assets/css/admin/tickets.css b/assets/css/admin/tickets.css index 68b1f85f..0cecbbf8 100644 --- a/assets/css/admin/tickets.css +++ b/assets/css/admin/tickets.css @@ -55,7 +55,11 @@ .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; } -.aksrt-ticket-detail__side { max-height: var(--aksrt-ticket-pane-height); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } +/* 侧栏固定为面板高度且自身不滚动：工单信息按内容高度完整显示，内部备注占满剩余高度，只有备注列表在卡片内滚动。 + 仅当视口极矮、两张卡片的最小高度之和仍放不下时，才退回到侧栏整体滚动，避免内容被裁掉。 */ +.aksrt-ticket-detail__side { height: var(--aksrt-ticket-pane-height); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } +.aksrt-ticket-detail__side > .aksrt-ticket-detail__card { flex: none; } +.aksrt-ticket-detail__side > .aksrt-ticket-detail__private { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 160px; } .aksrt-ticket-conversation, .aksrt-ticket-detail__card { background: var(--an-card); border: 1px solid var(--an-border); border-radius: var(--an-radius); } /* 会话面板（IM 式）：头部、时间线、回复框同属一张卡片；卡片高度跟随视口，开屏即可看到回复框与发送按钮，只有时间线滚动。 */ @@ -129,7 +133,9 @@ .aksrt-ticket-detail__private { background: #fffbf0; border-color: #f3e2b6; } .aksrt-ticket-detail__private .aksrt-ticket-section-head { margin-bottom: 4px; } .aksrt-ticket-detail__private > .aksrt-ticket-hint { margin: 0 0 12px; color: #a26b07; } -.aksrt-ticket-detail__notes { max-height: 240px; margin: 0 0 12px; overflow-y: auto; overscroll-behavior: contain; } +.aksrt-ticket-detail__private > .aksrt-ticket-section-head, +.aksrt-ticket-detail__private > .aksrt-ticket-hint { flex: none; } +.aksrt-ticket-detail__notes { flex: 1 1 auto; min-height: 0; margin: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } .aksrt-ticket-detail__notes ol { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; } .aksrt-ticket-detail__notes-older { margin-bottom: 8px; } .aksrt-ticket-detail__notes-older > summary { display: flex; align-items: center; gap: 6px; padding: 2px 0; color: #a26b07; font-size: 12px; cursor: pointer; list-style: none; } @@ -150,7 +156,10 @@ @media (max-width: 960px) { .aksrt-ticket-detail { grid-template-columns: minmax(0, 1fr); } - .aksrt-ticket-detail__side { position: static; max-height: none; overflow: visible; } + /* 单列时侧栏按内容高度排在会话下方，备注列表恢复独立的高度上限。 */ + .aksrt-ticket-detail__side { height: auto; overflow: visible; } + .aksrt-ticket-detail__side > .aksrt-ticket-detail__private { flex: none; min-height: 0; } + .aksrt-ticket-detail__notes { max-height: 320px; } } @media (max-width: 600px) { .aksrt-ticket-detail { --aksrt-ticket-pane-height: max(400px, calc(100vh - 160px)); }