From 9e6e132a908a0a50efde539315da211c84553e28 Mon Sep 17 00:00:00 2001
From: Josh Pullen <JoshPullen27@gmail.com>
Date: Mon, 8 Jul 2024 10:38:40 -0400
Subject: [PATCH] Remove default max-width on tailwind prose

---
 app/(content)/privacy-policy/page.tsx |  2 +-
 app/admin/projects/[id]/page.tsx      |  2 +-
 app/admin/projects/assetScan/page.tsx |  2 +-
 app/admin/projects/page.tsx           |  2 +-
 app/admin/users/[id]/page.tsx         |  2 +-
 app/admin/users/page.tsx              |  2 +-
 tailwind.config.js                    | 30 +++++++++++++++++++++++++++
 7 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/app/(content)/privacy-policy/page.tsx b/app/(content)/privacy-policy/page.tsx
index b7ffd39..13edfce 100644
--- a/app/(content)/privacy-policy/page.tsx
+++ b/app/(content)/privacy-policy/page.tsx
@@ -9,7 +9,7 @@ export default function PrivacyPolicyPage() {
         <div className="mb-6 text-sm italic text-gray-700">
           Last updated: <time>June 25th, 2024</time>
         </div>
-        <div className="prose prose-sm max-w-full sm:prose-base">
+        <div className="prose prose-sm sm:prose-base">
           <div className="relative flex gap-4 rounded-2xl border border-dashed border-indigo-200 bg-indigo-100 p-8">
             <svg
               xmlns="http://www.w3.org/2000/svg"
diff --git a/app/admin/projects/[id]/page.tsx b/app/admin/projects/[id]/page.tsx
index f5f0362..1ac9174 100644
--- a/app/admin/projects/[id]/page.tsx
+++ b/app/admin/projects/[id]/page.tsx
@@ -46,7 +46,7 @@ export default async function AdminProjectPage({
   }
 
   return (
-    <div className="prose max-w-full">
+    <div className="prose">
       <h1>{project.title}</h1>
       <ul>
         <li>
diff --git a/app/admin/projects/assetScan/page.tsx b/app/admin/projects/assetScan/page.tsx
index e7013df..9d699bc 100644
--- a/app/admin/projects/assetScan/page.tsx
+++ b/app/admin/projects/assetScan/page.tsx
@@ -37,7 +37,7 @@ export default async function AssetScan({
   });
 
   return (
-    <div className="prose w-full max-w-full">
+    <div className="prose w-full">
       <h1>All Uploaded Assets</h1>
       <PaginationButtons currentPage={page} />
 
diff --git a/app/admin/projects/page.tsx b/app/admin/projects/page.tsx
index 01a1935..fb07325 100644
--- a/app/admin/projects/page.tsx
+++ b/app/admin/projects/page.tsx
@@ -32,7 +32,7 @@ export default async function AdminProjects() {
   ).length;
 
   return (
-    <div className="prose max-w-full">
+    <div className="prose">
       <h1>Projects ({projectsCount})</h1>
       <p className="lead">
         {sharedProjectsCount} shared, {unsharedProjectsCount} unshared,{" "}
diff --git a/app/admin/users/[id]/page.tsx b/app/admin/users/[id]/page.tsx
index a4de181..fd243f8 100644
--- a/app/admin/users/[id]/page.tsx
+++ b/app/admin/users/[id]/page.tsx
@@ -58,7 +58,7 @@ export default async function AdminUserPage({
   }
 
   return (
-    <div className="prose max-w-full">
+    <div className="prose">
       <h1>{user.username}</h1>
       <p>
         <Link href={`/users/${user.username}`}>View public profile</Link>
diff --git a/app/admin/users/page.tsx b/app/admin/users/page.tsx
index 11cab1f..2fbbacc 100644
--- a/app/admin/users/page.tsx
+++ b/app/admin/users/page.tsx
@@ -36,7 +36,7 @@ export default async function AdminUsers() {
   ).length;
 
   return (
-    <div className="prose max-w-full">
+    <div className="prose">
       <h1>Users ({usersCount})</h1>
       <p className="lead">
         {verifiedUsersCount} verified, {unverifiedUsersCount} unverified;{" "}
diff --git a/tailwind.config.js b/tailwind.config.js
index 1e5f7bb..afa1b18 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,5 +1,13 @@
 const defaultTheme = require("tailwindcss/defaultTheme");
 
+const round = (num) =>
+  num
+    .toFixed(7)
+    .replace(/(\.[0-9]+?)0+$/, "$1")
+    .replace(/\.0$/, "");
+const rem = (px) => `${round(px / 16)}rem`;
+const em = (px, base) => `${round(px / base)}em`;
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   mode: "jit",
@@ -22,6 +30,28 @@ module.exports = {
       fontFamily: {
         sans: ["Inter var", ...defaultTheme.fontFamily.sans],
       },
+      typography: ({ theme }) => ({
+        DEFAULT: {
+          css: {
+            maxWidth: "unset",
+            code: {
+              fontWeight: "500",
+              backgroundColor: theme("colors.gray.300"),
+              paddingTop: em(2, 12),
+              paddingRight: em(4, 12),
+              paddingBottom: em(2, 12),
+              paddingLeft: em(4, 12),
+              borderRadius: rem(3),
+            },
+            "code::before": {
+              display: "none",
+            },
+            "code::after": {
+              display: "none",
+            },
+          },
+        },
+      }),
     },
     colors: {
       transparent: "transparent",