swap order of elements for more consistent layout

web/src/glossary.tsx

@@ -42,12 +42,12 @@ export const GlossarySpan: React.FC<{content: string}> = ({content}) => {
         const pageid = item.pageid;
 
         return `
+            <div class="glossary-hover" nowrap>${hover_content}</div>
             <a href="https://aisafety.info/?state=${pageid}"
                target="_blank"
                class="glossary-link">
                  ${match}
             </a>
-            <div class="glossary-hover">${hover_content}</div>
         `;
 
     })}} />;

web/src/styles/globals.css

@@ -43,11 +43,12 @@ ol {
   position: absolute;
   display: none;
   width: 300px;
-  transform: translate(-50%, 1.7rem);
+  transform: translateY(1.7rem);
   @apply bg-white hover:bg-gray-300 h-fit px-3;
   @apply border border-gray-300;
 }
 
-.glossary-link:hover + .glossary-hover {
+/* .glossary-link:hover + .glossary-hover { */
+.glossary-hover:has(+ .glossary-link:hover) {
   display: initial;
 }