diff --git a/src/uncloseai-modal-builtin.css b/src/uncloseai-modal-builtin.css
index f7d27a9..b713fa0 100644
--- a/src/uncloseai-modal-builtin.css
+++ b/src/uncloseai-modal-builtin.css
@@ -1122,20 +1122,20 @@ dialog#uncloseai-embedded-modal[data-theme="dark"] .uncloseai-chat-box {
 /* Code blocks within AI messages - allow horizontal scroll, preserve all whitespace */
 .ai-message pre {
   overflow-x: auto;
-  max-width: 340px;
+  max-width: min(400px, 85vw);
 }
 
 .ai-message code {
-  max-width: 340px;
+  max-width: min(400px, 85vw);
 }
 
 @media (min-width: 768px) {
   .ai-message pre {
-    max-width: 720px;
+    max-width: min(850px, 70vw);
   }
 
   .ai-message code {
-    max-width: 720px;
+    max-width: min(850px, 70vw);
   }
 }
 
diff --git a/src/uncloseai-modal-pico.css b/src/uncloseai-modal-pico.css
index 80d7ab0..33c3e13 100644
--- a/src/uncloseai-modal-pico.css
+++ b/src/uncloseai-modal-pico.css
@@ -1195,20 +1195,20 @@ dialog#uncloseai-embedded-modal[data-theme="dark"] .uncloseai-chat-box {
 /* Code blocks within AI messages - allow horizontal scroll, preserve all whitespace */
 .ai-message pre {
   overflow-x: auto;
-  max-width: 340px;
+  max-width: min(400px, 85vw);
 }
 
 .ai-message code {
-  max-width: 340px;
+  max-width: min(400px, 85vw);
 }
 
 @media (min-width: 768px) {
   .ai-message pre {
-    max-width: 720px;
+    max-width: min(850px, 70vw);
   }
 
   .ai-message code {
-    max-width: 720px;
+    max-width: min(850px, 70vw);
   }
 }