Committing Theme changes for blog section

Author: mleonelli

src/pages/blogs/[slug].astro

@@ -30,11 +30,13 @@ const {Content} = await blog.render();
 
 <Layout title={blog.data.title}>
     <section class="flex justify-center mt-12">
-        <div id="markdown" class="prose prose-lg overflow-visible relative mb-5">
+        <div id="markdown" class="prose prose-lg max-w-full px-4 sm:px-0 relative mb-5">
             <Content />
         </div>
     </section>
 
+    <!-- markdown overflow styles moved to src/styles/theme.css -->
+
     <script>
         import { toggleMarkdownTheme } from "../../scripts/theme";
 

src/styles/theme.css

@@ -16,4 +16,19 @@
     --color-background: theme("colors.gray.900");
     --color-background-offset: theme("colors.gray.800");
     --color-border: theme("colors.gray.50" / 10%);
+}
+
+/* Prevent horizontal overflow for markdown content (code blocks, tables) */
+#markdown pre,
+#markdown table,
+#markdown code {
+    max-width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    word-break: break-word;
+    white-space: pre-wrap;
+}
+#markdown table {
+    display: block;
+    width: 100%;
 }