From 3192a9a75b84cbdcec1b6c811674b71e5a00ebcb Mon Sep 17 00:00:00 2001 From: Russell Ballestrini Date: Sat, 11 Oct 2025 08:23:22 -0400 Subject: [PATCH] change code blocks to use 100% width with box-sizing Replaced fixed pixel max-width values with 100% for pre and code elements. Added box-sizing border-box to ensure padding is included in width calculation. Code blocks now adapt to message bubble size while still scrolling when content is too wide. --- src/uncloseai-modal-builtin.css | 16 ++++------------ src/uncloseai-modal-pico.css | 16 ++++------------ 2 files changed, 8 insertions(+), 24 deletions(-) diff --git a/src/uncloseai-modal-builtin.css b/src/uncloseai-modal-builtin.css index f7d27a9..4a786df 100644 --- a/src/uncloseai-modal-builtin.css +++ b/src/uncloseai-modal-builtin.css @@ -1122,21 +1122,13 @@ 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: 100%; + box-sizing: border-box; } .ai-message code { - max-width: 340px; -} - -@media (min-width: 768px) { - .ai-message pre { - max-width: 720px; - } - - .ai-message code { - max-width: 720px; - } + max-width: 100%; + box-sizing: border-box; } .message-text { diff --git a/src/uncloseai-modal-pico.css b/src/uncloseai-modal-pico.css index 80d7ab0..b511d37 100644 --- a/src/uncloseai-modal-pico.css +++ b/src/uncloseai-modal-pico.css @@ -1195,21 +1195,13 @@ 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: 100%; + box-sizing: border-box; } .ai-message code { - max-width: 340px; -} - -@media (min-width: 768px) { - .ai-message pre { - max-width: 720px; - } - - .ai-message code { - max-width: 720px; - } + max-width: 100%; + box-sizing: border-box; } .message-text {