[web] Fix modal styles

Summary: issue: [[https://linear.app/comm/issue/ENG-8679/scroll-in-pinned-messages-on-web-seems-to-be-broken | ENG-8679]] The issue was that the pinned messages modal div was not scrollable, but fixing this revealed another issue: contents of Modal were wrapped by `modalContentContainer` which allowed its content to extend it. Test Plan: Checked ALL places where Modal component is used. Checked that after these changes they all work correctly. Here are modals that got changed: {F2568094} {F2568093} {F2568092} {F2568090} {F2568086} Here is before and after for the search component (using prod and dev): {F2568087} Reviewers: tomek, ashoat Reviewed By: tomek Differential Revision: https://phab.comm.dev/D13191
CommE2E · Aug 28, 2024 · 98a7d20 · 98a7d20
1 parent 062159e
commit 98a7d20
Show file tree

Hide file tree

Showing 7 changed files with 9 additions and 0 deletions.
diff --git a/web/modals/chat/message-reactions-modal.css b/web/modals/chat/message-reactions-modal.css
@@ -6,6 +6,7 @@ div.modalContentContainer {
   flex-direction: column;
   font-size: var(--l-font-18);
   overflow-y: auto;
+  max-height: 100%;
 }
 
 div.userRowContainer {

diff --git a/web/modals/chat/pinned-messages-modal.css b/web/modals/chat/pinned-messages-modal.css
@@ -1,5 +1,7 @@
 .container {
   height: 80vh;
+  overflow: scroll;
+  max-height: 100%;
 }
 
 hr.separator {

diff --git a/web/modals/modal.css b/web/modals/modal.css
@@ -74,6 +74,7 @@ h2.subtitle {
 
 .modalContentContainer {
   padding: 16px 32px 24px;
+  overflow: hidden;
 }
 
 .buttonContainer {

diff --git a/web/modals/search-modal.css b/web/modals/search-modal.css
@@ -2,4 +2,5 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  max-height: 100%;
 }
diff --git a/web/modals/threads/gallery/thread-settings-media-gallery.css b/web/modals/threads/gallery/thread-settings-media-gallery.css
@@ -5,6 +5,7 @@ div.container {
   justify-content: flex-start;
   height: 80vh;
   padding-top: 16px;
+  max-height: 100%;
 }
 
 div.mediaContainer {

diff --git a/web/modals/threads/notifications/notifications-modal.css b/web/modals/threads/notifications/notifications-modal.css
@@ -4,6 +4,8 @@ div.container {
   row-gap: 20px;
   min-width: 343px;
   width: min-content;
+  overflow: auto;
+  max-height: 100%;
 }
 
 p.notice {

diff --git a/web/modals/threads/sidebars/sidebars-modal.css b/web/modals/threads/sidebars/sidebars-modal.css
@@ -3,6 +3,7 @@ div.sidebarListContainer {
   flex-direction: column;
   line-height: var(--line-height-text);
   height: 80vh;
+  overflow: hidden;
 }
 
 div.sidebarList {