Improve Spright chat message sizing for wide content

change/@ni-spright-components-53dfedf2-8550-49e2-816e-5988e14affad.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Chat message sizing is more client configurable",
+  "packageName": "@ni/spright-components",
+  "email": "jattasNI@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/spright-components/src/chat/message/inbound/styles.ts

@@ -20,9 +20,11 @@ export const styles = css`
     :host {
         min-width: ${standardPadding};
         min-height: ${standardPadding};
+        max-width: 100%;
 
         flex-direction: row;
         justify-content: flex-start;
+        align-self: flex-start;
         flex-shrink: 0;
         font: ${bodyFont};
         color: ${bodyFontColor};
@@ -31,7 +33,7 @@ export const styles = css`
     .container {
         display: flex;
         flex-direction: column;
-        max-width: calc(90%);
+        width: 100%;
     }
 
     [part='start'] {
@@ -41,6 +43,7 @@ export const styles = css`
     .message-content {
         width: fit-content;
         height: fit-content;
+        max-width: 100%;
         overflow-x: auto;
     }
 

packages/spright-components/src/chat/message/outbound/styles.ts

@@ -17,9 +17,11 @@ export const styles = css`
     :host {
         min-width: ${standardPadding};
         min-height: ${standardPadding};
+        max-width: 90%;
 
         flex-direction: row;
         justify-content: flex-end;
+        align-self: flex-end;
         flex-shrink: 0;
         font: ${bodyFont};
         color: ${bodyFontColor};
@@ -28,12 +30,13 @@ export const styles = css`
     .container {
         display: flex;
         flex-direction: column;
-        max-width: calc(90%);
+        width: 100%;
     }
 
     .message-content {
         width: fit-content;
         height: fit-content;
+        max-width: 100%;
         overflow-x: auto;
     }
 

packages/spright-components/src/chat/message/system/styles.ts

@@ -13,9 +13,11 @@ export const styles = css`
     :host {
         min-width: ${standardPadding};
         min-height: ${standardPadding};
+        max-width: 90%;
 
         flex-direction: row;
         justify-content: center;
+        align-self: center;
         flex-shrink: 0;
         font: ${bodyFont};
         color: ${bodyFontColor};
@@ -24,12 +26,13 @@ export const styles = css`
     .container {
         display: flex;
         flex-direction: column;
-        max-width: calc(90%);
+        width: 100%;
     }
 
     .message-content {
         width: fit-content;
         height: fit-content;
+        max-width: 100%;
         overflow-x: auto;
     }
 `;

packages/spright-components/src/chat/message/welcome/styles.ts

@@ -18,10 +18,12 @@ export const styles = css`
     :host {
         min-width: ${standardPadding};
         min-height: ${standardPadding};
+        max-width: 90%;
 
         flex: 1;
         flex-direction: row;
         justify-content: center;
+        align-self: center;
         align-items: center;
         font: ${bodyFont};
         color: ${bodyFontColor};
@@ -31,7 +33,6 @@ export const styles = css`
         display: flex;
         flex-direction: column;
         align-items: center;
-        max-width: calc(90%);
         gap: ${mediumPadding};
     }
 
@@ -65,6 +66,7 @@ export const styles = css`
         align-items: center;
         width: fit-content;
         height: fit-content;
+        max-width: 100%;
         overflow-x: auto;
         gap: ${mediumPadding};
     }

packages/storybook/src/spright/chat/conversation/chat-conversation-matrix.stories.ts

@@ -353,10 +353,10 @@ const conversationWithInput = (
             height: ${height};
         ">
             <${chatMessageInboundTag}>
-                <span>Conversation is ${heightLabel} than the height of the messages. Lorem ipsum dolor sit amet.</span>
+                <span>Conversation is ${heightLabel} than the height of the messages. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
             </${chatMessageInboundTag}>
             <${chatMessageOutboundTag} message-type="outbound">
-                <span>Conversation is ${heightLabel} than the height of the messages. Lorem ipsum dolor sit amet.</span>
+                <span>Conversation is ${heightLabel} than the height of the messages. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
             </${chatMessageOutboundTag}>
             <${chatInputTag} slot='input'></${chatInputTag}>
         </${chatConversationTag}>
@@ -383,10 +383,10 @@ const conversationWithToolbar = (
                 </${buttonTag}>
             </${toolbarTag}>
             <${chatMessageInboundTag}>
-                <span>Conversation is ${heightLabel} than the height of the messages. Lorem ipsum dolor sit amet.</span>
+                <span>Conversation is ${heightLabel} than the height of the messages. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
             </${chatMessageInboundTag}>
             <${chatMessageOutboundTag} message-type="outbound">
-                <span>Conversation is ${heightLabel} than the height of the messages. Lorem ipsum dolor sit amet.</span>
+                <span>Conversation is ${heightLabel} than the height of the messages. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
             </${chatMessageOutboundTag}>
             <${chatInputTag} slot='input'></${chatInputTag}>
         </${chatConversationTag}>
@@ -410,10 +410,10 @@ const conversationWithStart = (
                 This is a banner in the start slot.
             </${bannerTag}>
             <${chatMessageInboundTag}>
-                <span>Conversation is ${heightLabel} than the height of the messages. Lorem ipsum dolor sit amet.</span>
+                <span>Conversation is ${heightLabel} than the height of the messages. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
             </${chatMessageInboundTag}>
             <${chatMessageOutboundTag} message-type="outbound">
-                <span>Conversation is ${heightLabel} than the height of the messages. Lorem ipsum dolor sit amet.</span>
+                <span>Conversation is ${heightLabel} than the height of the messages. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
             </${chatMessageOutboundTag}>
             <${chatInputTag} slot='input'></${chatInputTag}>
         </${chatConversationTag}>
@@ -444,10 +444,10 @@ const conversationWithToolbarAndStart = (
                 This is a banner in the start slot.
             </${bannerTag}>
             <${chatMessageInboundTag}>
-                <span>Conversation is ${heightLabel} than the height of the messages. Lorem ipsum dolor sit amet.</span>
+                <span>Conversation is ${heightLabel} than the height of the messages. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
             </${chatMessageInboundTag}>
             <${chatMessageOutboundTag} message-type="outbound">
-                <span>Conversation is ${heightLabel} than the height of the messages. Lorem ipsum dolor sit amet.</span>
+                <span>Conversation is ${heightLabel} than the height of the messages. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
             </${chatMessageOutboundTag}>
             <${chatInputTag} slot='input'></${chatInputTag}>
         </${chatConversationTag}>
@@ -478,10 +478,10 @@ const conversationWithToolbarAndStartAndEnd = (
                 This is a banner in the start slot.
             </${bannerTag}>
             <${chatMessageInboundTag}>
-                <span>Conversation is ${heightLabel} than the height of the messages. Lorem ipsum dolor sit amet.</span>
+                <span>Conversation is ${heightLabel} than the height of the messages. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
             </${chatMessageInboundTag}>
             <${chatMessageOutboundTag} message-type="outbound">
-                <span>Conversation is ${heightLabel} than the height of the messages. Lorem ipsum dolor sit amet.</span>
+                <span>Conversation is ${heightLabel} than the height of the messages. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
             </${chatMessageOutboundTag}>
             <${chatInputTag} slot='input'></${chatInputTag}>
             <span slot='end'>

packages/storybook/src/spright/chat/message/chat-message-matrix.stories.ts

@@ -1,5 +1,6 @@
 import type { StoryFn, Meta } from '@storybook/html-vite';
 import { html } from '@ni/fast-element';
+import { chatConversationTag } from '@ni/spright-components/dist/esm/chat/conversation';
 import { chatMessageTag } from '@ni/spright-components/dist/esm/chat/message';
 import { chatMessageInboundTag } from '@ni/spright-components/dist/esm/chat/message/inbound';
 import { chatMessageOutboundTag } from '@ni/spright-components/dist/esm/chat/message/outbound';
@@ -24,60 +25,80 @@ export default metadata;
 
 export const messageHidden: StoryFn = createStory(
     hiddenWrapper(
-        html`<${chatMessageTag} hidden>Hidden Chat Message</${chatMessageTag}>`
+        html`<${chatConversationTag}>
+            <${chatMessageTag} hidden>Hidden Chat Message</${chatMessageTag}>
+        </${chatConversationTag}>`
     )
 );
 
 export const messageTextCustomized: StoryFn = createMatrixThemeStory(
     textCustomizationWrapper(
-        html`<${chatMessageTag}>Message</${chatMessageTag}>`
+        html`<${chatConversationTag}>
+            <${chatMessageTag}>Message</${chatMessageTag}>
+        </${chatConversationTag}>`
     )
 );
 
 export const messageInboundHidden: StoryFn = createStory(
     hiddenWrapper(
-        html`<${chatMessageInboundTag} hidden>Hidden Chat Inbound Message</${chatMessageInboundTag}>`
+        html`<${chatConversationTag}>
+            <${chatMessageInboundTag} hidden>Hidden Chat Inbound Message</${chatMessageInboundTag}>
+        </${chatConversationTag}>`
     )
 );
 
 export const messageInboundTextCustomized: StoryFn = createMatrixThemeStory(
     textCustomizationWrapper(
-        html`<${chatMessageInboundTag}>Inbound Message</${chatMessageInboundTag}>`
+        html`<${chatConversationTag}>
+            <${chatMessageInboundTag}>Inbound Message</${chatMessageInboundTag}>
+        </${chatConversationTag}>`
     )
 );
 
 export const messageOutboundHidden: StoryFn = createStory(
     hiddenWrapper(
-        html`<${chatMessageOutboundTag} hidden>Hidden Chat Outbound Message</${chatMessageOutboundTag}>`
+        html`<${chatConversationTag}>
+            <${chatMessageOutboundTag} hidden>Hidden Chat Outbound Message</${chatMessageOutboundTag}>
+        </${chatConversationTag}>`
     )
 );
 
 export const messageOutboundTextCustomized: StoryFn = createMatrixThemeStory(
     textCustomizationWrapper(
-        html`<${chatMessageOutboundTag}>Outbound Message</${chatMessageOutboundTag}>`
+        html`<${chatConversationTag}>
+            <${chatMessageOutboundTag}>Outbound Message</${chatMessageOutboundTag}>
+        </${chatConversationTag}>`
     )
 );
 
 export const messageSystemHidden: StoryFn = createStory(
     hiddenWrapper(
-        html`<${chatMessageSystemTag} hidden>Hidden Chat System Message</${chatMessageSystemTag}>`
+        html`<${chatConversationTag}>
+            <${chatMessageSystemTag} hidden>Hidden Chat System Message</${chatMessageSystemTag}>
+        </${chatConversationTag}>`
     )
 );
 
 export const messageSystemTextCustomized: StoryFn = createMatrixThemeStory(
     textCustomizationWrapper(
-        html`<${chatMessageSystemTag}>System Message</${chatMessageSystemTag}>`
+        html`<${chatConversationTag}>
+            <${chatMessageSystemTag}>System Message</${chatMessageSystemTag}>
+        </${chatConversationTag}>`
     )
 );
 
 export const messageWelcomeHidden: StoryFn = createStory(
     hiddenWrapper(
-        html`<${chatMessageWelcomeTag} hidden welcome-title="Welcome" subtitle="Get started">Hidden Chat Welcome Message</${chatMessageWelcomeTag}>`
+        html`<${chatConversationTag}>
+            <${chatMessageWelcomeTag} hidden welcome-title="Welcome" subtitle="Get started">Hidden Chat Welcome Message</${chatMessageWelcomeTag}>
+        </${chatConversationTag}>`
     )
 );
 
 export const messageWelcomeTextCustomized: StoryFn = createMatrixThemeStory(
     textCustomizationWrapper(
-        html`<${chatMessageWelcomeTag} welcome-title="Welcome" subtitle="Get started">Welcome Message</${chatMessageWelcomeTag}>`
+        html`<${chatConversationTag}>
+            <${chatMessageWelcomeTag} welcome-title="Welcome" subtitle="Get started">Welcome Message</${chatMessageWelcomeTag}>
+        </${chatConversationTag}>`
     )
 );