ensure popovers stay visible

Author: joeyballentine

src/elements/components/download-button-edit-popover.tsx

@@ -196,7 +196,7 @@ export function EditResourceButton({
                 leaveTo="transform opacity-0 scale-95"
             >
                 <Popover.Panel
-                    className={`absolute z-50 mt-2 w-96 origin-top-right divide-y divide-gray-100 rounded-lg bg-fade-100 p-2 text-sm shadow-lg focus:outline-none dark:bg-black ${
+                    className={`absolute z-[9999] mt-2 w-96 origin-top-right divide-y divide-gray-100 rounded-lg bg-fade-100 p-2 text-sm shadow-lg focus:outline-none dark:bg-black ${
                         position === 'left' ? 'left-0' : 'right-0'
                     }`}
                 >

src/elements/components/editable-tags.tsx

@@ -99,7 +99,7 @@ function EditTags({ tags, onChange }: { tags: readonly TagId[]; onChange: (value
                 leaveTo="transform opacity-0 scale-95"
             >
                 <Popover.Panel
-                    className={`absolute z-50 mt-2 w-96 origin-top-right divide-y divide-gray-100 rounded-lg bg-fade-100 text-sm shadow-lg focus:outline-none dark:bg-black ${
+                    className={`absolute z-[9999] mt-2 w-96 origin-top-right divide-y divide-gray-100 rounded-lg bg-fade-100 text-sm shadow-lg focus:outline-none dark:bg-black ${
                         position === 'left' ? 'left-0' : 'right-0'
                     }`}
                 >

src/elements/components/image-carousel-edit-popover.tsx

@@ -202,7 +202,7 @@ export function EditImageButton({ image, onChange, children }: React.PropsWithCh
                     leaveTo="transform opacity-0 scale-95"
                 >
                     <Popover.Panel
-                        className={`absolute z-50 mt-2 w-96 origin-top-right divide-y divide-gray-100 rounded-lg bg-fade-100 p-2 text-sm shadow-lg focus:outline-none dark:bg-black ${
+                        className={`absolute z-[9999] mt-2 w-96 origin-top-right divide-y divide-gray-100 rounded-lg bg-fade-100 p-2 text-sm shadow-lg focus:outline-none dark:bg-black ${
                             position === 'left' ? 'left-0' : 'right-0'
                         }`}
                     >

src/elements/components/model-card.module.scss

@@ -10,11 +10,13 @@
     border-width: 1px;
     border-style: solid;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
+    z-index: 1;
 
     --inner-radius: calc(0.5rem - 1px);
 
     &:hover {
         transform: scale(1.02);
+        z-index: 10;
     }
 
     &.overflowHidden {
@@ -23,6 +25,12 @@
         overflow: hidden;
     }
 
+    // Ensure popovers can escape the card's bounds when open
+    &:has([data-headlessui-state='open']) {
+        overflow: visible;
+        z-index: 100;
+    }
+
     .inner {
         position: relative;
         display: flex;
@@ -65,6 +73,9 @@
     .details {
         padding: 0.75rem;
         padding-top: 0;
+        overflow: visible;
+        position: relative;
+        z-index: 10;
 
         &.paired {
             position: absolute;
@@ -73,7 +84,7 @@
             right: 0;
             backdrop-filter: blur(2rem) saturate(2);
             border-radius: 0 0 var(--inner-radius) var(--inner-radius);
-            overflow: hidden;
+            overflow: visible;
 
             @include themed using($t) {
                 background: linear-gradient(transparent, t($t, white, $fade-900))