Merge pull request #126 from chanzuckerberg/jeremy/fix-toc-height

Fix height for multiline TOC items
chanzuckerberg · Jun 30, 2021 · a50ed40 · a50ed40
2 parents 979320d + 4847d7d
commit a50ed40
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 11 deletions.
diff --git a/client/src/components/PluginDetails/__snapshots__/PluginDetails.test.tsx.snap b/client/src/components/PluginDetails/__snapshots__/PluginDetails.test.tsx.snap
@@ -1506,7 +1506,7 @@ the coverage at least stays the same before you submit a pull request.
         class="mt-9 flex flex-col border-l border-black"
       >
         <li
-          class="flex pl-6 h-6 border-l-4 my-2 first:mt-0 last:mb-0 transition-colors hover:border-napari-primary border-transparent"
+          class="flex pl-6 border-l-4 min-h-6 h-auto my-2 first:mt-0 last:mb-0 transition-colors hover:border-napari-primary border-transparent"
           data-active="false"
           data-testid="tocItem"
         >
@@ -1518,7 +1518,7 @@ the coverage at least stays the same before you submit a pull request.
           </a>
         </li>
         <li
-          class="flex pl-6 h-6 border-l-4 my-2 first:mt-0 last:mb-0 transition-colors hover:border-napari-primary border-transparent"
+          class="flex pl-6 border-l-4 min-h-6 h-auto my-2 first:mt-0 last:mb-0 transition-colors hover:border-napari-primary border-transparent"
           data-active="false"
           data-testid="tocItem"
         >
@@ -1530,7 +1530,7 @@ the coverage at least stays the same before you submit a pull request.
           </a>
         </li>
         <li
-          class="flex pl-6 h-6 border-l-4 my-2 first:mt-0 last:mb-0 transition-colors hover:border-napari-primary border-transparent"
+          class="flex pl-6 border-l-4 min-h-6 h-auto my-2 first:mt-0 last:mb-0 transition-colors hover:border-napari-primary border-transparent"
           data-active="false"
           data-testid="tocItem"
         >
@@ -1542,7 +1542,7 @@ the coverage at least stays the same before you submit a pull request.
           </a>
         </li>
         <li
-          class="flex pl-6 h-6 border-l-4 my-2 first:mt-0 last:mb-0 transition-colors hover:border-napari-primary border-transparent"
+          class="flex pl-6 border-l-4 min-h-6 h-auto my-2 first:mt-0 last:mb-0 transition-colors hover:border-napari-primary border-transparent"
           data-active="false"
           data-testid="tocItem"
         >
@@ -1554,7 +1554,7 @@ the coverage at least stays the same before you submit a pull request.
           </a>
         </li>
         <li
-          class="flex pl-6 h-6 border-l-4 my-2 first:mt-0 last:mb-0 transition-colors hover:border-napari-primary border-transparent"
+          class="flex pl-6 border-l-4 min-h-6 h-auto my-2 first:mt-0 last:mb-0 transition-colors hover:border-napari-primary border-transparent"
           data-active="false"
           data-testid="tocItem"
         >
@@ -1566,7 +1566,7 @@ the coverage at least stays the same before you submit a pull request.
           </a>
         </li>
         <li
-          class="flex pl-6 h-6 border-l-4 my-2 first:mt-0 last:mb-0 transition-colors hover:border-napari-primary border-transparent"
+          class="flex pl-6 border-l-4 min-h-6 h-auto my-2 first:mt-0 last:mb-0 transition-colors hover:border-napari-primary border-transparent"
           data-active="false"
           data-testid="tocItem"
         >
@@ -1578,7 +1578,7 @@ the coverage at least stays the same before you submit a pull request.
           </a>
         </li>
         <li
-          class="flex pl-6 h-6 border-l-4 my-2 first:mt-0 last:mb-0 transition-colors hover:border-napari-primary border-transparent"
+          class="flex pl-6 border-l-4 min-h-6 h-auto my-2 first:mt-0 last:mb-0 transition-colors hover:border-napari-primary border-transparent"
           data-active="false"
           data-testid="tocItem"
         >
@@ -1590,7 +1590,7 @@ the coverage at least stays the same before you submit a pull request.
           </a>
         </li>
         <li
-          class="flex pl-6 h-6 border-l-4 my-2 first:mt-0 last:mb-0 transition-colors hover:border-napari-primary border-black"
+          class="flex pl-6 border-l-4 min-h-6 h-auto my-2 first:mt-0 last:mb-0 transition-colors hover:border-napari-primary border-black"
           data-active="true"
           data-testid="tocItem"
         >

diff --git a/client/src/components/common/TableOfContents/TableOfContents.tsx b/client/src/components/common/TableOfContents/TableOfContents.tsx
@@ -52,7 +52,11 @@ export function TableOfContents({ className, onClick, headers, free }: Props) {
               // 'flex items-center',
 
               // Box model
-              'pl-6 h-6 border-l-4',
+              'pl-6 border-l-4',
+
+              // Ensure height is at least 25px, but also allow scaling for
+              // multiline items.
+              'min-h-6 h-auto',
 
               // Apply top/bottom margins except for first/last items
               'my-2 first:mt-0 last:mb-0',

diff --git a/client/src/components/common/TableOfContents/__snapshots__/TableOfContents.test.tsx.snap b/client/src/components/common/TableOfContents/__snapshots__/TableOfContents.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Table of Contents should match snapshot 1`] = `
     class="flex flex-col border-l border-black sticky top-12"
   >
     <li
-      class="flex pl-6 h-6 border-l-4 my-2 first:mt-0 last:mb-0 transition-colors hover:border-napari-primary border-black"
+      class="flex pl-6 border-l-4 min-h-6 h-auto my-2 first:mt-0 last:mb-0 transition-colors hover:border-napari-primary border-black"
       data-active="true"
       data-testid="tocItem"
     >
@@ -18,7 +18,7 @@ exports[`Table of Contents should match snapshot 1`] = `
       </a>
     </li>
     <li
-      class="flex pl-6 h-6 border-l-4 my-2 first:mt-0 last:mb-0 transition-colors hover:border-napari-primary border-transparent"
+      class="flex pl-6 border-l-4 min-h-6 h-auto my-2 first:mt-0 last:mb-0 transition-colors hover:border-napari-primary border-transparent"
       data-active="false"
       data-testid="tocItem"
     >

diff --git a/client/tailwind.config.js b/client/tailwind.config.js
@@ -70,6 +70,7 @@ module.exports = {
 
       maxWidth: (theme) => theme('width'),
       minWidth: (theme) => theme('width'),
+      minHeight: (theme) => theme('height'),
     },
   },
 };