From 3469b5bfe9b79240ba1d7162e3b8eda5f60d32b4 Mon Sep 17 00:00:00 2001
From: DrMint <thomas@barillot.net>
Date: Fri, 13 May 2022 21:06:46 +0200
Subject: [PATCH] Improved layout on mobile and avoid overflow

---
 src/components/Panels/ContentPanel.tsx | 2 +-
 src/components/PreviewCard.tsx         | 6 +++---
 src/pages/contents/index.tsx           | 2 +-
 src/pages/library/index.tsx            | 2 +-
 tailwind.config.js                     | 8 ++++++++
 5 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/components/Panels/ContentPanel.tsx b/src/components/Panels/ContentPanel.tsx
index da23a00..2f6beb5 100644
--- a/src/components/Panels/ContentPanel.tsx
+++ b/src/components/Panels/ContentPanel.tsx
@@ -17,7 +17,7 @@ export default function ContentPanel(props: Immutable<Props>): JSX.Element {
     width === ContentPanelWidthSizes.default ? "max-w-2xl" : "w-full";
 
   return (
-    <div className={`grid pt-10 pb-20 px-6 desktop:py-20 desktop:px-10`}>
+    <div className={`grid pt-10 pb-20 px-4 desktop:py-20 desktop:px-10`}>
       <main
         className={`${
           props.autoformat && "formatted"
diff --git a/src/components/PreviewCard.tsx b/src/components/PreviewCard.tsx
index 45a02e3..b0603e3 100644
--- a/src/components/PreviewCard.tsx
+++ b/src/components/PreviewCard.tsx
@@ -174,11 +174,11 @@ export default function PreviewCard(props: Immutable<Props>): JSX.Element {
             </div>
           )}
           <div className="my-1">
-            {pre_title && <p className="leading-none mb-1">{pre_title}</p>}
+            {pre_title && <p className="leading-none mb-1 break-words">{pre_title}</p>}
             {title && (
-              <p className="font-headers text-lg leading-none">{title}</p>
+              <p className="font-headers text-lg leading-none break-words">{title}</p>
             )}
-            {subtitle && <p className="leading-none">{subtitle}</p>}
+            {subtitle && <p className="leading-none break-words">{subtitle}</p>}
           </div>
           {description && <p>{description}</p>}
           {bottomChips && bottomChips.length > 0 && (
diff --git a/src/pages/contents/index.tsx b/src/pages/contents/index.tsx
index 301421a..7693689 100644
--- a/src/pages/contents/index.tsx
+++ b/src/pages/contents/index.tsx
@@ -83,7 +83,7 @@ export default function Contents(props: Immutable<Props>): JSX.Element {
               )}
               <div
                 key={`items${name}`}
-                className="grid gap-8 items-end grid-cols-2
+                className="grid gap-8 mobile:gap-4 items-end grid-cols-2
                 desktop:grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))]"
               >
                 {items.map((item) => (
diff --git a/src/pages/library/index.tsx b/src/pages/library/index.tsx
index 2e9696b..ec9f9f4 100644
--- a/src/pages/library/index.tsx
+++ b/src/pages/library/index.tsx
@@ -156,7 +156,7 @@ export default function Library(props: Immutable<Props>): JSX.Element {
               )}
               <div
                 key={`items${name}`}
-                className="grid gap-8 items-end mobile:grid-cols-2
+                className="grid gap-8 mobile:gap-4 items-end mobile:grid-cols-2
                 desktop:grid-cols-[repeat(auto-fill,_minmax(13rem,1fr))]
                 pb-12 border-b-[3px] border-dotted last-of-type:border-0"
               >
diff --git a/tailwind.config.js b/tailwind.config.js
index 5beab85..03baaca 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -159,5 +159,13 @@ module.exports = {
         },
       });
     }),
+
+    plugin(function ({ addUtilities }) {
+      addUtilities({
+        ".break-words": {
+          "word-break": "break-word",
+        },
+      });
+    }),
   ],
 };