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)); }