MM-67743 Fixing styling issues in Browse Channels modal (#35772)

* Fixing issues with browser channels modal

- Fixing "jumping around" issue on hover due to buttons being rendered dynamically
- Added max width for purpose so it doesn't take up the whole screen when long purpose is written

* Fixing modal overflow in mobile screen sizes

* Simplifying join button layout fix

* Fixing styles to be consistent with existing modals

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

@@ -1,10 +1,22 @@
 #browseChannelsModal {
+    .modal-content {
+        width: 100%;
+    }
+
     .modal-dialog {
         @media screen and (max-width: 640px) {
+            width: 100%;
+            max-width: 100%;
             margin-top: 0 !important;
         }
     }
 
+    @media screen and (max-width: 640px) {
+        .modal-content {
+            overflow: hidden;
+        }
+    }
+
     .filter-row {
         position: relative;
         padding: 0 32px;
@@ -130,6 +142,8 @@
             border-bottom: none;
 
             .more-modal__details {
+                overflow: hidden;
+                min-width: 0;
                 padding-left: 0;
                 color: rgba(var(--center-channel-color-rgb), 0.75);
 
@@ -161,8 +175,11 @@
                     }
 
                     .more-modal__description {
+                        overflow: hidden;
                         margin-left: 4px;
                         font-weight: 400;
+                        text-overflow: ellipsis;
+                        white-space: nowrap;
                     }
 
                     #membershipIndicatorContainer {
@@ -196,11 +213,12 @@
 
             .more-modal__actions {
                 button {
-                    display: none;
                     min-width: 54px;
                     height: 32px;
                     font-size: 12px;
                     font-weight: 600;
+                    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
+                    visibility: hidden;
                 }
             }
         }
@@ -213,7 +231,7 @@
             .more-modal__actions {
                 .primaryButton,
                 .outlineButton {
-                    display: inline-block;
+                    visibility: visible;
                 }
             }
         }