@ni/ok-components 1.9.1 → 1.9.2

package/dist/all-components-bundle.js

@@ -104651,9 +104651,12 @@ focus outline in that case.
     :host {
         min-width: ${standardPadding};
         min-height: ${standardPadding};
+        width: fit-content;
+        max-width: 100%;
 
         flex-direction: row;
         justify-content: flex-start;
+        align-self: flex-start;
         flex-shrink: 0;
         font: ${bodyFont};
         color: ${bodyFontColor};
@@ -104662,7 +104665,7 @@ focus outline in that case.
     .container {
         display: flex;
         flex-direction: column;
-        max-width: calc(90%);
+        width: 100%;
     }
 
     [part='start'] {
@@ -104672,6 +104675,7 @@ focus outline in that case.
     .message-content {
         width: fit-content;
         height: fit-content;
+        max-width: 100%;
         overflow-x: auto;
     }
 
@@ -104754,9 +104758,12 @@ focus outline in that case.
     :host {
         min-width: ${standardPadding};
         min-height: ${standardPadding};
+        width: fit-content;
+        max-width: 90%;
 
         flex-direction: row;
         justify-content: flex-end;
+        align-self: flex-end;
         flex-shrink: 0;
         font: ${bodyFont};
         color: ${bodyFontColor};
@@ -104765,21 +104772,19 @@ focus outline in that case.
     .container {
         display: flex;
         flex-direction: column;
-        max-width: calc(90%);
+        width: 100%;
+        background: ${fillSelectedColor};
+        border: ${borderWidth} solid ${borderHoverColor};
+        border-radius: ${mediumPadding} ${mediumPadding} 0px ${mediumPadding};
+        padding: ${mediumPadding};
     }
 
     .message-content {
         width: fit-content;
         height: fit-content;
+        max-width: 100%;
         overflow-x: auto;
     }
-
-    :host .message-content {
-        background: ${fillSelectedColor};
-        border: ${borderWidth} solid ${borderHoverColor};
-        border-radius: ${mediumPadding} ${mediumPadding} 0px ${mediumPadding};
-        padding: ${mediumPadding};
-    }
 `;
 
   const template$s = () => html `
@@ -104815,9 +104820,12 @@ focus outline in that case.
     :host {
         min-width: ${standardPadding};
         min-height: ${standardPadding};
+        width: fit-content;
+        max-width: 90%;
 
         flex-direction: row;
         justify-content: center;
+        align-self: center;
         flex-shrink: 0;
         font: ${bodyFont};
         color: ${bodyFontColor};
@@ -104826,12 +104834,13 @@ focus outline in that case.
     .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;
     }
 `;
@@ -104867,10 +104876,12 @@ focus outline in that case.
     :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};
@@ -104880,7 +104891,6 @@ focus outline in that case.
         display: flex;
         flex-direction: column;
         align-items: center;
-        max-width: calc(90%);
         gap: ${mediumPadding};
     }
 
@@ -104914,6 +104924,7 @@ focus outline in that case.
         align-items: center;
         width: fit-content;
         height: fit-content;
+        max-width: 100%;
         overflow-x: auto;
         gap: ${mediumPadding};
     }