@revikornmann/muka-ui 0.13.0 → 0.15.0

package/dist/styles/components/ChatMessage.css

@@ -22,11 +22,6 @@
   grid-template-areas: 'rail bubble';
 }
 
-.muka-chat-message--own.muka-chat-message--has-avatar .muka-chat-message__row {
-  grid-template-columns: minmax(0, 1fr) auto;
-  grid-template-areas: 'bubble rail';
-}
-
 .muka-chat-message__rail {
   grid-area: rail;
   /* Sits on the bubble's baseline (Figma 5355:44091) */
@@ -61,6 +56,12 @@
 
 .muka-chat-message__bubble {
   grid-area: bubble;
+  /*
+   * Width follows the content: a single line hugs, and once the text wraps the
+   * bubble fills to the shared max width. Robust to string or rich children —
+   * no length measuring needed (Figma `Text length` on 5355:44091).
+   */
+  width: fit-content;
   max-width: var(--chatbubble-max-width);
   position: relative;
   display: flex;
@@ -73,18 +74,11 @@
   word-break: break-word;
 }
 
-/*
- * Length axis (Figma `Text length` on 5355:44091): short messages hug their
- * content, long ones fill the row up to the shared max width.
- */
-.muka-chat-message--long .muka-chat-message__bubble {
+/* Media, an embed or an action stack always run the full bubble width. */
+.muka-chat-message--has-blocks .muka-chat-message__bubble {
   width: 100%;
 }
 
-.muka-chat-message--short .muka-chat-message__bubble {
-  width: fit-content;
-}
-
 .muka-chat-message--own .muka-chat-message__bubble {
   justify-self: end;
 }
@@ -262,10 +256,12 @@
 }
 
 /*
- * Media, an embed or an action stack run the full width of the bubble, so the
- * corner the timestamp sits in has to be cleared for it.
+ * When the last block in the body is media, an embed or an action stack (not
+ * trailing text), it runs the full width, so reserve a line below for the inset
+ * timestamp. A message that ends in text clears the corner inline instead (see
+ * `__message` padding-right above), so it needs no extra bottom space.
  */
-.muka-chat-message--has-timestamp.muka-chat-message--has-blocks .muka-chat-message__body {
+.muka-chat-message--has-timestamp.muka-chat-message--trailing-block .muka-chat-message__body {
   padding-bottom: var(--text-body-xs-regular-lineHeight);
 }