|
|
@@ -284,6 +284,7 @@ onUnmounted(stopPolling)
|
|
|
display: flex;
|
|
|
align-items: flex-start;
|
|
|
gap: 12px;
|
|
|
+ width: 100%;
|
|
|
|
|
|
&__avatar-wrap {
|
|
|
flex: 0 0 36px;
|
|
|
@@ -309,7 +310,11 @@ onUnmounted(stopPolling)
|
|
|
}
|
|
|
|
|
|
&__body {
|
|
|
- flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: flex-start;
|
|
|
+ flex: 0 1 auto;
|
|
|
+ max-width: calc(100% - 48px);
|
|
|
min-width: 0;
|
|
|
}
|
|
|
|
|
|
@@ -319,6 +324,7 @@ onUnmounted(stopPolling)
|
|
|
align-items: center;
|
|
|
gap: 8px;
|
|
|
margin-bottom: 6px;
|
|
|
+ max-width: 100%;
|
|
|
}
|
|
|
|
|
|
&__name {
|
|
|
@@ -332,31 +338,51 @@ onUnmounted(stopPolling)
|
|
|
}
|
|
|
|
|
|
&__content {
|
|
|
+ display: inline-block;
|
|
|
+ width: fit-content;
|
|
|
+ max-width: 100%;
|
|
|
padding: 12px 14px;
|
|
|
border-radius: @store-radius-sm;
|
|
|
background: @store-bg;
|
|
|
line-height: 1.65;
|
|
|
white-space: pre-wrap;
|
|
|
+ word-break: break-word;
|
|
|
color: @store-text-muted;
|
|
|
}
|
|
|
|
|
|
&__files {
|
|
|
margin-top: 8px;
|
|
|
- max-width: 400px;
|
|
|
+ width: fit-content;
|
|
|
+ max-width: 100%;
|
|
|
}
|
|
|
|
|
|
- &--mine .chat-item__content {
|
|
|
- background: fade(@store-accent, 12%);
|
|
|
- border: 1px solid fade(@store-accent, 25%);
|
|
|
+ &--mine {
|
|
|
+ flex-direction: row-reverse;
|
|
|
+
|
|
|
+ .chat-item__body {
|
|
|
+ align-items: flex-end;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-item__meta {
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-item__content {
|
|
|
+ background: fade(@store-accent, 12%);
|
|
|
+ border: 1px solid fade(@store-accent, 25%);
|
|
|
+ border-top-right-radius: 4px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
&--staff .chat-item__content {
|
|
|
background: #f0f6ff;
|
|
|
border: 1px solid #d6e4ff;
|
|
|
+ border-top-left-radius: 4px;
|
|
|
}
|
|
|
|
|
|
&--system .chat-item__content {
|
|
|
background: var(--color-fill-2);
|
|
|
+ border-top-left-radius: 4px;
|
|
|
}
|
|
|
}
|
|
|
|
