permissions table ui fixes (#20640)

frontend/src/metabase/admin/permissions/components/PermissionsEditor/PermissionsEditor.styled.js

@@ -3,6 +3,6 @@ import styled from "@emotion/styled";
 export const PermissionsEditorRoot = styled.div`
   flex-grow: 1;
   position: relative;
-  overflow: hidden;
+  overflow: auto;
   padding: 1rem 0 2rem 0;
 `;

frontend/src/metabase/admin/permissions/components/PermissionsSidebar/PermissionsSidebar.styled.jsx

@@ -46,6 +46,7 @@ export const BackButton = styled.button`
   padding: 0.5rem;
   cursor: pointer;
   transition: color 200ms;
+  text-align: left;
 
   &:hover {
     color: ${color("accent7")};

frontend/src/metabase/admin/permissions/components/PermissionsTable/PermissionsTable.jsx

@@ -11,7 +11,6 @@ import {
   PermissionsTableRow,
   PermissionsTableCell,
   PermissionTableHeaderCell,
-  EntityNameCell,
   EntityNameLink,
   EntityName,
   HintIcon,
@@ -88,7 +87,7 @@ export function PermissionsTable({
           {entities.map(entity => {
             return (
               <PermissionsTableRow key={entity.id}>
-                <EntityNameCell>
+                <PermissionsTableCell>
                   {entity.canSelect ? (
                     <EntityNameLink onClick={() => onSelect(entity)}>
                       {entity.name}
@@ -102,7 +101,7 @@ export function PermissionsTable({
                       <HintIcon />
                     </Tooltip>
                   )}
-                </EntityNameCell>
+                </PermissionsTableCell>
 
                 {entity.permissions.map(permission => {
                   return (

frontend/src/metabase/admin/permissions/components/PermissionsTable/PermissionsTable.styled.jsx

@@ -49,15 +49,12 @@ export const PermissionsTableRow = styled.tr`
   border-bottom: 1px solid ${alpha(color("border"), 0.5)};
 `;
 
-export const EntityNameCell = styled(PermissionsTableCell)`
-  align-items: center;
-`;
-
-export const EntityName = styled.div`
+export const EntityName = styled.span`
   font-weight: 700;
 `;
 
 export const EntityNameLink = styled(Link)`
+  display: inline;
   font-weight: 700;
   text-decoration: underline;
   color: ${color("admin-navbar")};

frontend/src/metabase/components/tree/TreeNode.styled.jsx

@@ -61,6 +61,7 @@ ExpandToggleIcon.defaultProps = {
 };
 
 export const NameContainer = styled.div`
+  word-break: break-word;
   padding: 0.5rem 0.5rem 0.5rem 0.25rem;
   flex: 1;
 `;