Merge pull request #1490 from nextstrain/fix/web-md-details

nextstrain · Jun 19, 2024 · eef7019 · eef7019
2 parents 27d1c32 + 42f3aee
commit eef7019
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 16 deletions.
diff --git a/packages/nextclade-web/src/mdx-components.tsx b/packages/nextclade-web/src/mdx-components.tsx
@@ -123,6 +123,33 @@ function Table({ ...restProps }) {
   return <TableSlim striped {...restProps} />
 }
 
+export const Details = styled.details`
+  & {
+    overflow: hidden;
+    position: relative;
+    border: 1px #ccc9 solid;
+    border-radius: 5px;
+    background-color: ${(props) => props.theme.gray100};
+  }
+
+  &[open] {
+    max-height: 300px;
+    overflow-y: auto;
+  }
+
+  & summary {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    padding: 0.7rem;
+    cursor: pointer;
+    font-weight: bold;
+    border: 1px #ccc9 solid;
+    border-radius: 5px;
+    background-color: ${(props) => props.theme.gray200};
+  }
+`
+
 export const mdxComponents = {
   h1: H1,
   h2: H2,
@@ -137,4 +164,5 @@ export const mdxComponents = {
   pre: Pre,
   code: Code,
   table: Table,
+  details: Details,
 }
diff --git a/packages/nextclade-web/src/styles/global.scss b/packages/nextclade-web/src/styles/global.scss
@@ -124,22 +124,6 @@ body {
   cursor: pointer;
 }
 
-details {
-  height: auto;
-  max-height: 5rem;
-  transition: all 0.25s ease;
-}
-
-details[open] {
-  max-height: 99rem;
-  transition: all 0.25s ease;
-}
-
-details summary {
-  cursor: pointer;
-  font-weight: bold;
-}
-
 small {
   line-height: 100% !important;
 }