refactor(site): minor improvements on users page popovers (#10492)

BrunoQuaresma · web-flow · commit e756a95759de · 2023-11-02T13:39:52.000Z
diff --git a/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx b/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx
@@ -1,16 +1,13 @@
 import { useTheme } from "@emotion/react";
 import { type Group } from "api/typesGenerated";
-
 import { Stack } from "components/Stack/Stack";
 import { Avatar } from "components/Avatar/Avatar";
 import { OverflowY } from "components/OverflowY/OverflowY";
-
 import TableCell from "@mui/material/TableCell";
 import Button from "@mui/material/Button";
 import List from "@mui/material/List";
 import ListItem from "@mui/material/ListItem";
 import GroupIcon from "@mui/icons-material/Group";
-
 import {
   Popover,
   PopoverTrigger,
@@ -68,7 +65,23 @@ export function UserGroupsCell({ userGroups }: GroupsCellProps) {
             </Button>
           </PopoverTrigger>
 
-          <PopoverContent disableScrollLock disableRestoreFocus>
+          <PopoverContent
+            disableScrollLock
+            disableRestoreFocus
+            css={{
+              ".MuiPaper-root": {
+                minWidth: "auto",
+              },
+            }}
+            anchorOrigin={{
+              vertical: "top",
+              horizontal: "center",
+            }}
+            transformOrigin={{
+              vertical: "bottom",
+              horizontal: "center",
+            }}
+          >
             <OverflowY maxHeight={400}>
               <List
                 component="ul"
diff --git a/site/src/pages/UsersPage/UsersTable/UserRoleCell.tsx b/site/src/pages/UsersPage/UsersTable/UserRoleCell.tsx
@@ -119,8 +119,17 @@ function OverflowRolePill({ roles }: OverflowRolePillProps) {
             rowGap: theme.spacing(1.5),
             padding: theme.spacing(1.5, 2),
             alignContent: "space-around",
+            minWidth: "auto",
           },
         }}
+        anchorOrigin={{
+          vertical: -4,
+          horizontal: "center",
+        }}
+        transformOrigin={{
+          vertical: "bottom",
+          horizontal: "center",
+        }}
       >
         {roles.map((role) => (
           <Pill
