From cfda7a71539fee8e8b1e65d0d71d0f7b662c5524 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Thu, 2 Nov 2023 12:00:19 +0000
Subject: [PATCH 1/2] refactor(site): minor improvements on users page popovers

---
 .../UsersPage/UsersTable/UserGroupsCell.tsx   | 19 ++++++++++++++++++-
 .../UsersPage/UsersTable/UserRoleCell.tsx     |  9 +++++++++
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx b/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx
index f4d32f3f52f32..4239d2a6060c0 100644
--- a/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx
+++ b/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx
@@ -16,6 +16,7 @@ import {
   PopoverTrigger,
   PopoverContent,
 } from "components/Popover/Popover";
+import { css } from "@emotion/css";
 
 type GroupsCellProps = {
   userGroups: readonly Group[] | undefined;
@@ -68,7 +69,23 @@ export function UserGroupsCell({ userGroups }: GroupsCellProps) {
             </Button>
           </PopoverTrigger>
 
-          <PopoverContent disableScrollLock disableRestoreFocus>
+          <PopoverContent
+            disableScrollLock
+            disableRestoreFocus
+            css={(theme) => ({
+              ".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
index fa45683ebbae6..7b016d3f9fabb 100644
--- 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

From 0029eaff767080838e988db1775175c6d169e450 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Thu, 2 Nov 2023 13:34:21 +0000
Subject: [PATCH 2/2] Fix lint

---
 site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx b/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx
index 4239d2a6060c0..431975197b4dc 100644
--- a/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx
+++ b/site/src/pages/UsersPage/UsersTable/UserGroupsCell.tsx
@@ -1,22 +1,18 @@
 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,
   PopoverContent,
 } from "components/Popover/Popover";
-import { css } from "@emotion/css";
 
 type GroupsCellProps = {
   userGroups: readonly Group[] | undefined;
@@ -72,11 +68,11 @@ export function UserGroupsCell({ userGroups }: GroupsCellProps) {
           <PopoverContent
             disableScrollLock
             disableRestoreFocus
-            css={(theme) => ({
+            css={{
               ".MuiPaper-root": {
                 minWidth: "auto",
               },
-            })}
+            }}
             anchorOrigin={{
               vertical: "top",
               horizontal: "center",