Fix plugin scrollbar (#181)

penpot · Jun 19, 2024 · bc33c0e · bc33c0e
1 parent 551d00e
commit bc33c0e
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 15 deletions.
diff --git a/.changeset/few-apes-smell.md b/.changeset/few-apes-smell.md
@@ -0,0 +1,5 @@
+---
+"penpot-exporter": patch
+---
+
+Fix scrollbar showing up randomly
diff --git a/package-lock.json b/package-lock.json
diff --git a/ui-src/components/Wrapper/Wrapper.module.css b/ui-src/components/Wrapper/Wrapper.module.css
@@ -1,7 +1,3 @@
 .wrapper {
   padding: 1.5rem 1rem 1rem;
-
-  .wrapper-overflow {
-    /* Empty class used to detect overflow on the body */
-  }
 }
diff --git a/ui-src/components/Wrapper/Wrapper.tsx b/ui-src/components/Wrapper/Wrapper.tsx
@@ -1,4 +1,3 @@
-import classNames from 'classnames';
 import { CSSProperties, PropsWithChildren, forwardRef } from 'react';
 
 import styles from './Wrapper.module.css';
@@ -11,11 +10,7 @@ type WrapperProps = PropsWithChildren & {
 const Wrapper = forwardRef<HTMLDivElement, WrapperProps>(
   ({ style, overflowing = false, children }: WrapperProps, ref) => {
     return (
-      <div
-        ref={ref}
-        className={classNames({ [styles.wrapper]: true, [styles.wrapperOverflow]: overflowing })}
-        style={style}
-      >
+      <div ref={ref} className={styles.wrapper} style={style} data-overflowing={overflowing}>
         {children}
       </div>
     );

diff --git a/ui-src/index.html b/ui-src/index.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Penpot Exporter</title>
   </head>
-  <body>
+  <body style="overflow-y: hidden">
     <div id="root"></div>
     <script type="module" src="./main.tsx"></script>
   </body>

diff --git a/ui-src/main.css b/ui-src/main.css
@@ -1,3 +1,3 @@
-body :not:has(.wrapper-overflow) {
-  overflow-y: hidden;
+body:has(div[data-overflowing='true']) {
+  overflow-y: visible !important;
 }