diff --git a/web/modals/chat/pinned-messages-modal.css b/web/modals/chat/pinned-messages-modal.css
--- a/web/modals/chat/pinned-messages-modal.css
+++ b/web/modals/chat/pinned-messages-modal.css
@@ -1,3 +1,7 @@
+.container {
+  height: 80vh;
+}
+
 hr.separator {
   border: 0;
   margin: 20px 0 0 0;
@@ -8,12 +12,10 @@
 }
 
 .messageResultsContainer {
+  display: flex;
+  flex-direction: column;
   overflow-y: scroll;
-  padding: 0 32px 8px 32px;
-}
-
-.messageResultsContainer > * {
-  margin-bottom: 16px;
+  row-gap: 16px;
 }
 
 .loadingIndicator {
@@ -21,7 +23,7 @@
 }
 
 .topSpace {
-  height: 48px;
+  height: 8px;
   align-items: center;
   justify-content: center;
   display: flex;
diff --git a/web/modals/chat/pinned-messages-modal.react.js b/web/modals/chat/pinned-messages-modal.react.js
--- a/web/modals/chat/pinned-messages-modal.react.js
+++ b/web/modals/chat/pinned-messages-modal.react.js
@@ -158,12 +158,20 @@
 
   const modalName = pinnedMessageCountText(modifiedItems.length);
 
+  const subheader = React.useMemo(() => <hr className={css.separator} />, []);
+
   return (
-    <Modal name={modalName} onClose={popModal} size="large">
-      <hr className={css.separator} />
-      <div className={css.topSpace}>{loadingIndicator}</div>
-      <div className={css.messageResultsContainer}>
-        {messageResultsToDisplay}
+    <Modal
+      name={modalName}
+      onClose={popModal}
+      size="large"
+      subheader={subheader}
+    >
+      <div className={css.container}>
+        <div className={css.topSpace}>{loadingIndicator}</div>
+        <div className={css.messageResultsContainer}>
+          {messageResultsToDisplay}
+        </div>
       </div>
     </Modal>
   );