[MM-61582][MM-61605][MM-61622][MM-63029][MM-63026][MM-63059] Mobile View accessibility fixes (#31328)

* [MM-61582] Ensure textbox changes size when the window is too small

* [MM-61605] Fix clipping on menu modal in mobile view

* [MM-61622] Make mobile view RHS scrollable

* [MM-63029] Fix mobile view Browse Channels modal arrangement

* [MM-63026] Make new channel body scrollable if needed, flex to full screen on mobile view

* [MM-63059] Make Settings Modal properly responsive with flexbox for mobile view

* Fix lint

* [MM-64033] Fix mobile view for User Groups, another fix for Browse Channels

* Fix notification modal

* PR feedback

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

webapp/channels/src/components/browse_channels/browse_channels.scss

@@ -1,6 +1,10 @@
 #browseChannelsModal {
     .modal-dialog {
         margin-top: calc(45vh - 240px) !important;
+
+        @media screen and (max-width: 640px) {
+            margin-top: 0 !important;
+        }
     }
 
     .filter-row--full {

webapp/channels/src/components/channel_notifications_modal/channel_notifications_modal.scss

@@ -100,8 +100,7 @@
 
         .modal-content {
             display: flex;
-            height: 100vh;
+            max-height: 100vh;
-            max-height: unset;
             flex-direction: column;
             border-radius: unset;
         }
@@ -113,10 +112,15 @@
         }
     }
 
-    @media screen and (max-height: 600px) {
+    @media screen and (max-height: 600px) and (min-width: 768px) {
         .modal-content, .GenericModal__wrapper {
             max-height: 85vh !important;
         }
     }
-    
+
+    @media screen and (max-width: 640px) {
+        .GenericModal__wrapper {
+            max-height: unset !important;
+        }
+    }
 }

webapp/channels/src/components/new_channel_modal/new_channel_modal.scss

@@ -46,6 +46,18 @@
             text-align: left;
         }
     }
+
+    @media screen and (max-width: 640px) {
+        .modal-content .GenericModal__wrapper {
+            display: flex;
+            height: 100vh;
+            flex-direction: column;
+
+            > .modal-body {
+                flex: 1
+            }
+        }
+    }
 }
 
 #new-channel-with-board-tooltip {
@@ -63,3 +75,13 @@
         font-weight: 500;
     }
 }
+
+@media screen and (max-width: 640px) {
+    .app__body {
+        &.announcement-bar--fixed {
+            .new-channel-modal .modal-content .GenericModal__wrapper {
+                height: calc(100vh - 40px);
+            }
+        }
+    }
+}

webapp/channels/src/components/widgets/public-private-selector/public-private-selector.scss

@@ -104,7 +104,7 @@
         }
     }
 
-    @media screen and (max-width: 640px) {
+    @media screen and (max-width: 580px) {
         flex-direction: column;
 
         .public-private-selector-button {

webapp/channels/src/sass/components/_modal.scss

@@ -63,10 +63,16 @@
             font-weight: 400;
         }
 
+        .input-wrapper > div {
+            display: flex;
+            flex-direction: column;
+        }
+
         .custom-textarea {
-            height: auto;
+            height: auto !important;
-            min-height: 8em;
+            min-height: 46px;
             max-height: 60vh;
+            flex-basis: 8em;
             -webkit-overflow-scrolling: touch;
             -ms-overflow-style: auto;
             overflow-y: auto;

webapp/channels/src/sass/responsive/_mobile.scss

@@ -70,6 +70,16 @@
             .settings-modal {
                 .modal-body {
                     min-height: 100%;
+
+                    .GenericModal__body {
+                        display: flex;
+                        max-height: 100%;
+
+                        > div {
+                            max-height: 100%;
+                            flex-grow: 1;
+                        }
+                    }
                 }
 
                 &.display--content {
@@ -78,9 +88,22 @@
                     }
 
                     .settings-table {
-                        display: block;
+                        display: flex;
+                        min-height: 0;
+                        max-height: 100%;
 
                         .settings-content {
+                            > div {
+                                display: flex;
+                                max-height: 100%;
+
+                                > div {
+                                    display: flex;
+                                    flex-direction: column;
+                                    flex-grow: 1;
+                                }
+                            }
+
                             .section-min__title {
                                 padding-right: 15px;
                             }
@@ -127,9 +150,6 @@
                         }
 
                         .modal-header {
-                            position: absolute;
-                            z-index: 5;
-                            top: 0;
                             display: flex;
                             width: 100%;
                             background-color: var(--center-channel-bg);
@@ -194,7 +214,7 @@
                             .user-settings {
                                 overflow: auto;
                                 max-height: 100vh;
-                                padding: 100px 20px 30px;
+                                padding: 20px 30px;
                             }
                         }
 
@@ -1415,6 +1435,7 @@
 
         .sidebar-right__body {
             height: calc(100% - 56px);
+            overflow-y: scroll;
         }
     }
 
@@ -1558,7 +1579,7 @@
     }
 
     .filtered-user-list {
-        height: calc(100vh - 80px);
+        height: calc(100vh - 80px) !important;
     }
 
     .more-modal--action {
@@ -1828,6 +1849,37 @@
                 }
             }
         }
+
+        #browseChannelsModal.modal .GenericModal, #userGroupsModal.modal .GenericModal {
+            .GenericModal__wrapper {
+                display: flex;
+                max-height: 100vh;
+                flex-direction: column;
+            }
+
+            .modal-header {
+                min-height: unset;
+                box-shadow: none;
+            
+                .GenericModal__header__text_container .GenericModal__header {
+                    flex-direction: column;
+                    align-items: flex-start;
+    
+                    button {
+                        margin-top: 16px;
+                    }
+                }
+            }
+    
+            .more-modal__dropdown {
+                flex-direction: column;
+                align-items: flex-start;
+    
+                #modalPreferenceContainer #menuWrapper {
+                    padding-left: 0;
+                }
+            }
+        }
     }
 
     .member-div {

webapp/platform/components/src/generic_modal/generic_modal.scss

@@ -137,13 +137,13 @@
                 }
             }
         }
+    }
 
-        @media screen and (max-width: 640px) {
+    @media screen and (max-width: 640px) {
-            margin: 0 !important;
+        margin: 0 !important;
 
-            .modal-header {
+        .modal-header {
-                box-shadow: var(--elevation-2);
+            box-shadow: var(--elevation-2);
-            }
         }
     }