Fix/self message positioning (#167)

* Added 'self-invocation' class to top level div of SelfInvocation component.

* Removed 'text-sm' from Comment.vue.

It inherits text-sm from the Statement component.

* Removed 'text-sm' from some components.

* Removed 'text-sm' from more components.

* Moved text-alignment into components.

Instead of leaving it in MessageLayer CSS.

Author: MrCoder

cypress/e2e/__image_snapshots__/Defect 406 Fragments under Creation #0.png

@@ -1,7 +1,6 @@
 <template>
-  <!-- TODO: 12px to align comment with async message, which as padding-left 10px and left 2px -->
   <div
-    class="comments text-skin-comment min-w-[100px] flex text-left text-sm opacity-50 hover:opacity-100"
+    class="comments text-skin-comment min-w-[100px] flex text-left opacity-50 hover:opacity-100"
   >
     <div v-html="markedComment" :class="classNames" :style="commentStyle"></div>
   </div>

cypress/e2e/__image_snapshots__/Smoke test fragment #0.png

@@ -3,15 +3,15 @@
     <div class="segment">
       <comment v-if="comment" :comment="comment" :commentObj="commentObj" />
       <div
-        class="header bg-skin-fragment-header text-skin-fragment-header text-base leading-4 rounded-t relative"
+        class="header bg-skin-fragment-header text-skin-fragment-header leading-4 rounded-t relative"
       >
         <div
           v-if="numbering"
-          class="absolute right-[100%] top-0 pr-1 group-hover:hidden text-gray-500 text-sm font-thin leading-6"
+          class="absolute right-[100%] top-0 pr-1 group-hover:hidden text-gray-500 font-thin leading-6"
         >
           {{ number }}
         </div>
-        <div class="name font-semibold p-1 border-b text-sm">
+        <div class="name font-semibold p-1 border-b">
           <label class="p-0">
             <collapse-button
               label="Alt"

cypress/e2e/__image_snapshots__/Smoke test fragmentIssue #0.png

@@ -5,11 +5,11 @@
   >
     <comment v-if="comment" :comment="comment" :commentObj="commentObj" />
     <div
-      class="header text-skin-fragment-header bg-skin-fragment-header text-base leading-4 relative"
+      class="header text-skin-fragment-header bg-skin-fragment-header leading-4 relative"
     >
       <div
         v-if="numbering"
-        class="absolute right-[100%] top-0 pr-1 group-hover:hidden text-gray-500 text-sm font-thin leading-6"
+        class="absolute right-[100%] top-0 pr-1 group-hover:hidden text-gray-500 font-thin leading-6"
       >
         {{ number }}
       </div>

cypress/e2e/__image_snapshots__/Smoke test interaction #0.png

@@ -2,11 +2,11 @@
   <div class="fragment opt border-skin-fragment rounded" :style="fragmentStyle">
     <comment v-if="comment" :comment="comment" :commentObj="commentObj" />
     <div
-      class="header bg-skin-fragment-header text-skin-fragment-header text-base leading-4 relative"
+      class="header bg-skin-fragment-header text-skin-fragment-header leading-4 relative"
     >
       <div
         v-if="numbering"
-        class="absolute right-[100%] top-0 pr-1 group-hover:hidden text-gray-500 text-sm font-thin leading-6"
+        class="absolute right-[100%] top-0 pr-1 group-hover:hidden text-gray-500 font-thin leading-6"
       >
         {{ number }}
       </div>