fix: horizontal scrollbar appearing on small screen (#6680)

* fix: horizontal scrollbar appearing on small screen

* refactor: usage of tailwind break-all class

Co-authored-by: Caner Akdas <[email protected]>
Signed-off-by: Théo LUDWIG <[email protected]>

* refactor: usage of tailwind bracket class

Co-authored-by: Caner Akdas <[email protected]>
Signed-off-by: Théo LUDWIG <[email protected]>

* chore: delete additional space layouts/layouts.module.css

Co-authored-by: Caner Akdas <[email protected]>
Signed-off-by: Théo LUDWIG <[email protected]>

* style: fix linting

---------

Signed-off-by: Théo LUDWIG <[email protected]>
Co-authored-by: Caner Akdas <[email protected]>

Author: theoludwig

components/Containers/Footer/index.module.css

@@ -6,10 +6,10 @@
     border-t
     border-neutral-200
     bg-white
-    px-8
     py-4
     dark:border-neutral-900
     dark:bg-neutral-950
+    sm:px-8
     md:flex-row
     md:justify-between
     md:py-5;

components/Containers/MetaBar/index.module.css

@@ -8,6 +8,7 @@
     border-l-neutral-200
     px-4
     py-6
+    [overflow-wrap:anywhere]
     dark:border-l-neutral-900
     md:max-w-xs
     lg:px-6

layouts/layouts.module.css

@@ -214,7 +214,8 @@
 
     main {
       @apply max-w-[660px]
-        gap-4;
+        gap-4
+        break-all;
     }
   }
 }