From 4bb35c5043db4bc23c1fd553449d0d597e6df51b Mon Sep 17 00:00:00 2001
From: Harrison Healey <harrisonmhealey@gmail.com>
Date: Tue, 8 Jul 2025 11:55:24 -0400
Subject: [PATCH] MM-64417 Change permissions table to use a grid for animation
 (#32573)

* MM-64417 Change permissions table to use a grid for animation

* Don't change padding on permissions table when animating

* Update snapshots

* Combine CSS for AdminPanel and AdminPanelTogglable

* Removed leftover reference to old CSS file

---------

Co-authored-by: Mattermost Build <build@mattermost.com>
---
 .../widgets/admin_console/admin_panel.scss    | 18 +++++++++++++++++
 .../admin_panel_togglable.test.tsx            | 20 +++++++++++++++++--
 .../admin_console/admin_panel_togglable.tsx   |  8 +++++++-
 .../src/sass/components/_permissions.scss     | 10 ----------
 4 files changed, 43 insertions(+), 13 deletions(-)

diff --git a/webapp/channels/src/components/widgets/admin_console/admin_panel.scss b/webapp/channels/src/components/widgets/admin_console/admin_panel.scss
index 362facae9f..71aa053ce6 100644
--- a/webapp/channels/src/components/widgets/admin_console/admin_panel.scss
+++ b/webapp/channels/src/components/widgets/admin_console/admin_panel.scss
@@ -68,3 +68,21 @@
         }
     }
 }
+
+.AdminPanelTogglable {
+    .AdminPanelTogglableContent {
+        display: grid;
+        grid-template-rows: 1fr;
+        transition: all 0.4s ease-in-out 0s;
+    }
+
+    &.closed {
+        .AdminPanelTogglableContent {
+            grid-template-rows: 0fr;
+        }
+    }
+
+    .AdminPanelTogglableContent .AdminPanelTogglableContentInner {
+        overflow: hidden;
+    }
+}
diff --git a/webapp/channels/src/components/widgets/admin_console/admin_panel_togglable.test.tsx b/webapp/channels/src/components/widgets/admin_console/admin_panel_togglable.test.tsx
index 31a5bc19ef..116064277e 100644
--- a/webapp/channels/src/components/widgets/admin_console/admin_panel_togglable.test.tsx
+++ b/webapp/channels/src/components/widgets/admin_console/admin_panel_togglable.test.tsx
@@ -44,7 +44,15 @@ describe('components/widgets/admin_console/AdminPanelTogglable', () => {
                 }
               }
             >
-              Test
+              <div
+                className="AdminPanelTogglableContent"
+              >
+                <div
+                  className="AdminPanelTogglableContentInner"
+                >
+                  Test
+                </div>
+              </div>
             </AdminPanel>
         `);
     });
@@ -77,7 +85,15 @@ describe('components/widgets/admin_console/AdminPanelTogglable', () => {
                 }
               }
             >
-              Test
+              <div
+                className="AdminPanelTogglableContent"
+              >
+                <div
+                  className="AdminPanelTogglableContentInner"
+                >
+                  Test
+                </div>
+              </div>
             </AdminPanel>
         `);
     });
diff --git a/webapp/channels/src/components/widgets/admin_console/admin_panel_togglable.tsx b/webapp/channels/src/components/widgets/admin_console/admin_panel_togglable.tsx
index a7a9ca8028..ebab29ae04 100644
--- a/webapp/channels/src/components/widgets/admin_console/admin_panel_togglable.tsx
+++ b/webapp/channels/src/components/widgets/admin_console/admin_panel_togglable.tsx
@@ -27,6 +27,8 @@ const AdminPanelTogglable = ({
     id,
     onToggle,
 }: Props) => {
+    // The content is rendered in two divs: an outer one that uses CSS grid to trick the browser into animating height
+    // and an inner one to prevent the content from overflowing the grid.
     return (
         <AdminPanel
             className={'AdminPanelTogglable ' + className + (open ? '' : ' closed')}
@@ -36,7 +38,11 @@ const AdminPanelTogglable = ({
             onHeaderClick={onToggle}
             button={<AccordionToggleIcon/>}
         >
-            {children}
+            <div className='AdminPanelTogglableContent'>
+                <div className='AdminPanelTogglableContentInner'>
+                    {children}
+                </div>
+            </div>
         </AdminPanel>
     );
 };
diff --git a/webapp/channels/src/sass/components/_permissions.scss b/webapp/channels/src/sass/components/_permissions.scss
index 67008b7519..ceac93eece 100644
--- a/webapp/channels/src/sass/components/_permissions.scss
+++ b/webapp/channels/src/sass/components/_permissions.scss
@@ -29,14 +29,6 @@
         text-decoration: none;
     }
 
-    &.closed {
-        .permissions-tree {
-            max-height: 0;
-            padding: 0 1.5rem;
-            overflow-y: hidden;
-        }
-    }
-
     .no-team-schemes {
         padding: 20px;
         margin: 20px;
@@ -80,9 +72,7 @@
 }
 
 .permissions-tree {
-    max-height: 2000px;
     padding: 0.8em 1.5rem;
-    transition: all 0.4s ease-in-out 0s;
 
     &.guest {
         .permission-row {