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

make code block widths responsive using min() function

Browse source 
Changed code block max-width to use min() with both pixel and viewport units:
- Mobile: min(400px, 85vw)
- Desktop: min(850px, 70vw)

This ensures code blocks scale appropriately at all resolutions and never
cause horizontal overflow when resizing the browser window.
This commit is contained in:
Russell Ballestrini 2025-10-11 08:46:04 -04:00
parent 8f2395f7ce
commit ac0ff18308
2 changed files with 8 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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);
}
}

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

@ -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);
}
}