codexly-ui 0.19.2 → 0.19.4

package/fesm2022/codexly-ui.mjs

@@ -3129,7 +3129,15 @@ class ClxTooltipDirective {
         const { signal } = this._abort;
         host.addEventListener('mouseenter', () => this._scheduleShow(), { signal });
         host.addEventListener('mouseleave', () => this._scheduleHide(), { signal });
-        host.addEventListener('focus', () => this._scheduleShow(), { signal });
+        // :focus-visible, not a bare 'focus' check — a modal/drawer restores focus to its trigger
+        // button programmatically when it closes (standard a11y behavior), which fires 'focus' on
+        // this host with no real hover/keyboard interaction behind it. That reopened the tooltip and
+        // left it stuck floating over the page after the modal was dismissed. :focus-visible only
+        // matches when the browser itself determines the focus came from keyboard navigation, not
+        // from a programmatic .focus() call or a mouse/touch click — exactly the real-vs-restored
+        // distinction needed here.
+        host.addEventListener('focus', () => { if (host.matches(':focus-visible'))
+            this._scheduleShow(); }, { signal });
         host.addEventListener('blur', () => this._scheduleHide(), { signal });
         // Touch devices fire 'mouseenter'/'focus' on tap but never a real
         // 'mouseleave' — dismiss immediately (no fade) so the bubble can't
@@ -9029,7 +9037,11 @@ const MODAL_SIZE_MAP = {
     md: 'w-full',
     lg: 'w-full',
     xl: 'w-full',
-    full: 'w-full h-screen rounded-none',
+    // h-dvh, not h-screen (100vh) — same Android Chrome issue as DRAWER_CONTAINER_CLASS/
+    // ClxAppLayoutComponent: 100vh is computed against the largest possible viewport, so once the
+    // browser's own chrome (address bar, nav buttons) is actually on-screen, a full-size modal ends
+    // up taller than what's visible and clips its own footer/content below the fold.
+    full: 'w-full h-dvh rounded-none',
 };
 const MODAL_CONTAINER_CLASS = 'flex flex-col bg-clx-surface rounded-2xl shadow-2xl overflow-hidden';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -12045,7 +12057,12 @@ const DRAWER_WIDTH_MAP = {
     md: '420px',
     lg: '560px',
 };
-const DRAWER_CONTAINER_CLASS = 'flex flex-col bg-clx-surface shadow-2xl overflow-hidden h-screen';
+// h-dvh (dynamic viewport height), not h-screen (100vh): on Android Chrome, 100vh is computed
+// against the *largest* viewport (as if the address bar were hidden), so once that browser chrome
+// is actually on-screen the drawer is taller than what's visible — pushing its footer (confirm/
+// cancel buttons) below the fold even though the body above it still scrolls fine. Same root cause
+// already fixed in ClxAppLayoutComponent's host class — see its own doc comment.
+const DRAWER_CONTAINER_CLASS = 'flex flex-col bg-clx-surface shadow-2xl overflow-hidden h-dvh';
 const CLX_DRAWER_SIZE = new InjectionToken('CLX_DRAWER_SIZE');
 
 class ClxDrawerComponent {