fix: annotation - z-index (#1950)

strapi · Dec 12, 2023 · b3df36e · b3df36e · vercel · Dec 13, 2023
1 parent 9772945
commit b3df36e
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 2 deletions.
diff --git a/docusaurus/src/components/Annotation/Annotation.jsx b/docusaurus/src/components/Annotation/Annotation.jsx
@@ -92,6 +92,7 @@ export function Annotation({ children, id, width = 320 }) {
         style={{
           '--strapi-docs-annotation-toggle-icon-rotation': open ? '0deg' : undefined,
           '--strapi-docs-annotation-toggle-background': open ? 'var(--strapi-docs-annotation-toggle-background-active)' : undefined,
+          '--strapi-docs-annotation-toggle-z-index': open ? 'calc(var(--strapi-docs-annotation-z-index) + 2)' : undefined,
         }}
       >
         <svg

diff --git a/docusaurus/src/components/Annotation/annotation.module.scss b/docusaurus/src/components/Annotation/annotation.module.scss
@@ -6,6 +6,7 @@
   --strapi-docs-annotation-toggle-background-active: var(--custom-selection-background-color);
   --strapi-docs-annotation-tooltip-left: calc(var(--ifm-spacing-horizontal) * 2);
   --strapi-docs-annotation-tooltip-right: calc(var(--ifm-spacing-horizontal) * 2);
+  --strapi-docs-annotation-z-index: 20;
 
   position: var(--strapi-docs-annotation-position);
 
@@ -26,7 +27,7 @@
     margin: 0;
     padding: var(--strapi-spacing-2);
     margin: calc(var(--strapi-spacing-1) * -1) calc(var(--strapi-spacing-1) * -0.5);
-    z-index: 20;
+    z-index: var(--strapi-docs-annotation-toggle-z-index, var(--strapi-docs-annotation-z-index));
 
     &:before {
       --strapi-docs-annotation-toggle-background-distance: calc(var(--strapi-spacing-1) / 1.5);
@@ -67,7 +68,7 @@
     top: var(--strapi-docs-annotation-tooltip-top);
     left: var(--strapi-docs-annotation-tooltip-left, var(--ifm-spacing-horizontal));
     right: var(--strapi-docs-annotation-tooltip-right, var(--ifm-spacing-horizontal));
-    z-index: 10;
+    z-index: calc(var(--strapi-docs-annotation-z-index) + 1);
     background: var(--ifm-background-color);
     color: var(--ifm-font-color-base);
     font-size: 90%;

diff --git a/docusaurus/src/scss/table.scss b/docusaurus/src/scss/table.scss
@@ -1,6 +1,7 @@
 /** Component: Table */
 table {
   min-width: 100%;
+  overflow: initial; // helps to use <Annotation> component inside a Table
 
   thead {
     --ifm-table-background: transparent;