diff --git a/public/admin.css b/public/admin.css index 5e498cd..4a0146a 100644 --- a/public/admin.css +++ b/public/admin.css @@ -10,7 +10,7 @@ } * { box-sizing: border-box; } -body { margin: 0; background: var(--bg); color: var(--ink); } +body { margin: 0; background: var(--bg); color: var(--ink); overflow: hidden; } button, input, textarea, select { font: inherit; } button { border: 0; @@ -47,15 +47,19 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; } .error { min-height: 20px; color: #b42318; margin: 0; } .app { - min-height: 100vh; + height: 100vh; + min-height: 0; display: grid; grid-template-columns: 330px minmax(0, 1fr); + overflow: hidden; } .sidebar { border-right: 1px solid var(--line); background: var(--panel); display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); + min-height: 0; + overflow: hidden; } .brand, .sitebar { display: flex; @@ -76,7 +80,7 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; } } .list-tools label { color: var(--muted); } -.conversation-list { overflow: auto; } +.conversation-list { overflow: auto; min-height: 0; } .conversation-item { border: 0; border-bottom: 1px solid var(--line); @@ -173,10 +177,12 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; } font-size: 13px; } -.conversation { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; min-width: 0; } +.conversation { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; min-width: 0; min-height: 0; overflow: hidden; } .conversation-header { min-height: 74px; - padding: 16px 20px; + max-height: 42vh; + overflow: auto; + padding: 14px 20px; background: white; border-bottom: 1px solid var(--line); display: flex; @@ -186,8 +192,95 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; } .conversation-header h2 { margin: 0 0 5px; font-size: 20px; } .conversation-header p { margin: 0; color: var(--muted); font-size: 13px; } .conversation-header select { width: 150px; align-self: start; } +.visitor-head { width: 100%; min-width: 0; display: grid; gap: 7px; } +.visitor-title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } +.visitor-title-row h2 { margin: 0; } +.country-pill { + border: 1px solid #e4ebe6; + border-radius: 999px; + padding: 3px 8px; + background: #f8fbf9; + color: var(--muted); + font-size: 12px; +} +.visitor-quick { + display: flex; + flex-wrap: wrap; + gap: 6px; + color: var(--muted); + font-size: 12px; +} +.visitor-quick span { + border: 1px solid #e4ebe6; + border-radius: 999px; + padding: 2px 7px; + background: #f8fbf9; +} +.visitor-details { + max-width: 980px; + color: var(--muted); + font-size: 12px; +} +.visitor-details summary { + width: fit-content; + display: inline-flex; + align-items: center; + gap: 6px; + cursor: pointer; + user-select: none; + color: var(--ink); +} +.visitor-details summary::-webkit-details-marker { display: none; } +.visitor-details summary span { + width: 20px; + height: 20px; + display: grid; + place-items: center; + border-radius: 50%; + background: var(--brand); + color: white; + font-size: 12px; + font-weight: 700; +} +.visitor-detail-grid { + display: grid; + grid-template-columns: 76px minmax(0, 1fr); + gap: 5px 10px; + margin-top: 8px; +} +.visitor-detail-grid span { color: var(--muted); } +.visitor-detail-grid a, +.history-list a { + min-width: 0; + color: var(--brand); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.visitor-detail-grid em { + min-width: 0; + color: var(--muted); + font-style: normal; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.history-list { + margin: 8px 0 0; + padding-left: 20px; + display: grid; + gap: 4px; +} +.history-list li { + min-width: 0; + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + gap: 10px; +} +.history-list small { color: var(--muted); } .messages { overflow: auto; + min-height: 0; padding: 20px; display: flex; flex-direction: column; @@ -400,7 +493,8 @@ pre { } @media (max-width: 820px) { - .app { grid-template-columns: 1fr; } - .sidebar { min-height: 42vh; border-right: 0; border-bottom: 1px solid var(--line); } - .conversation { min-height: 58vh; } + body { overflow: auto; } + .app { height: auto; min-height: 100vh; grid-template-columns: 1fr; overflow: visible; } + .sidebar { height: 42vh; border-right: 0; border-bottom: 1px solid var(--line); } + .conversation { height: 58vh; } } diff --git a/public/admin.html b/public/admin.html index 6b7d2e5..b853151 100644 --- a/public/admin.html +++ b/public/admin.html @@ -40,7 +40,6 @@ - diff --git a/public/admin.js b/public/admin.js index 9de836b..438ee88 100644 --- a/public/admin.js +++ b/public/admin.js @@ -270,10 +270,17 @@ function renderConversations() { function renderActive() { const { conversation, messages } = state.active; $("#conversationHeader").innerHTML = ` -
${visitorCountry(conversation)} ${escapeHtml(conversation.currentUrl || "")}
-${escapeHtml(conversation.device.userAgent || "")}
+