Move scrollbar on Message Card body a bit off from the right edge

src/components/MessageCard/MessageCard.css.js

@@ -86,7 +86,9 @@ const editorHtmlFontSize = 14
 export const ContentUI = styled.div`
   margin-top: ${({ withMargin }) => (withMargin ? '20px' : '0')};
   overflow: auto;
-  padding: 0 20px;
+  // The margin right is necessary to move scrollbar a bit to the right, from the edge - it wouldn't be distinguishable to the user when no scrollbar
+  padding: 0 18px 0 20px;
+  margin-right: 2px;
   display: flex;
   flex-direction: column;
 

src/components/MessageCard/MessageCard.stories.mdx

@@ -41,6 +41,35 @@ This component renders a Message Card Notification with (optional) Title, Subtit
   </Story>
 </Canvas>
 
+# with body scrollbar
+
+<Canvas>
+  <Story name="with body scrollbar">
+    <MessageCard
+      key="default"
+      in={boolean('show', true)}
+      isMobile={boolean('isMobile', false)}
+      isWithBoxShadow={boolean('isWithBoxShadow', true)}
+      withAnimation={true}
+      align={select('Align', { Right: 'right', Left: 'left' }, 'right')}
+      subtitle={text('Subtitle', 'The J&G Team is here')}
+      title={text('Title', 'Need help?')}
+      body={text(
+        'Body',
+        '<p>This <i>sentence</i> has five <u>words</u>. has five more <code class="inline-code">words</code></p><ul> <li>Point one</li><li>Somewhat unimaginatively , I&#39;ve <s>compartmentalized</s> my incomprehensibilities. Furthermore, announcements of such long-windedness are likely un-copyrightable!</li><li>Text</li></ul><p>Hol’ up, here comes a blockquote. Thanks,</p><blockquote> <p>This sentence has five words. Here are five more words. Five-word sentences are fine. But several together become monotonous. Listen to what is happening. The writing is getting boring. The sound of it drones. It’s like a stuck record. The ear demands some variety. Now listen. I vary the sentence length, and I create music. Music. The writing sings. It has a pleasant rhythm, a lilt, a harmony. I use short sentences</p></blockquote><p><b>Bold text</b> is charcoal.800 whist links are <a href="https://www.google.com/">blue.600</a></p><ol> <li>Point one</li><li>Point two is made up of two lines, of course list items can extend well beyond this, but still respect the grid</li><li>Text</li></ol><pre><code><p>let settings = HSBeaconSettings(beaconId: "cac8be08-60a3 -46e8-b22e-ed50bfcaa0aa"); HSBeacon.open(settings);</p></code></pre><p>The J&amp;G Support Team are always happy.</p>'
+      )}
+      image={{
+        height: '700',
+        width: '1050',
+        url:
+          'https://images.unsplash.com/photo-1620607812709-f7c4a88baf11?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80',
+      }}
+      action={() => <MessageCard.Button>Click here</MessageCard.Button>}
+      style={{ height: '600px' }}
+    />
+  </Story>
+</Canvas>
+
 # With image
 
 <Canvas>