fix(permissions) improve identities table column widths (#1032)

## Done

- fix(permissions) improve identities table column widths

## QA

1. Run the LXD-UI:
- On the demo server via the link posted by @webteam-app below. This is
only available for PRs created by collaborators of the repo. Ask
@mas-who or @edlerd for access.
- With a local copy of this branch, [build and run as described in the
docs](../CONTRIBUTING.md#setting-up-for-development).
2. Perform the following QA steps:
- check the permissions > identities table in different browser sizes.

src/pages/permissions/PermissionIdentities.tsx

@@ -72,12 +72,12 @@ const PermissionIdentities: FC = () => {
   const headers = [
     { content: "Name", className: "name", sortKey: "name" },
     { content: "ID", sortKey: "id" },
-    { content: "Auth method", sortKey: "authmethod" },
+    { content: "Auth method", sortKey: "authmethod", className: "auth-method" },
     { content: "Type", sortKey: "type" },
     {
       content: "Groups",
       sortKey: "groups",
-      className: "u-align--right",
+      className: "u-align--right group-count",
     },
     { "aria-label": "Actions", className: "u-align--right actions" },
   ];
@@ -142,6 +142,7 @@ const PermissionIdentities: FC = () => {
           content: identity.authentication_method.toUpperCase(),
           role: "cell",
           "aria-label": "Auth method",
+          className: "auth-method",
         },
         {
           content: <IdentityResource identity={identity} truncate={false} />,
@@ -153,7 +154,7 @@ const PermissionIdentities: FC = () => {
         {
           content: identity.groups?.length || 0,
           role: "cell",
-          className: "u-align--right",
+          className: "u-align--right group-count",
           "aria-label": "Groups for this identity",
         },
         {
@@ -283,6 +284,7 @@ const PermissionIdentities: FC = () => {
             >
               <SelectableMainTable
                 id="identities-table"
+                className="permission-identities"
                 headers={headers}
                 rows={sortedRows}
                 sortable

src/sass/_permission_identities.scss

@@ -0,0 +1,13 @@
+.permission-identities {
+  .auth-method {
+    width: 8rem;
+  }
+
+  .group-count {
+    width: 6rem;
+  }
+
+  .actions {
+    width: 8.5rem;
+  }
+}

src/sass/styles.scss

@@ -107,6 +107,7 @@ $border-thin: 1px solid $color-mid-light !default;
 @import "pattern_navigation";
 @import "pattern_terminal";
 @import "permission_confirm_modal";
+@import "permission_identities";
 @import "permission_group_selection";
 @import "permission_groups";
 @import "profile_detail_overview";