Popper position partial fix

justinsilvestre · Dec 14, 2023 · 3c07901 · 3c07901
1 parent ad08ca6
commit 3c07901
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 10 deletions.
diff --git a/app/features/dictionary/AncientCharacterFormSection.tsx b/app/features/dictionary/AncientCharacterFormSection.tsx
@@ -64,10 +64,9 @@ export function AncientCharacterFormSection({
             popper.animationClassName,
           )}
           ref={popper.setPopperElement}
+          {...popper.attributes.popper}
           style={popper.styles.popper}
           // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-          tabIndex={0}
-          {...popper.attributes.popper}
         >
           <p className="mb-4 text-sm">
             These ancient <strong>&quot;seal script&quot;</strong> character

diff --git a/app/features/dictionary/RadicalSection.tsx b/app/features/dictionary/RadicalSection.tsx
@@ -5,6 +5,7 @@ import { PopperOptions } from "~/components/usePaddedPopper";
 import { useHoverPopper } from "./useHoverPopper";
 
 const popoverOptions: PopperOptions = {
+  placement: "auto",
   modifiers: [
     {
       name: "preventOverflow",
@@ -14,6 +15,14 @@ const popoverOptions: PopperOptions = {
         tether: false,
       },
     },
+    {
+      name: "offset",
+      options: {
+        offset: ({ popper, reference }) => {
+          return [-popper.width / reference.width, -popper.height / 2];
+        },
+      },
+    },
   ],
 };
 export function RadicalSection({
@@ -28,6 +37,7 @@ export function RadicalSection({
 
   return (
     <section
+      className="relative"
       ref={hoverPopover.setReferenceElement}
       {...hoverPopover.openEventHandlers}
     >
@@ -46,7 +56,7 @@ export function RadicalSection({
       ))}
       {hoverPopover.isOpen ? (
         <div
-          className=" w-95vh absolute z-50 max-h-[95vh] w-[350rem] max-w-[95vw] overflow-y-auto  rounded-md bg-neutral-50 p-4 shadow-md shadow-black/30 "
+          className={`[border:2px inset #afafaf33] fixed z-30 -m-2 p-3 text-left text-sm shadow shadow-gray-400 transition-opacity duration-300 [background-color:rgba(247,247,247,0.95)]  [border-radius:0.3em] [box-sizing:border-box] [overflow-y:auto]  [max-height:400px] [width:30rem] md:max-w-[75vw]`}
           {...hoverPopover.attributes.popper}
           style={hoverPopover.styles.popper}
         >

diff --git a/app/features/dictionary/SingleFigureDictionaryEntry.tsx b/app/features/dictionary/SingleFigureDictionaryEntry.tsx
@@ -225,13 +225,16 @@ export function SingleFigureDictionaryEntry({
           )}
           {isUnicodeCharacter ? (
             <div className="flex flex-grow flex-wrap gap-4 [min-width:19rem] max-lg:justify-between lg:flex-col lg:flex-nowrap lg:justify-end">
-              <div className="px-4 [min-width:10rem]">
-                in your browser: <span className="text-2xl">{figure.id}</span>{" "}
-                U+{figure.id.codePointAt(0)?.toString(16).toUpperCase()}
-                <br />{" "}
-                {radicalIndexes?.length ? (
-                  <RadicalSection radicalIndexes={radicalIndexes} />
-                ) : null}
+              <div className="flex flex-col gap-2 px-4 [min-width:10rem]">
+                <span>
+                  in your browser: <span className="text-2xl">{figure.id}</span>{" "}
+                  U+{figure.id.codePointAt(0)?.toString(16).toUpperCase()}
+                </span>
+                <div>
+                  {radicalIndexes?.length ? (
+                    <RadicalSection radicalIndexes={radicalIndexes} />
+                  ) : null}
+                </div>
               </div>
 
               {figureIsStandaloneCharacter || figure.isPriority ? (