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

fix message overflow - use fit-content and auto margins instead of justify-self

Browse source 
Replaced justify-self with margin-left/right auto and width fit-content
to prevent messages from expanding the grid column and causing horizontal
scrollbars. User messages now align right and AI messages align left
without affecting each other's positioning.
This commit is contained in:
Russell Ballestrini 2025-10-11 08:13:15 -04:00
parent a082f8dbf6
commit 1762f8cf20
2 changed files with 28 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1098,23 +1098,25 @@ dialog#uncloseai-embedded-modal[data-theme="dark"] .uncloseai-chat-box {
/* Messages */
.user-message {
justify-self: end;
background: rgba(0, 123, 255, 0.95);
color: white;
padding: 12px 16px;
border-radius: 18px 18px 4px 18px;
max-width: 80%;
max-width: 95%;
word-wrap: break-word;
margin-left: auto;
width: fit-content;
}
.ai-message {
justify-self: start;
background: rgba(255, 255, 255, 0.95);
color: #495057;
padding: 12px 16px;
border-radius: 18px 18px 18px 4px;
max-width: 80%;
max-width: 95%;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
margin-right: auto;
width: fit-content;
}
/* Code blocks within AI messages - allow horizontal scroll, preserve all whitespace */

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

@ -233,25 +233,27 @@ dialog#uncloseai-embedded-modal[data-theme="light"] .uncloseai-modal-settings {
}
.user-message {
justify-self: end;
background: #007bff;
color: white;
padding: 12px 16px;
border-radius: 18px 18px 4px 18px;
max-width: 80%;
max-width: 95%;
word-wrap: break-word;
font-size: 14px;
margin-left: auto;
width: fit-content;
}
.ai-message {
justify-self: start;
background: white;
color: #495057;
padding: 12px 16px;
border-radius: 18px 18px 18px 4px;
max-width: 80%;
max-width: 95%;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
font-size: 14px;
margin-right: auto;
width: fit-content;
}
/* Dark theme message colors */
@ -1169,23 +1171,25 @@ dialog#uncloseai-embedded-modal[data-theme="dark"] .uncloseai-chat-box {
/* Messages */
.user-message {
justify-self: end !important;
background: rgba(0, 123, 255, 0.95) !important;
color: white !important;
padding: 12px 16px !important;
border-radius: 18px 18px 4px 18px !important;
max-width: 80% !important;
word-wrap: break-word !important;
background: rgba(0, 123, 255, 0.95);
color: white;
padding: 12px 16px;
border-radius: 18px 18px 4px 18px;
max-width: 95%;
word-wrap: break-word;
margin-left: auto;
width: fit-content;
}
.ai-message {
justify-self: start !important;
background: rgba(255, 255, 255, 0.95) !important;
color: #495057 !important;
padding: 12px 16px !important;
border-radius: 18px 18px 18px 4px !important;
max-width: 80% !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
background: rgba(255, 255, 255, 0.95);
color: #495057;
padding: 12px 16px;
border-radius: 18px 18px 18px 4px;
max-width: 95%;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
margin-right: auto;
width: fit-content;
}
/* Code blocks within AI messages - allow horizontal scroll, preserve all whitespace */