small fixes on chat behaviour

web/components/chat/ChatUserMessage/ChatUserMessage.module.scss

@@ -3,25 +3,13 @@
   font-size: 0.9rem;
   padding: 5px 15px 5px 5px;
   padding-left: 1rem;
-  .background {
-    position: absolute;
-    z-index: -1;
-    top: 0px;
-    left: 0px;
-    width: 100%;
-    height: 100%;
-    background-color: currentColor;
-    opacity: 0.07;
-    border-radius: .25rem;
-    overflow: hidden;
-  }
   .user {
     display: flex;
     align-items: center;
     font-family: var(--theme-header-font-family);
     font-weight: bold;
     .userName {
-      margin-left: .3rem;
+      margin-left: 0.3rem;
     }
   }
   .message {
@@ -66,12 +54,24 @@
     .customBorder {
       left: auto;
       right: 0px;
+      opacity: .85;
       &:after {
         left: 0px;
       }
     }
+    .background {
+      position: absolute;
+      z-index: -1;
+      top: 0px;
+      left: 0px;
+      width: 100%;
+      height: 100%;
+      background-color: currentColor;
+      opacity: 0.07;
+      border-radius: 0.25rem;
+      overflow: hidden;
+    }
   }
-
 
   .modMenuWrapper {
     position: absolute;
@@ -88,5 +88,3 @@
     display: block;
   }
 }
-
-

web/components/chat/ChatUserMessage/ChatUserMessage.tsx

@@ -47,7 +47,7 @@ export default function ChatUserMessage({
       >
         {!sameUserAsLast && (
           <div className={s.user} style={{ color }}>
-            <ModIcon />
+            {showModeratorMenu && <ModIcon />}
             <span className={s.userName}>{displayName}</span>
           </div>
         )}

web/components/ui/ModIcon.tsx

@@ -1,8 +1,15 @@
+import { CSSProperties } from 'react';
+
+interface Props {
+  style: CSSProperties;
+  fill: string;
+  stroke: string;
+}
 export default function ModIcon({
   style = { width: '1rem', height: '1rem' },
   fill = 'none',
   stroke = 'var(--color-owncast-gray-300)',
-}) {
+}: Props) {
   return (
     <svg
       fill={fill}