Merge pull request #83 from AWS-Q/32teeth/fix/scrollbar

fix: #81 scrollbar

example/src/config.ts

@@ -4,8 +4,8 @@ import {
 import { defaultFollowUps } from './samples/sample-data';
 import { Commands } from './commands';
 import { MynahUITabStoreTab, QuickActionCommandGroup } from '../../dist/static';
-export const WelcomeMessage = `Hi, this is \`MynahUI\` and it is a **data and event driven** web based chat interface library and it is independent from any framework like react or vue etc. 
-In this example web app which uses mynah-ui as its renderer, we're simulating its capabilities with some static content with an IDE look&feel. 
+export const WelcomeMessage = `Hi, this is \`MynahUI\` and it is a **data and event driven** web based chat interface library and it is independent from any framework like react or vue etc.
+In this example web app which uses mynah-ui as its renderer, we're simulating its capabilities with some static content with an IDE look&feel.
 
 *To see more examples about the possible content types, interactions or various component types, you can type \`/\` to open the quick actions list panel.*`;
 
@@ -31,7 +31,7 @@ export const QuickActionCommands:QuickActionCommandGroup[] = [
         command: Commands.SHOW_STICKY_CARD,
         description: 'You can stick a ChatItem card on top of the input field which will stay there independently from the conversation block. It might be handy to give some info to the user.',
       },
-      
+
     ],
   },
   {

src/styles/_scrollbars.scss

@@ -0,0 +1,8 @@
+* {
+  scrollbar-gutter: unset;
+  scrollbar-color: color-mix(
+    in hsl,
+    var(--mynah-color-text-default),
+    hsl(0, 100%, 100%) 90%)
+    transparent;
+}

src/styles/styles.scss

@@ -3,4 +3,5 @@
 @import 'animations';
 @import 'dark';
 @import 'favicons';
+@import 'scrollbars';
 @import './components/main-container';