improve website

website/src/assets/css/styles.css

@@ -16,3 +16,16 @@
   font-weight: 800;
   font-style: normal;
 }
+
+/* disable ios bounce on overscroll */
+html,
+body,
+.os-viewport,
+[data-overlayscrollbars='viewport'] {
+  overscroll-behavior: none;
+}
+
+/* elements wont be suddenly cropped after initialization is done */
+[data-overlayscrollbars-initialize]:not([data-overlayscrollbars]):not(html) {
+  overflow: auto;
+}

website/src/components/index.mdx

@@ -23,12 +23,12 @@ I created this plugin because I hate ugly and space consuming scrollbars. Simila
 
 Additionally to the vanilla JavaScript version you can use the official framework components & utilities:
 
-<div className="flex">
-  <a href="https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-react"><img className="h-[80px] mx-1" src="https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-react/logo.svg" width="80" height="80" alt="React" /></a>
-  <a href="https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-vue"><img className="h-[80px] mx-1" src="https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-vue/logo.svg" width="80" height="80" alt="Vue" /></a>
-  <a href="https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-ngx"><img className="h-[80px] mx-1" src="https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-ngx/logo.svg" width="80" height="80" alt="Angular" /></a>
-  <a href="https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-svelte"><img className="h-[80px] mx-1" src="https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-svelte/logo.svg" width="80" height="80" alt="Svelte" /></a>
-  <a href="https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-solid"><img className="h-[80px] mx-1" src="https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-solid/logo.svg" width="80" height="80" alt="Solid" /></a>
+<div className="flex flex-wrap">
+  <a className="flex-grow-0 flex-shrink-0" href="https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-react"><img className="h-[80px] mx-1 my-1" src="https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-react/logo.svg" width="80" height="80" alt="React" /></a>
+  <a className="flex-grow-0 flex-shrink-0" href="https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-vue"><img className="h-[80px] mx-1 my-1" src="https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-vue/logo.svg" width="80" height="80" alt="Vue" /></a>
+  <a className="flex-grow-0 flex-shrink-0" href="https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-ngx"><img className="h-[80px] mx-1 my-1" src="https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-ngx/logo.svg" width="80" height="80" alt="Angular" /></a>
+  <a className="flex-grow-0 flex-shrink-0" href="https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-svelte"><img className="h-[80px] mx-1 my-1" src="https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-svelte/logo.svg" width="80" height="80" alt="Svelte" /></a>
+  <a className="flex-grow-0 flex-shrink-0" href="https://github.com/KingSora/OverlayScrollbars/tree/master/packages/overlayscrollbars-solid"><img className="h-[80px] mx-1 my-1" src="https://raw.githubusercontent.com/KingSora/OverlayScrollbars/master/packages/overlayscrollbars-solid/logo.svg" width="80" height="80" alt="Solid" /></a>
 </div>
 
 ## Getting started

website/src/pages/index.module.scss

@@ -14,6 +14,7 @@
     background-position: center;
     background-repeat: no-repeat;
     z-index: -1;
+    transform: translateZ(0);
   }
   &::before {
     filter: blur(33px) saturate(1.22);

website/src/pages/index.tsx

@@ -36,18 +36,22 @@ const IndexPage: NextPage = () => {
     <PageContainer className="px-6">
       <div className="mt-8 flex justify-center items-center h-[33vh] min-h-32 max-h-40 xxs:max-h-44">
         <div className={classnames('h-full', styles.logo)}>
-          <img src={logo.src} className="h-full" alt="Overlay Scrollbars Logo" />
+          <img src={logo.src} className="h-full" alt="OverlayScrollbars Logo" />
         </div>
       </div>
-      <h1 className="text-center xxs:text-4xl text-2xl font-bold my-11">Overlay Scrollbars</h1>
+      <h1 className="text-center xxs:text-4xl text-2xl font-bold my-11">
+        Overlay
+        <wbr />
+        Scrollbars
+      </h1>
       <p className="text-center mx-auto max-w-screen-sm my-11 font-medium">
         A javascript scrollbar plugin that hides native scrollbars, provides custom styleable
         overlay scrollbars and keeps the native functionality and feeling.
       </p>
       {separator('used by')}
       <div ref={usedByRef}>
-        <div className="flex my-7 justify-center">
-          <div className={classnames('inline-flex  items-center gap-6 py-4', styles.usedBy)}>
+        <div className="flex justify-center">
+          <div className={classnames('inline-flex  items-center gap-6 py-6', styles.usedBy)}>
             <div
               className="h-11 px-3 flex-grow flex-shrink-0"
               style={{ filter: 'brightness(0.35)' }}>