diff --git a/web/modals/chat/message-reactions-modal.css b/web/modals/chat/message-reactions-modal.css index 63bbe3628..2117b578d 100644 --- a/web/modals/chat/message-reactions-modal.css +++ b/web/modals/chat/message-reactions-modal.css @@ -1,32 +1,33 @@ div.modalContentContainer { color: var(--fg); background-color: var(--modal-bg); flex: 1; display: flex; flex-direction: column; font-size: var(--l-font-18); overflow-y: auto; + max-height: 100%; } div.userRowContainer { display: flex; flex-direction: row; justify-content: space-between; padding: 8px; } div.userRowContainer:hover { cursor: pointer; background-color: var(--drawer-open-community-bg); border-radius: 8px; } div.userInfoContainer { display: flex; flex-direction: row; align-items: center; } div.username { margin-left: 8px; } diff --git a/web/modals/chat/pinned-messages-modal.css b/web/modals/chat/pinned-messages-modal.css index ea84d0b04..8e696caef 100644 --- a/web/modals/chat/pinned-messages-modal.css +++ b/web/modals/chat/pinned-messages-modal.css @@ -1,37 +1,39 @@ .container { height: 80vh; + overflow: scroll; + max-height: 100%; } hr.separator { border: 0; margin: 20px 0 0 0; width: 100%; height: 2px; border: none; border-top: var(--shades-black-60) solid 1px; } .messageResultsContainer { display: flex; flex-direction: column; overflow-y: scroll; row-gap: 16px; } .loadingIndicator { text-align: center; } .topSpace { height: 8px; align-items: center; justify-content: center; display: flex; } .noPinnedMessages { color: var(--text-background-tertiary-default); display: flex; flex: 1; justify-content: center; } diff --git a/web/modals/modal.css b/web/modals/modal.css index 7ffa30816..0a78550f6 100644 --- a/web/modals/modal.css +++ b/web/modals/modal.css @@ -1,97 +1,98 @@ :root { --modal-width-small: 330px; --modal-width-large: 500px; } div.modalContainer { display: flex; background-color: var(--modal-background-primary-default); border-radius: 8px; flex-direction: column; margin: 20px; overflow: hidden; } div.modalContainerSmall { width: var(--modal-width-small); } div.modalContainerLarge { width: var(--modal-width-large); } .modalHeaderButtonsContainer { margin-left: 24px; display: flex; column-gap: 8px; align-items: center; } .modalButton { color: var(--modal-close-primary-default); } .modalButton:hover { color: var(--modal-close-primary-hover); } div.modalHeader { display: flex; flex-direction: column; padding: 32px 32px 0 32px; } div.modalHeaderTitle { display: flex; justify-content: space-between; align-items: center; } div.modalHeaderCentered { justify-content: center; } h2.title { font-size: 20px; font-weight: 500; line-height: 32px; color: var(--modal-header-primary-default); display: flex; align-items: center; column-gap: 8px; } h2.subtitle { font-size: var(--xs-font-12); font-weight: 400; line-height: 18px; color: var(--modal-fg); } .subheaderContainer { margin-top: 16px; } .modalContentContainer { padding: 16px 32px 24px; + overflow: hidden; } .buttonContainer { background-color: var(--modal-background-secondary-default); padding: 16px 32px; } .primaryButtonContainer > button { width: 100%; } .emptyButtonContainerOffset { height: 8px; } .primarySecondaryContainer { display: flex; justify-content: flex-end; align-items: center; column-gap: 16px; } diff --git a/web/modals/search-modal.css b/web/modals/search-modal.css index b8ded3128..9b5d92940 100644 --- a/web/modals/search-modal.css +++ b/web/modals/search-modal.css @@ -1,5 +1,6 @@ .container { 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 index b83ab901a..916dc2ff9 100644 --- a/web/modals/threads/gallery/thread-settings-media-gallery.css +++ b/web/modals/threads/gallery/thread-settings-media-gallery.css @@ -1,31 +1,32 @@ div.container { display: flex; flex-wrap: wrap; overflow-y: scroll; justify-content: flex-start; height: 80vh; padding-top: 16px; + max-height: 100%; } div.mediaContainer { flex: 0 1 31%; width: 150px; height: 200px; margin: 5px; } img.media, video.media { width: 100%; height: 100%; object-fit: cover; cursor: pointer; } .noMedia { margin-top: 16px; color: var(--text-background-tertiary-default); display: flex; flex: 1; justify-content: center; } diff --git a/web/modals/threads/notifications/notifications-modal.css b/web/modals/threads/notifications/notifications-modal.css index f752f2315..7eb177174 100644 --- a/web/modals/threads/notifications/notifications-modal.css +++ b/web/modals/threads/notifications/notifications-modal.css @@ -1,24 +1,26 @@ div.container { display: flex; flex-direction: column; row-gap: 20px; min-width: 343px; width: min-content; + overflow: auto; + max-height: 100%; } p.notice { text-align: center; font-size: var(--xs-font-12); color: var(--text-background-secondary-default); } p.parentThreadIsInBackgroundNotice { font-size: var(--m-font-16); color: var(--text-background-secondary-default); } div.optionsContainer { display: flex; flex-direction: column; row-gap: 12px; } diff --git a/web/modals/threads/sidebars/sidebars-modal.css b/web/modals/threads/sidebars/sidebars-modal.css index 99766e71f..1db1870de 100644 --- a/web/modals/threads/sidebars/sidebars-modal.css +++ b/web/modals/threads/sidebars/sidebars-modal.css @@ -1,82 +1,83 @@ div.sidebarListContainer { display: flex; flex-direction: column; line-height: var(--line-height-text); height: 80vh; + overflow: hidden; } div.sidebarList { overflow: auto; color: var(--sidebars-modal-color); } div.noSidebars { padding: 16px; text-align: center; color: var(--sidebars-modal-color); } button.sidebarContainer { padding: 0 16px; column-gap: 8px; align-items: flex-start; width: 100%; font-size: inherit; text-align: inherit; line-height: inherit; color: inherit; background: inherit; } button.sidebarContainer:hover { color: var(--sidebars-modal-color-hover); } div.sidebarInfo { flex: 1; display: flex; flex-direction: column; overflow: hidden; padding: 8px 0; } div.avatarContainer { display: flex; align-items: center; gap: 8px; } div.avatarOffset { margin-left: 24px; } div.longTextEllipsis { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } div.lastMessage { display: flex; justify-content: space-between; column-gap: 14px; } div.noMessage { text-align: center; font-style: italic; } div.lastActivity { white-space: nowrap; } div.unread { color: var(--fg); font-weight: var(--semi-bold); } img.sidebarArrow { position: relative; top: -12px; }