engineering/uncloseai.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

change code blocks to use 100% width with box-sizing

Browse source 
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.
This commit is contained in:
Russell Ballestrini 2025-10-11 08:23:22 -04:00
parent 1762f8cf20
commit 3192a9a75b
2 changed files with 8 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/uncloseai-modal-builtin.css
View file

@ -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 {

16
src/uncloseai-modal-pico.css
View file

@ -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 {