From ca726867663b6f1a43bb72ef1873ab759abefbd4 Mon Sep 17 00:00:00 2001
From: Andre Vasconcelos <a-andre.vasconcelos@mattermost.com>
Date: Mon, 6 Apr 2026 16:39:16 +0300
Subject: [PATCH] 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
---
 .../browse_channels/browse_channels.scss      | 22 +++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/webapp/channels/src/components/browse_channels/browse_channels.scss b/webapp/channels/src/components/browse_channels/browse_channels.scss
index acc393efe93..8630056a424 100644
--- a/webapp/channels/src/components/browse_channels/browse_channels.scss
+++ b/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;
                 }
             }
         }