Fixed overflow on mobile devices.

src/app/(website)/blog/[id]/page.tsx

@@ -4,6 +4,7 @@ import Link from 'next/link';
 import { getPost } from 'lib/blog';
 import Markdown from 'components/common/Markdown';
 import styles from './page.module.css';
+import { notFound } from 'next/navigation';
 
 type Props = {
   params: { id: string };
@@ -13,6 +14,7 @@ export async function generateMetadata({ params }: { params: { id: string } }):
   const { id } = params;
 
   const post = await getPost(id);
+  if(!post) return notFound()
 
   return {
     title: {
@@ -26,9 +28,7 @@ export default async function ({ params }: Props) {
   const { id } = params;
   const post = await getPost(id);
 
-  if (!post) {
-    return null;
-  }
+  if(!post) return notFound()
 
   return (
     <article className={styles.blog}>

src/app/(website)/docs/[[...id]]/page.module.css

@@ -5,6 +5,10 @@
   position: relative;
 }
 
+.content {
+  overflow-x: auto ;
+}
+
 @media screen and (max-width: 992px) {
   .page {
     grid-template-columns: 1fr;

src/app/(website)/docs/[[...id]]/page.tsx

@@ -3,13 +3,15 @@ import { getDoc } from 'lib/docs';
 import Markdown from 'components/common/Markdown';
 import styles from './page.module.css';
 import PageLinks from 'app/(website)/docs/[[...id]]/PageLinks';
+import { notFound } from 'next/navigation';
 
 export async function generateMetadata({
   params: { id },
 }: {
   params: { id: string[] };
 }): Promise<Metadata> {
   const doc = await getDoc(id?.join('/'));
+  if(!doc) return notFound()
 
   return {
     title: {
@@ -21,6 +23,7 @@ export async function generateMetadata({
 
 export default async function ({ params: { id = [] } }: { params: { id: string[] } }) {
   const doc = await getDoc(id?.join('/'));
+  if(!doc) return notFound()
 
   if (!doc) {
     return <h1>Page not found</h1>;

src/components/common/Pre.module.css

@@ -1,10 +1,12 @@
 .container {
-  position: relative;
-  background: #000;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap:0.75rem;
+  background: #0d1117; 
   padding: 16px;
   border-radius: 6px;
-  white-space: pre-wrap;
-  word-wrap: break-word;
+  overflow-x: auto;
 }
 
 .container code {
@@ -14,9 +16,6 @@
 
 .button {
   border: 0;
-  position: absolute;
-  right: 20px;
-  top: 16px;
   height: 16px;
   width: 16px;
   cursor: pointer;

src/styles/index.css

@@ -67,8 +67,8 @@ code {
   background: var(--base100);
   padding: 2px 4px;
   border-radius: 2px;
-  white-space: pre-wrap;
-  word-wrap: break-word;
+  /* white-space: pre-wrap;
+  word-wrap: break-word; */
   letter-spacing: 0;
 }