Stabilize admin header layout

public/admin.css

@@ -7,6 +7,7 @@
   --brand: #0f8f6f;
   --bg: #f5f7f4;
   --panel: #ffffff;
+  --topbar-height: 58px;
 }
 
 * { box-sizing: border-box; }
@@ -73,6 +74,7 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
   overflow: hidden;
 }
 .brand, .sitebar {
+  min-height: var(--topbar-height);
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -258,10 +260,10 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
 
 .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;
+  min-height: var(--topbar-height);
   max-height: 42vh;
-  overflow: auto;
-  padding: 14px 20px;
+  overflow: visible;
+  padding: 12px 20px;
   background: white;
   border-bottom: 1px solid var(--line);
   display: flex;
@@ -367,10 +369,11 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
   font-size: 12px;
 }
 .visitor-summary-row .visitor-details {
+  position: relative;
   max-width: none;
 }
 .visitor-summary-row .visitor-details[open] {
-  flex-basis: 100%;
+  flex-basis: auto;
 }
 .visitor-details summary {
   width: fit-content;
@@ -392,11 +395,23 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
   font-size: 12px;
   font-weight: 700;
 }
+.visitor-detail-popover {
+  position: absolute;
+  z-index: 20;
+  top: calc(100% + 8px);
+  right: 0;
+  width: min(520px, calc(100vw - 420px));
+  padding: 12px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: white;
+  box-shadow: 0 14px 32px rgb(0 0 0 / 13%);
+}
 .visitor-detail-grid {
   display: grid;
   grid-template-columns: 76px minmax(0, 1fr);
   gap: 5px 10px;
-  margin-top: 8px;
+  margin-top: 0;
 }
 .visitor-detail-grid span { color: var(--muted); }
 .visitor-detail-grid a,
@@ -416,7 +431,7 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
   white-space: nowrap;
 }
 .history-list {
-  margin: 8px 0 0;
+  margin: 10px 0 0;
   padding-left: 20px;
   display: grid;
   gap: 4px;
@@ -445,6 +460,7 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
   background: var(--panel);
 }
 .visitor-panel header {
+  min-height: var(--topbar-height);
   padding: 14px;
   border-bottom: 1px solid var(--line);
   display: grid;

public/admin.js

@@ -530,6 +530,7 @@ function visitorDetails(conversation) {
       <summary title="Detail navstevnika">
         <span aria-hidden="true">i</span>
       </summary>
+      <div class="visitor-detail-popover">
         <div class="visitor-detail-grid">
           <span>Aktualne</span>
           <a href="${escapeHtml(conversation.currentUrl || "#")}" target="_blank" rel="noreferrer">${escapeHtml(shortUrl(conversation.currentUrl) || "-")}</a>
@@ -539,6 +540,7 @@ function visitorDetails(conversation) {
           <em>${escapeHtml(deviceLabel(conversation.device, conversation.language, conversation.timezone))}</em>
         </div>
         <ol class="history-list">${historyItems}</ol>
+      </div>
     </details>
   `;
 }