Fix mobile layout

replayio · Apr 30, 2024 · e52d618 · e52d618
1 parent 5d47001
commit e52d618
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 7 deletions.
diff --git a/src/components/Prose.tsx b/src/components/Prose.tsx
@@ -13,7 +13,7 @@ export function Prose<T extends React.ElementType = 'div'>({
     <Component
       className={clsx(
         className,
-        'prose prose-slate max-w-none dark:prose-invert dark:text-gray-400',
+        'prose prose-slate dark:prose-invert dark:text-gray-400',
         // headings
         'prose-headings:scroll-mt-28 prose-headings:font-display prose-headings:font-normal lg:prose-headings:scroll-mt-[8.5rem]',
         // lead
@@ -26,6 +26,8 @@ export function Prose<T extends React.ElementType = 'div'>({
         'prose-pre:rounded-xl prose-pre:bg-gray-900 prose-pre:shadow-lg dark:prose-pre:bg-gray-800/60 dark:prose-pre:shadow-none dark:prose-pre:ring-1 dark:prose-pre:ring-gray-300/10',
         // hr
         'dark:prose-hr:border-gray-800',
+        // max-width
+        'fooo xs:max-w-90vw max-w-none  ',
       )}
       {...props}
     />

diff --git a/src/videos/example.mp4.json b/src/videos/example.mp4.json
@@ -1 +1 @@
-{"status":"pending","originalFilePath":"src/videos/example.mp4","provider":"mux","providerMetadata":{},"createdAt":1714169187729,"updatedAt":1714169187729,"size":1570024}
+{"status":"uploading","originalFilePath":"src/videos/example.mp4","provider":"mux","providerMetadata":{"mux":{"uploadId":"Zw00JsqkTxCQcx76WVFHNnkmsh02ABXCv3mjkudWI5cjA"}},"createdAt":1714169187729,"updatedAt":1714438373868,"size":1570024}
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -21,19 +21,23 @@ export default {
       '9xl': ['8rem', { lineHeight: '1' }],
     },
     extend: {
+      screens: {
+        xs: '650px',
+      },
       fontFamily: {
         sans: 'var(--font-inter)',
         display: ['var(--font-lexend)', { fontFeatureSettings: '"ss01"' }],
       },
       maxWidth: {
         '8xl': '88rem',
+        '90vw': '90vw',
       },
       boxShadow: {
-        'nav-active': "0px 0px 5px 1px rgba(17,147,230,1)",
-        ripple: `0px 0px 0px 10px rgba(255,255,255,0.1), 0px 0px 0px 20px rgba(255,255,255,0.1), 0px 0px 0px 30px rgba(255,255,255,0.1)`
+        'nav-active': '0px 0px 5px 1px rgba(17,147,230,1)',
+        ripple: `0px 0px 0px 10px rgba(255,255,255,0.1), 0px 0px 0px 20px rgba(255,255,255,0.1), 0px 0px 0px 30px rgba(255,255,255,0.1)`,
       },
       colors: {
-        'pink': {
+        pink: {
           '50': '#fff1f3',
           '100': '#ffe4e8',
           '200': '#fdced8',
@@ -46,7 +50,7 @@ export default {
           '900': '#861541',
           '950': '#4b061f',
         },
-        'sky': {
+        sky: {
           '50': '#f0f8ff',
           '100': '#e0f0fe',
           '200': '#bbe1fc',
@@ -58,8 +62,8 @@ export default {
           '800': '#094f83',
           '900': '#0d426d',
           '950': '#092a48',
+        },
       },
-      }
     },
   },
   plugins: [typographyPlugin],