Fix message styles (#6623)

Signed-off-by: Kristina Fefelova <kristin.fefelova@gmail.com>

packages/theme/styles/_text-editor.scss

@@ -200,6 +200,13 @@
   }
 }
 
+.text-markup-view {
+  margin: 0;
+
+  p:first-child { margin-block-start: 0; }
+  p:last-child { margin-block-end: 0; }
+}
+
 @supports (selector(:has(.text-editor-image-container))) {
   p:has(> .text-editor-image-container) {
     user-select: none;

plugins/activity-resources/src/components/activity-message/ActivityMessageTemplate.svelte

@@ -201,7 +201,9 @@
         {#if !isShort}
           <div class="header clear-mins">
             {#if person}
-              <EmployeePresenter value={person} shouldShowAvatar={false} compact />
+              <div class="username">
+                <EmployeePresenter value={person} shouldShowAvatar={false} compact />
+              </div>
             {:else}
               <div class="strong">
                 <Label label={core.string.System} />
@@ -420,4 +422,9 @@
     right: -0.375rem;
     color: var(--content-color);
   }
+
+  .username {
+    font-weight: 500;
+    margin-right: 0.25rem;
+  }
 </style>

plugins/chunter-resources/src/components/chat-message/ChatMessagePresenter.svelte

@@ -195,6 +195,9 @@
           <ShowMore limit={compact ? 80 : undefined}>
             <div class="clear-mins">
               <MessageViewer message={value.message} />
+              {#if (value.attachments ?? 0) > 0 || (value.inlineButtons ?? 0) > 0}
+                <div class="mt-2" />
+              {/if}
               <AttachmentDocList {value} {attachments} imageSize={attachmentImageSize} {videoPreload} />
               <InlineButtons {value} {inlineButtons} />
             </div>
@@ -202,6 +205,9 @@
         {:else}
           <div class="clear-mins">
             <MessageViewer message={value.message} />
+            {#if (value.attachments ?? 0) > 0 || (value.inlineButtons ?? 0) > 0}
+              <div class="mt-2" />
+            {/if}
             <AttachmentDocList {value} {attachments} imageSize={attachmentImageSize} {videoPreload} />
             <InlineButtons {value} {inlineButtons} />
           </div>