fix(fuselage): Message Highlight touching text (#1056)

Author: gabriellsh

packages/fuselage/src/components/Message/Messages.stories.tsx

@@ -70,15 +70,16 @@ export const Default: ComponentStory<typeof Message> = () => (
           pariatur. Consectetur adipiscing{' '}
           <Message.Highlight variant='critical'>
             highlighted text
-          </Message.Highlight>{' '}
+          </Message.Highlight>
+          touching text.{' '}
           <Message.Mention clickable tag='@' variant='relevant'>
             all
-          </Message.Mention>{' '}
-          elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+          </Message.Mention>
+          . elit, sed do eiusmod tempor incididunt ut labore et dolore magna
           <Message.Mention clickable tag='@' variant='other'>
             Gabriel.Henriques
-          </Message.Mention>{' '}
-          aliqua. Ut enim ad minim veniam...
+          </Message.Mention>
+          . aliqua. Ut enim ad minim veniam...
         </Message.Body>
         <MessageReactions>
           <MessageReactions.Reaction mine counter={1} />

packages/fuselage/src/components/Message/Messages.styles.scss

@@ -327,7 +327,7 @@ $message-highlight-colors-background-other-color: theme(
 
     display: inline-block;
 
-    padding-inline-start: lengths.padding(2);
+    padding-inline: lengths.padding(2);
 
     white-space: nowrap;
 
@@ -348,7 +348,7 @@ $message-highlight-colors-background-other-color: theme(
 
       z-index: -1;
 
-      width: calc(100% + lengths.padding(2));
+      width: 100%;
       height: 18px;
 
       content: '';