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>

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;
+    }
+}

webapp/channels/src/components/widgets/admin_console/admin_panel_togglable.test.tsx

@@ -43,8 +43,16 @@ describe('components/widgets/admin_console/AdminPanelTogglable', () => {
                   "id": "test-title-id",
                 }
               }
+            >
+              <div
+                className="AdminPanelTogglableContent"
+              >
+                <div
+                  className="AdminPanelTogglableContentInner"
                 >
                   Test
+                </div>
+              </div>
             </AdminPanel>
         `);
     });
@@ -76,8 +84,16 @@ describe('components/widgets/admin_console/AdminPanelTogglable', () => {
                   "id": "test-title-id",
                 }
               }
+            >
+              <div
+                className="AdminPanelTogglableContent"
+              >
+                <div
+                  className="AdminPanelTogglableContentInner"
                 >
                   Test
+                </div>
+              </div>
             </AdminPanel>
         `);
     });

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/>}
         >
+            <div className='AdminPanelTogglableContent'>
+                <div className='AdminPanelTogglableContentInner'>
                     {children}
+                </div>
+            </div>
         </AdminPanel>
     );
 };

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 {