Add floating info box

Author: MartinBraquet

web/components/bio/profile-bio.tsx

@@ -1,11 +1,61 @@
 import {Profile} from 'common/love/profile'
-import {useEffect, useState} from 'react'
+import React, {useEffect, useState} from 'react'
 import {Col} from 'web/components/layout/col'
 import {Subtitle} from '../widgets/profile-subtitle'
 import {BioBlock} from './profile-bio-block'
 import {MAX_INT, MIN_BIO_LENGTH} from "common/constants";
 import {useTextEditor} from "web/components/widgets/editor";
 import {JSONContent} from "@tiptap/core"
+import {flip, offset, shift, useFloating} from "@floating-ui/react-dom";
+
+export default function TooShortBio() {
+  const [open, setOpen] = useState(false);
+  const {y, refs, strategy} = useFloating({
+    placement: "bottom", // place below the trigger
+    middleware: [
+      offset(8), // small gap between ? and box
+      flip(),
+      shift({padding: 8}), // prevent viewport clipping
+    ],
+  });
+
+  return (
+    <p className="text-red-600">
+      Bio too short. Profile may be filtered from search results.{" "}
+      <span
+        className="inline-flex align-middle"
+        onMouseEnter={() => setOpen(true)}
+        onMouseLeave={() => setOpen(false)}
+        ref={refs.setReference}
+      >
+        <span
+          className="cursor-help text-red-600 border border-red-600 rounded-full w-5 h-5 inline-flex items-center justify-center align-middle">
+          ?
+        </span>
+      </span>
+
+      {open && (
+        <div
+          ref={refs.setFloating}
+          style={{
+            position: strategy,
+            top: y ?? 0,
+            left: "50%",
+            transform: `translateX(-50%)`,
+          }}
+          className="p-3 bg-canvas-50 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 z-50 transition-opacity w-72 max-w-[calc(100vw-1rem)] whitespace-normal break-words"
+        >
+          <p className="text-sm text-gray-800 dark:text-gray-100">
+            Since your bio is too short, Compass' algorithm filters out your
+            profile from search results (unless "Include short bios" is
+            selected). This ensures searches show meaningful profiles.
+          </p>
+        </div>
+      )}
+    </p>
+  );
+}
+
 
 export function ProfileBio(props: {
   isCurrentUser: boolean
@@ -29,23 +79,7 @@ export function ProfileBio(props: {
 
   return (
     <Col>
-      {textLength < MIN_BIO_LENGTH && !edit && (
-        <div className="group relative inline-block">
-          <p className="text-red-600 cursor-help flex items-center gap-1">
-            Bio too short. Profile may be filtered from search results.
-            <span className="text-xs border border-red-600 rounded px-1 animate-pulse">
-              Hover for details
-            </span>
-          </p>
-          <div
-            className="invisible group-hover:visible absolute left-0 top-full mt-2 p-3 bg-canvas-50 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 w-72 z-10">
-            <p className="text-sm">
-              Since your bio is too short, Compass' algorithm filters out your profile from search results (unless
-              "Include short bios" is selected). This ensures searches show meaningful profiles.
-            </p>
-          </div>
-        </div>
-      )}
+      {textLength < MIN_BIO_LENGTH && !edit && <TooShortBio/>}
       <Subtitle className="mb-4">About Me</Subtitle>
       <BioBlock
         isCurrentUser={isCurrentUser}

web/package.json

@@ -20,6 +20,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.19.0",
+    "@floating-ui/react-dom": "2.1.6",
     "@google-cloud/secret-manager": "4.2.1",
     "@headlessui/react": "1.7.11",
     "@heroicons/react": "1.0.6",

yarn.lock

@@ -1612,6 +1612,13 @@
   dependencies:
     "@floating-ui/utils" "^0.2.0"
 
+"@floating-ui/core@^1.7.3":
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.7.3.tgz#462d722f001e23e46d86fd2bd0d21b7693ccb8b7"
+  integrity sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==
+  dependencies:
+    "@floating-ui/utils" "^0.2.10"
+
 "@floating-ui/dom@^1.2.1":
   version "1.6.5"
   resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.6.5.tgz#323f065c003f1d3ecf0ff16d2c2c4d38979f4cb9"
@@ -1620,6 +1627,21 @@
     "@floating-ui/core" "^1.0.0"
     "@floating-ui/utils" "^0.2.0"
 
+"@floating-ui/dom@^1.7.4":
+  version "1.7.4"
+  resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.7.4.tgz#ee667549998745c9c3e3e84683b909c31d6c9a77"
+  integrity sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==
+  dependencies:
+    "@floating-ui/core" "^1.7.3"
+    "@floating-ui/utils" "^0.2.10"
+
+"@floating-ui/[email protected]":
+  version "2.1.6"
+  resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-2.1.6.tgz#189f681043c1400561f62972f461b93f01bf2231"
+  integrity sha512-4JX6rEatQEvlmgU80wZyq9RT96HZJa88q8hp0pBd+LrczeDI4o6uA2M+uvxngVHo4Ihr8uibXxH6+70zhAFrVw==
+  dependencies:
+    "@floating-ui/dom" "^1.7.4"
+
 "@floating-ui/react-dom@^1.2.2":
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-1.3.0.tgz#4d35d416eb19811c2b0e9271100a6aa18c1579b3"
@@ -1641,6 +1663,11 @@
   resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.2.tgz#d8bae93ac8b815b2bd7a98078cf91e2724ef11e5"
   integrity sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw==
 
+"@floating-ui/utils@^0.2.10":
+  version "0.2.10"
+  resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.10.tgz#a2a1e3812d14525f725d011a73eceb41fef5bc1c"
+  integrity sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==
+
 "@google-cloud/firestore@^7.11.0":
   version "7.11.3"
   resolved "https://registry.yarnpkg.com/@google-cloud/firestore/-/firestore-7.11.3.tgz#87cc3a58c5c297d6c9ca0e486fbf16b403585721"