diff --git a/public/admin.css b/public/admin.css
index 492debf..a07ff79 100644
--- a/public/admin.css
+++ b/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;
diff --git a/public/admin.js b/public/admin.js
index 763c8eb..f74696c 100644
--- a/public/admin.js
+++ b/public/admin.js
@@ -530,15 +530,17 @@ function visitorDetails(conversation) {
       <summary title="Detail navstevnika">
         <span aria-hidden="true">i</span>
       </summary>
-      <div class="visitor-detail-grid">
-        <span>Aktualne</span>
-        <a href="${escapeHtml(conversation.currentUrl || "#")}" target="_blank" rel="noreferrer">${escapeHtml(shortUrl(conversation.currentUrl) || "-")}</a>
-        <span>Prisiel z</span>
-        ${conversation.referrer ? `<a href="${escapeHtml(conversation.referrer)}" target="_blank" rel="noreferrer">${escapeHtml(shortUrl(conversation.referrer))}</a>` : `<em>primy vstup / nezname</em>`}
-        <span>Zarizeni</span>
-        <em>${escapeHtml(deviceLabel(conversation.device, conversation.language, conversation.timezone))}</em>
+      <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>
+          <span>Prisiel z</span>
+          ${conversation.referrer ? `<a href="${escapeHtml(conversation.referrer)}" target="_blank" rel="noreferrer">${escapeHtml(shortUrl(conversation.referrer))}</a>` : `<em>primy vstup / nezname</em>`}
+          <span>Zarizeni</span>
+          <em>${escapeHtml(deviceLabel(conversation.device, conversation.language, conversation.timezone))}</em>
+        </div>
+        <ol class="history-list">${historyItems}</ol>
       </div>
-      <ol class="history-list">${historyItems}</ol>
     </details>
   `;
 }