From ae4698718e11de6a32a118cdb61368a15f209e93 Mon Sep 17 00:00:00 2001
From: dv <dv@caps.caps>
Date: Mon, 23 Mar 2026 23:46:11 +0300
Subject: [PATCH] statistica vibe 5

---
 public/css/app.css | 14 ++++++++++++++
 public/js/ui.js    | 38 ++++++++++++++++++++++++++++++++++----
 2 files changed, 48 insertions(+), 4 deletions(-)

diff --git a/public/css/app.css b/public/css/app.css
index a08f1e8..0044808 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -843,6 +843,20 @@ body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);min-h
   position: fixed; /* fixed so it escapes any overflow:hidden parent */
   z-index: 500;
 }
+/* Невидимая зона между бейджем и списком — курсор не выходит из «цепочки» hover */
+.inline-status-picker .isp-dropdown::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: -10px;
+  height: 10px;
+}
+.inline-status-picker .isp-dropdown.isp-drop-up::before {
+  top: auto;
+  bottom: -10px;
+  height: 10px;
+}
 .inline-status-picker:hover .isp-dropdown,
 .inline-status-picker.isp-open .isp-dropdown {
   display: block;
diff --git a/public/js/ui.js b/public/js/ui.js
index 2f74e0f..5a6f118 100644
--- a/public/js/ui.js
+++ b/public/js/ui.js
@@ -562,15 +562,45 @@ function statusPickerHtml(tid){
 }
 function ispShow(el){
   const dd=el.querySelector('.isp-dropdown');
-  if(!dd) return;
+  const inner=dd?.querySelector('.isp-dropdown-inner');
+  if(!dd||!inner) return;
+  /** Список чуть заходит на бейдж — без «дыры», курсор не теряет hover */
+  const OVERLAP=4;
+  const edge=6;
   const r=el.getBoundingClientRect();
-  dd.style.top=(r.bottom)+'px';
-  dd.style.left=r.left+'px';
+  inner.style.maxHeight='';
+  inner.style.overflowY='';
+  dd.classList.remove('isp-drop-up');
   dd.style.display='block';
+  dd.style.left=r.left+'px';
+  dd.style.top=(r.bottom-OVERLAP)+'px';
+  let h=dd.getBoundingClientRect().height;
+  const spaceBelow=window.innerHeight-r.bottom+OVERLAP;
+  const spaceAbove=r.top+OVERLAP;
+  const flipUp=h>spaceBelow&&spaceAbove>=spaceBelow;
+  if(flipUp){
+    let top=r.top-h+OVERLAP;
+    if(top<edge){
+      inner.style.maxHeight=Math.max(80,spaceAbove-edge)+'px';
+      inner.style.overflowY='auto';
+      h=dd.getBoundingClientRect().height;
+      top=r.top-h+OVERLAP;
+    }
+    dd.style.top=Math.max(edge,top)+'px';
+    dd.classList.add('isp-drop-up');
+  }else if(h>spaceBelow){
+    inner.style.maxHeight=Math.max(80,spaceBelow-edge)+'px';
+    inner.style.overflowY='auto';
+    dd.style.top=(r.bottom-OVERLAP)+'px';
+  }
 }
 function ispHide(el){
   const dd=el.querySelector('.isp-dropdown');
-  if(dd) dd.style.display='none';
+  if(!dd) return;
+  dd.style.display='none';
+  dd.classList.remove('isp-drop-up');
+  const inner=dd.querySelector('.isp-dropdown-inner');
+  if(inner){ inner.style.maxHeight=''; inner.style.overflowY=''; }
 }
 
 // ── Column picker ─────────────────────────────────────────────────