Merge pull request #2944 from ingef/feature/result-assets-frontend-al…

…ignment-patch Fix tooltip alignment with popperOptions using padding instead of skidding
ingef · Feb 20, 2023 · 9edecc9 · 9edecc9
2 parents 9f7fba2 + e508d54
commit 9edecc9
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 5 deletions.
diff --git a/frontend/mock-api/index.js b/frontend/mock-api/index.js
@@ -110,7 +110,7 @@ module.exports = function (app, port) {
   );
 
   app.get("/api/queries/:id", mockAuthMiddleware, function response(req, res) {
-    if (req.params.id !== 1) {
+    if (req.params.id !== "1") {
       setTimeout(() => {
         res.sendFile(path.join(__dirname, "./stored-queries/25.json"));
       }, LONG_DELAY);
@@ -149,6 +149,7 @@ module.exports = function (app, port) {
             JSON.stringify({
               id: 1,
               status: "DONE",
+              label: "Test result",
               numberOfResults: 5,
               resultUrls: [
                 {

diff --git a/frontend/mock-api/stored-queries/25.json b/frontend/mock-api/stored-queries/25.json
@@ -2,6 +2,7 @@
   "id": 25,
   "status": "DONE",
   "numberOfResults": 5,
+  "label": "Result list",
   "resultUrls": [
     {
       "label": "Alle Dateien",

diff --git a/frontend/src/js/query-runner/DownloadResultsDropdownButton.tsx b/frontend/src/js/query-runner/DownloadResultsDropdownButton.tsx
@@ -40,9 +40,16 @@ const Separator = styled("div")`
   background-color: ${({ theme }) => theme.col.gray};
 `;
 
-// Skidding makes Dropdown align the right edge with the button,
-// might need to adjust this when adding more content.
-const dropdownOffset: [number, number] = [-37, 8]; // [skidding, distance] / default [0, 10]
+const popperOptions = {
+  modifiers: [
+    {
+      name: "preventOverflow",
+      options: {
+        padding: 20,
+      },
+    },
+  ],
+};
 
 interface FileChoice {
   label: string;
@@ -143,7 +150,7 @@ const DownloadResultsDropdownButton = ({
           interactive
           arrow={false}
           trigger="click"
-          offset={dropdownOffset}
+          popperOptions={popperOptions}
         >
           <SxIconButton bgHover icon={tiny ? "download" : "caret-down"} />
         </WithTooltip>

diff --git a/frontend/src/js/tooltip/WithTooltip.tsx b/frontend/src/js/tooltip/WithTooltip.tsx
@@ -66,6 +66,7 @@ interface Props {
   arrow?: TippyProps["arrow"];
   offset?: TippyProps["offset"];
   hideOnClick?: TippyProps["hideOnClick"];
+  popperOptions?: TippyProps["popperOptions"];
 
   // Some others are possible in @tippyjs/react, but those should be enough
   // default: "auto"
@@ -90,6 +91,7 @@ const WithTooltip = forwardRef<HTMLElement, Props>(
       arrow,
       offset,
       hideOnClick,
+      popperOptions,
     },
     ref,
   ) => {
@@ -128,6 +130,7 @@ const WithTooltip = forwardRef<HTMLElement, Props>(
         offset={offset}
         ref={ref}
         zIndex={9999}
+        popperOptions={popperOptions}
         hideOnClick={hideOnClick}
       >
         {children}