fix permission list scroll

apps/client/src/ee/page-permission/components/page-permission-item.tsx

@@ -1,4 +1,4 @@
-import { Group, Menu, Text, UnstyledButton } from "@mantine/core";
+import { Menu, Text, UnstyledButton, Group } from "@mantine/core";
 import { IconChevronDown, IconCheck } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
 import { useAtomValue } from "jotai";
@@ -43,23 +43,18 @@ export function PagePermissionItem({
         {member.type === "group" && <IconGroupCircle />}
 
         <div className={classes.permissionItemDetails}>
-          <Group gap={4}>
+          <Text fz="sm" fw={500} truncate>
-            <Text fz="sm" fw={500} lineClamp={1}>
             {member.name}
+            {isCurrentUser && <Text span c="dimmed"> ({t("You")})</Text>}
           </Text>
-            {isCurrentUser && (
+          <Text fz="xs" c="dimmed" truncate>
-              <Text fz="sm" c="dimmed">
-                ({t("You")})
-              </Text>
-            )}
-          </Group>
-          <Text fz="xs" c="dimmed" lineClamp={1}>
             {member.type === "user" && member.email}
             {member.type === "group" && formatMemberCount(member.memberCount, t)}
           </Text>
         </div>
       </div>
 
+      <div className={classes.permissionItemRole}>
         {isCurrentUser || disabled ? (
           <Text size="sm" c="dimmed">
             {t(roleLabel)}
@@ -103,5 +98,6 @@ export function PagePermissionItem({
           </Menu>
         )}
       </div>
+    </div>
   );
 }

apps/client/src/ee/page-permission/components/page-permission-list.tsx

@@ -163,7 +163,7 @@ export function PagePermissionList({
         </Text>
       </Group>
 
-      <ScrollArea.Autosize mah={250}>
+      <ScrollArea mah={250}>
         {sortedMembers.map((member) => (
           <PagePermissionItem
             key={`${member.type}-${member.id}`}
@@ -173,7 +173,7 @@ export function PagePermissionList({
             disabled={!canManage}
           />
         ))}
-      </ScrollArea.Autosize>
+      </ScrollArea>
     </>
   );
 }

apps/client/src/ee/page-permission/components/page-permission-tab.tsx

@@ -26,8 +26,8 @@ import {
   useUnrestrictPageMutation,
 } from "@/ee/page-permission/queries/page-permission-query";
 import { pagePermissionRoleData } from "@/ee/page-permission/types/page-permission-role-data";
-import { GeneralAccessSelect } from "./general-access-select";
+import { GeneralAccessSelect } from "@/ee/page-permission";
-import { PagePermissionList } from "./page-permission-list";
+import { PagePermissionList } from "@/ee/page-permission";
 import classes from "./page-permission.module.css";
 import { buildPageUrl } from "@/features/page/page.utils";
 

apps/client/src/ee/page-permission/components/page-permission.module.css

@@ -37,6 +37,7 @@
   align-items: center;
   justify-content: space-between;
   padding: var(--mantine-spacing-xs) 0;
+  gap: var(--mantine-spacing-sm);
 }
 
 .permissionItemInfo {
@@ -45,11 +46,19 @@
   gap: var(--mantine-spacing-sm);
   flex: 1;
   min-width: 0;
+  overflow: hidden;
 }
 
 .permissionItemDetails {
   min-width: 0;
   flex: 1;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.permissionItemRole {
+  flex-shrink: 0;
 }
 
 .avatarStack {