Middle Header, Quick Preview Modal Header: Better styles

src/components/middle/MiddleHeader.scss

@@ -116,7 +116,7 @@
 
     font-size: 1.125rem;
     font-weight: var(--font-weight-medium);
-    line-height: 1.375rem;
+    line-height: 1.5rem;
     text-overflow: ellipsis;
     white-space: pre;
 

src/components/modals/quickPreview/QuickPreviewModalHeader.module.scss

@@ -1,7 +1,11 @@
 .root {
   position: relative;
-  min-height: 3rem;
+
-  padding: 0.5rem 0.625rem 0.625rem 0.75rem !important;
+  display: flex;
+  align-items: center;
+
+  min-height: 3.625rem;
+  padding: 0 0.75rem;
   border-bottom: 1px solid var(--color-borders);
 
   :global(.modal-title) {
@@ -38,8 +42,8 @@
 
   :global(.Avatar) {
     flex-shrink: 0;
-    width: 2.625rem;
+    width: 2.5rem;
-    height: 2.625rem;
+    height: 2.5rem;
   }
 
   :global(.info) {
@@ -47,25 +51,27 @@
     display: flex;
     flex: 1;
     flex-direction: column;
-    gap: 0.125rem;
 
     text-align: left;
   }
 
   :global(.title),
   :global(.fullName) {
+    --custom-emoji-size: 1.375rem;
+
     overflow: hidden;
 
     margin-bottom: 0;
 
-    font-size: 1rem;
+    font-size: 1.0625rem;
     font-weight: var(--font-weight-semibold);
-    line-height: 1.25rem;
+    line-height: 1.5rem;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
-  :global(.status) {
+  :global(.status), :global(.typing-status) {
+    margin: 0;
     font-size: 0.875rem;
     line-height: 1.125rem;
     color: var(--color-text-secondary);

src/components/modals/quickPreview/QuickPreviewModalHeader.tsx

@@ -39,7 +39,7 @@ type StateProps = {
   hasUnreadMark?: boolean;
 };
 
-const EMOJI_STATUS_SIZE = 20;
+const EMOJI_STATUS_SIZE = 22;
 
 const QuickPreviewModalHeader: FC<OwnProps & StateProps> = ({
   chatId,