rajch_ales/MaalFlows
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve admin visitor context layout

Browse Source
This commit is contained in:
rajchales-monito
2026-07-23 23:15:52 +02:00
parent 273056284c
commit 571770b1c3
4 changed files with 197 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/admin.css
+102 -8
View File
@@ -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; }
}