overflow touch

zaknesler · May 6, 2024 · fb9089c · fb9089c
1 parent 3129874
commit fb9089c
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -45,6 +45,9 @@ export default {
     kobaltePlugin({ prefix: 'ui' }),
     plugin(({ addComponents }) => {
       addComponents({
+        '.overflow-touch-scrolling': {
+          '-webkit-overflow-scrolling': 'touch',
+        },
         '.scrollbar-hide': {
           scrollbarWidth: 'none',
           '-webkit-overflow-scrolling': 'touch',

diff --git a/ui/index.html b/ui/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" class="h-full">
+<html lang="en" class="h-full overflow-hidden">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -9,9 +9,9 @@
     <link href="https://fonts.googleapis.com/css2?family=Lora:wght@400;600&display=swap" rel="stylesheet">
     <title>Blend</title>
   </head>
-  <body class="h-full bg-gray-100 dark:bg-gray-950 text-gray-800 dark:text-gray-200 relative">
+  <body class="h-full bg-gray-100 dark:bg-gray-950 text-gray-800 dark:text-gray-200 relative overflow-hidden">
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root" class="h-full"></div>
+    <div id="root" class="h-full overflow-hidden"></div>
     <script type="module" src="./src/index.tsx"></script>
   </body>
 </html>
diff --git a/ui/src/components/layout/panel.tsx b/ui/src/components/layout/panel.tsx
@@ -7,7 +7,13 @@ export const Panel: ParentComponent<PanelProps> = props => {
   const [local, rest] = splitProps(props, ['class']);
 
   return (
-    <div {...rest} class={cx('flex-1 overflow-auto bg-white md:rounded-lg md:shadow-md dark:bg-gray-900', local.class)}>
+    <div
+      {...rest}
+      class={cx(
+        'overflow-touch-scrolling flex-1 overflow-auto bg-white md:rounded-lg md:shadow-md dark:bg-gray-900',
+        local.class,
+      )}
+    >
       {props.children}
     </div>
   );