Improved layout on mobile and avoid overflow

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"

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 && (

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) => (

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"
               >

tailwind.config.js

@@ -159,5 +159,13 @@ module.exports = {
         },
       });
     }),
+
+    plugin(function ({ addUtilities }) {
+      addUtilities({
+        ".break-words": {
+          "word-break": "break-word",
+        },
+      });
+    }),
   ],
 };