move scrollbar to parent container border

Author: haschek

src/components/Chat/ChatArea.tsx

@@ -54,16 +54,14 @@ export const ChatArea = ({
         >
             {chatField && (
                 <FlexibleLayoutItem
-                    className={`${eccgui}-chat__area-contents`}
                     growFactor={0}
                     shrinkFactor={0}
                     style={chatFieldPosition === "bottom" ? { order: 1 } : undefined}
                 >
-                    {chatField}
+                    <div className={`${eccgui}-chat__area-contentwidth`}>{chatField}</div>
                 </FlexibleLayoutItem>
             )}
             <FlexibleLayoutItem
-                className={`${eccgui}-chat__area-contents`}
                 style={
                     otherFlexibleLayoutContainerProps.useAbsoluteSpace
                         ? {
@@ -74,18 +72,20 @@ export const ChatArea = ({
                         : undefined
                 }
             >
-                {autoSpacingSize && children ? (
-                    <ul>
-                        {React.Children.toArray(children).map((child) => (
-                            <li>
-                                {child}
-                                <Spacing size={autoSpacingSize} />
-                            </li>
-                        ))}
-                    </ul>
-                ) : (
-                    children
-                )}
+                <div className={`${eccgui}-chat__area-contentwidth`}>
+                    {autoSpacingSize && children ? (
+                        <ul>
+                            {React.Children.toArray(children).map((child) => (
+                                <li>
+                                    {child}
+                                    <Spacing size={autoSpacingSize} />
+                                </li>
+                            ))}
+                        </ul>
+                    ) : (
+                        children
+                    )}
+                </div>
             </FlexibleLayoutItem>
         </FlexibleLayoutContainer>
     );

src/components/Chat/_chat.scss

@@ -65,17 +65,17 @@
     resize: none !important;
 }
 
-.#{$eccgui}-chat__area-contents {
+.#{$eccgui}-chat__area-contentwidth {
     width: 100%;
     margin: 0 auto;
 
-    .#{$eccgui}-chat__area--small > & {
+    .#{$eccgui}-chat__area--small & {
         max-width: 40rem;
     }
-    .#{$eccgui}-chat__area--medium > & {
+    .#{$eccgui}-chat__area--medium & {
         max-width: 60rem;
     }
-    .#{$eccgui}-chat__area--large > & {
+    .#{$eccgui}-chat__area--large & {
         max-width: 80rem;
     }
 }

src/components/Chat/stories/ChatContent.stories.tsx

@@ -33,7 +33,11 @@ const TemplateFull: StoryFn<typeof ChatContent> = (args) => <ChatContent {...arg
 
 export const Default = TemplateFull.bind({});
 Default.args = {
-    children: <LoremIpsum p={2} avgSentencesPerParagraph={4} random={false} />,
+    children: (
+        <HtmlContentBlock>
+            <LoremIpsum p={1} avgSentencesPerParagraph={5} random={false} />
+        </HtmlContentBlock>
+    ),
     avatar: <Depiction image={<Icon name={"application-useraccount"} />} />,
     statusLine: (
         <OverflowText>