fix user massage wrapping, attachments design
frdel committed
Jan 21, 2026 at 14:34 UTC
af99187053e51f01ec7d9bfe9259affdc3c1d7c7
2 files changed
+16
-19
webui/css/messages.css
+2
-2
@@ -71,10 +71,10 @@
71
}
72
73
74
-.message-user {
74
+.message.message-user {
75
text-align: end;
76
margin-bottom: var(--spacing-md);
77
-
77
+ width: 100%;
78
}
79
80
.message-user .message-text {
webui/index.css
+14
-17
@@ -506,10 +506,9 @@ h4 {
506
}
507
508
.preview-item.file-preview .file-icon {
509
- width: 48px;
510
- height: 48px;
511
- margin-bottom: 8px;
512
- opacity: 0.8;
509
+ width: 2.5rem;
510
+ height: 2.5rem;
511
+ margin-bottom: 0.1rem;
512
}
513
514
.preview-item.file-preview .file-info {
@@ -667,8 +666,8 @@ h4 {
666
667
.attachment-item {
668
position: relative;
670
- width: 120px;
671
- height: 120px;
669
+ width: 6rem;
670
+ height: 6rem;
671
/* background-color: var(--color-background); */
672
border: 1px solid var(--color-border);
673
display: flex;
@@ -712,14 +711,12 @@ h4 {
711
padding: 12px;
712
text-align: center;
713
}
715
-
714
+
715
.attachment-item.file-type .file-icon {
717
- width: 48px;
718
- height: 48px;
719
- margin-bottom: 8px;
720
- opacity: 0.8;
716
+ width: 50%;
717
+ height: 50%;
718
}
722
-
719
+
720
.attachment-item.file-type .file-title {
721
font-size: 0.75rem;
722
color: var(--color-text);
@@ -732,7 +729,7 @@ h4 {
729
-webkit-line-clamp: 2;
730
-webkit-box-orient: vertical;
731
text-align: center;
735
- margin-bottom: 4px;
732
+ margin-top: auto;
733
}
734
735
/* Chat-history attachments overrides (flat styling) */
@@ -811,7 +808,7 @@ h4 {
808
padding: var(--spacing-xs);
809
}
810
814
-.preview-item {
811
+/* .preview-item {
812
position: relative;
813
background: var(--color-secondary);
814
border-radius: 8px;
@@ -821,13 +818,13 @@ h4 {
818
align-items: center;
819
gap: 8px;
820
transition: background-color 0.2s ease;
824
-}
821
+} */
822
826
-.preview-item.image-preview img {
823
+/* .preview-item.image-preview img {
824
max-height: 100px;
825
object-fit: cover;
826
border-radius: 4px;
830
-}
827
+} */
828
829
.image-wrapper {
830
width: 100%;