优化页面、修复BUG

client/src/pages/BlogDetail.vue

@@ -1,6 +1,6 @@
 <template>
-  <section id="blog-detail" class="page-section block overflow-x-hidden">
-    <div class="max-w-[90rem] mx-auto pt-20 md:pt-32 px-4 md:px-6 pb-12 md:pb-20 relative overflow-x-hidden">
+  <section id="blog-detail" class="page-section block">
+    <div class="max-w-[90rem] mx-auto pt-20 md:pt-32 px-4 md:px-6 pb-12 md:pb-20 relative">
       <!-- 返回按钮 -->
       <button
           @click="$router.push('/blog')"
@@ -144,7 +144,7 @@
         </aside>
 
         <!-- 2. 中间：文章主内容 -->
-        <div class="flex-1 min-w-0 max-w-full order-2 overflow-x-hidden">
+        <div class="flex-1 min-w-0 max-w-full order-2">
           <!-- 文章头图与信息 -->
           <div class="border-b border-white/5 pb-6 md:pb-8 mb-6 md:mb-10">
             <div class="flex flex-wrap items-center gap-2 md:gap-3 mb-4 md:mb-6">
@@ -165,7 +165,7 @@
           <!-- 文章内容 -->
           <article
               ref="articleRef"
-              class="blog-content prose prose-invert min-w-0 max-w-full overflow-x-hidden text-art-muted leading-relaxed prose-base md:prose-lg"
+              class="blog-content prose prose-invert min-w-0 max-w-full text-art-muted leading-relaxed prose-base md:prose-lg"
           >
             <div v-html="renderedContent"></div>
           </article>
@@ -796,6 +796,12 @@ onBeforeUnmount(() => {
 
 :deep(.ios-code-container) {
   max-width: 100%;
+  min-width: 0;
+}
+
+:deep(.code-content-wrapper) {
+  min-width: 0;
+  max-width: 100%;
 }
 
 :deep(.prose table) {
@@ -816,6 +822,9 @@ onBeforeUnmount(() => {
 }
 
 :deep(.code-block-wrapper) {
+  overflow-x: auto;
+  min-width: 0;
+  max-width: 100%;
   -webkit-overflow-scrolling: touch;
 }