fix weird hover behavior

src/client/app/composables/codeModal.ts

@@ -6,6 +6,9 @@ export function useCodeModal() {
       const el = e.target as HTMLElement
 
       if (el.matches('div[class*="language-"] > button.modal')) {
+        //remove focus from button
+        el.blur()
+
         const parent = el.parentElement
         const sibling = el.nextElementSibling
         if (!parent || !sibling) {

src/client/theme-default/styles/components/vp-doc.css

@@ -459,9 +459,13 @@
   top: 64px;
 }
 
-.vp-doc [class*='language-']:hover > button.copy,
+.vp-doc
+  [class*='language-']:hover:not(:has(.modal-container:hover))
+  > button.copy,
 .vp-doc [class*='language-'] > button.copy:focus,
-.vp-doc [class*='language-']:hover > button.modal,
+.vp-doc
+  [class*='language-']:hover:not(:has(.modal-container:hover))
+  > button.modal,
 .vp-doc [class*='language-'] > button.modal:focus {
   opacity: 1;
 }
@@ -520,8 +524,11 @@
     opacity 0.4s;
 }
 
-.vp-doc [class*='language-']:hover button.copy + span.lang,
-.vp-doc [class*='language-'] button.copy:focus + span.lang {
+.vp-doc
+  [class*='language-']:hover:not(:has(.modal-container:hover))
+  > button.copy
+  + span.lang,
+.vp-doc [class*='language-'] > button.copy:focus + span.lang {
   opacity: 0;
 }