fix: Horizontal scrolling Problem in the website #3916

.gitpod.yml

@@ -0,0 +1,11 @@
+# This configuration file was automatically generated by Gitpod.
+# Please adjust to your needs (see https://www.gitpod.io/docs/introduction/learn-gitpod/gitpod-yaml)
+# and commit this file to your remote git repository to share the goodness with others.
+
+# Learn more from ready-to-use templates: https://www.gitpod.io/docs/introduction/getting-started/quickstart
+
+tasks:
+  - init: yarn install && yarn run build
+    command: yarn run dev
+
+

.vscode/settings.json

@@ -2,6 +2,6 @@
   "typescript.tsdk": "node_modules/typescript/lib",
   "editor.formatOnSave": false,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
 }

website/src/components/Nav.tsx

@@ -8,7 +8,7 @@ import { Logo } from './Logo';
 export const Nav: React.FC = () => {
   const router = useRouter();
   return (
-    <div className="bg-white border-b border-gray-200">
+    <div className="bg-white border-b border-gray-200 ">
       <div className="container px-4 lg:px-0 mx-auto">
         <div className="grid grid-cols-1 md:grid-cols-12 md:gap-8">
           <div className="md:col-span-3 flex items-center justify-between h-16">

website/src/pages/_app.js

@@ -4,10 +4,10 @@ import { Analytics } from '@vercel/analytics/react';
 
 function MyApp({ Component, pageProps }) {
   return (
-    <>
+    <div id='container'>
       <Component {...pageProps} />
       <Analytics />
-    </>
+    </div>
   );
 }
 

website/src/styles/index.css

@@ -190,3 +190,7 @@ details > summary {
 
 @tailwind utilities;
 /* purgecss end ignore */
+
+#container{
+overflow-x: hidden;
+}