pgo-ui 1.0.38 → 1.0.39

package/src/pgo-components/directives/tooltip-directive.ts

@@ -132,11 +132,12 @@ function ensureTooltipEl(state: TooltipState) {
   const el = document.createElement('div')
   el.className = 'vts-tooltip'
   el.setAttribute('role', 'tooltip')
-  el.style.position = 'absolute'
+  el.style.position = 'fixed'
   el.style.top = '-9999px'
   el.style.left = '-9999px'
   el.style.visibility = 'hidden'
   el.style.zIndex = 'var(--vts-z-tooltip, 1000)'
+  el.style.maxWidth = 'calc(100vw - 16px)'
 
   const content = document.createElement('div')
   content.className = 'vts-tooltip-content'
@@ -183,8 +184,6 @@ function computePosition(activator: HTMLElement, state: TooltipState) {
   const tooltip = state.tooltipEl
   const rect = activator.getBoundingClientRect()
   const tooltipRect = tooltip.getBoundingClientRect()
-  const scrollX = window.scrollX || window.pageXOffset
-  const scrollY = window.scrollY || window.pageYOffset
   const placement = getNormalizedPlacement(state.options.placement || 'top')
   const offsetX = state.options.offset?.x ?? 0
   const offsetY = state.options.offset?.y ?? 0
@@ -193,25 +192,34 @@ function computePosition(activator: HTMLElement, state: TooltipState) {
   let top = 0
   let left = 0
 
+  // Position relative to viewport (fixed positioning)
   switch (placement) {
     case 'top':
-      top = rect.top + scrollY - tooltipRect.height - gap - offsetY
-      left = rect.left + scrollX + rect.width / 2 - tooltipRect.width / 2 + offsetX
+      top = rect.top - tooltipRect.height - gap - offsetY
+      left = rect.left + rect.width / 2 - tooltipRect.width / 2 + offsetX
       break
     case 'bottom':
-      top = rect.bottom + scrollY + gap + offsetY
-      left = rect.left + scrollX + rect.width / 2 - tooltipRect.width / 2 + offsetX
+      top = rect.bottom + gap + offsetY
+      left = rect.left + rect.width / 2 - tooltipRect.width / 2 + offsetX
       break
     case 'left':
-      top = rect.top + scrollY + rect.height / 2 - tooltipRect.height / 2 + offsetY
-      left = rect.left + scrollX - tooltipRect.width - gap - offsetX
+      top = rect.top + rect.height / 2 - tooltipRect.height / 2 + offsetY
+      left = rect.left - tooltipRect.width - gap - offsetX
       break
     case 'right':
-      top = rect.top + scrollY + rect.height / 2 - tooltipRect.height / 2 + offsetY
-      left = rect.right + scrollX + gap + offsetX
+      top = rect.top + rect.height / 2 - tooltipRect.height / 2 + offsetY
+      left = rect.right + gap + offsetX
       break
   }
 
+  // Clamp to viewport so the tooltip never causes scrollbars
+  const viewW = document.documentElement.clientWidth
+  const viewH = document.documentElement.clientHeight
+  const pad = 8
+
+  left = Math.max(pad, Math.min(left, viewW - tooltipRect.width - pad))
+  top  = Math.max(pad, Math.min(top, viewH - tooltipRect.height - pad))
+
   tooltip.style.top = `${top}px`
   tooltip.style.left = `${left}px`
   tooltip.style.visibility = ''
@@ -221,35 +229,47 @@ function computePosition(activator: HTMLElement, state: TooltipState) {
     const arrow = state.arrowEl
     arrow.style.width = `${size}px`
     arrow.style.height = `${size}px`
+    // Arrow points at the activator center, adjusted if tooltip was clamped
+    const actCenterX = rect.left + rect.width / 2
+    const actCenterY = rect.top + rect.height / 2
+    const arrowMinEdge = 12
     switch (placement) {
-      case 'top':
+      case 'top': {
+        const ax = Math.max(arrowMinEdge, Math.min(actCenterX - left, tooltipRect.width - arrowMinEdge))
         arrow.style.bottom = '-4px'
-        arrow.style.left = '50%'
+        arrow.style.left = `${ax}px`
         arrow.style.top = ''
         arrow.style.right = ''
         arrow.style.transform = 'translateX(-50%) rotate(225deg)'
         break
-      case 'bottom':
+      }
+      case 'bottom': {
+        const ax = Math.max(arrowMinEdge, Math.min(actCenterX - left, tooltipRect.width - arrowMinEdge))
         arrow.style.top = '-4px'
-        arrow.style.left = '50%'
+        arrow.style.left = `${ax}px`
         arrow.style.bottom = ''
         arrow.style.right = ''
         arrow.style.transform = 'translateX(-50%) rotate(45deg)'
         break
-      case 'left':
+      }
+      case 'left': {
+        const ay = Math.max(arrowMinEdge, Math.min(actCenterY - top, tooltipRect.height - arrowMinEdge))
         arrow.style.right = '-4px'
-        arrow.style.top = '50%'
+        arrow.style.top = `${ay}px`
         arrow.style.left = ''
         arrow.style.bottom = ''
         arrow.style.transform = 'translateY(-50%) rotate(135deg)'
         break
-      case 'right':
+      }
+      case 'right': {
+        const ay = Math.max(arrowMinEdge, Math.min(actCenterY - top, tooltipRect.height - arrowMinEdge))
         arrow.style.left = '-4px'
-        arrow.style.top = '50%'
+        arrow.style.top = `${ay}px`
         arrow.style.right = ''
         arrow.style.bottom = ''
         arrow.style.transform = 'translateY(-50%) rotate(315deg)'
         break
+      }
     }
   }
 }

package/src/pgo-components/pages/ListView.vue

@@ -7,7 +7,7 @@
             :show-print="true"
             title="View Document"
         />
-        <!-- <Button @click="handlePdfView('../../../public/Sex_offenders.pdf')">View</Button> -->
+        <Button @click="handlePdfView('../../../public/Sex_offenders.pdf')">View</Button>
         <!-- <Button @click="handlePdfView('../../../public/1_ref_20251120_050755.pdf')">View</Button> -->
         <template v-if="items">
             <slot name="topSlot" :items="items" />

package/src/pgo-components/services/axios.js

@@ -39,7 +39,6 @@ export function createApi() {
         console.error('API Error:', error.response.data);
         if (error.response.status === 401) {
           localStorage.removeItem('token');
-          window.location.href = '/auth/login';
         }
       } else if (error.request) {
         console.error('Network Error:', error.request);

package/src/pgo-components/styles/global.css

@@ -210,13 +210,14 @@ html .dp__theme_dark {
 
 /* Global tooltip styles for v-tooltip directive */
 .vts-tooltip {
+    position: fixed;
     background-color: var(--vts-color-surfaceElevated);
     color: var(--vts-color-text);
     border: 1px solid var(--vts-color-border);
     border-radius: var(--vts-radius-sm);
     box-shadow: var(--vts-elevation-2, 0 4px 12px rgba(0, 0, 0, 0.12));
     padding: 6px 10px;
-    max-width: 280px;
+    max-width: min(280px, calc(100vw - 16px));
     pointer-events: none; /* do not steal hover from activator */
 }
 

package/dist/Radio-BmYjwUj3.js

@@ -1,4 +0,0 @@
-import { _ as f } from "./index-piz7IhPQ.js";
-export {
-  f as default
-};