Seen By Modal: UI improvements (#3150)

src/components/common/SeenByModal.module.scss

@@ -0,0 +1,3 @@
+.modal :global(.modal-content) {
+  padding: 0.5rem !important;
+}

src/components/common/SeenByModal.tsx

@@ -3,6 +3,7 @@ import { getActions, withGlobal } from '../../global';
 
 import { selectChatMessage, selectTabState } from '../../global/selectors';
 import { formatDateAtTime } from '../../util/dateFormat';
+import buildClassName from '../../util/buildClassName';
 import useLang from '../../hooks/useLang';
 import useCurrentOrPrev from '../../hooks/useCurrentOrPrev';
 
@@ -11,6 +12,8 @@ import Button from '../ui/Button';
 import PrivateChatInfo from './PrivateChatInfo';
 import ListItem from '../ui/ListItem';
 
+import styles from './SeenByModal.module.scss';
+
 export type OwnProps = {
   isOpen: boolean;
 };
@@ -60,7 +63,7 @@ function SeenByModal({
     <Modal
       isOpen={isOpen}
       onClose={closeSeenByModal}
-      className="narrow"
+      className={buildClassName(styles.modal, 'narrow')}
       title={`Seen by ${memberIds?.length} users`}
     >
       <div dir={lang.isRtl ? 'rtl' : undefined}>

src/components/middle/ReactorListModal.scss

@@ -8,6 +8,7 @@
     height: min(92vh, 32rem);
     display: flex;
     flex-direction: column;
+    padding: 0.5rem 0 !important;
   }
 
   .reactor-list-wrapper {
@@ -17,6 +18,7 @@
 
   .confirm-dialog-button {
     align-self: flex-end;
+    margin: 0 0.5rem;
   }
 
   .Reactions {
@@ -37,6 +39,7 @@
     max-height: 100%;
     overflow: auto;
     overflow-x: hidden;
+    padding: 0 0.5rem;
   }
 
   .reactors-list-item {