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,65 +43,61 @@ export function PagePermissionItem({
         {member.type === "group" && <IconGroupCircle />}
 
         <div className={classes.permissionItemDetails}>
-          <Group gap={4}>
-            <Text fz="sm" fw={500} lineClamp={1}>
-              {member.name}
-            </Text>
-            {isCurrentUser && (
-              <Text fz="sm" c="dimmed">
-                ({t("You")})
-              </Text>
-            )}
-          </Group>
-          <Text fz="xs" c="dimmed" lineClamp={1}>
+          <Text fz="sm" fw={500} truncate>
+            {member.name}
+            {isCurrentUser && <Text span c="dimmed"> ({t("You")})</Text>}
+          </Text>
+          <Text fz="xs" c="dimmed" truncate>
             {member.type === "user" && member.email}
             {member.type === "group" && formatMemberCount(member.memberCount, t)}
           </Text>
         </div>
       </div>
 
-      {isCurrentUser || disabled ? (
-        <Text size="sm" c="dimmed">
-          {t(roleLabel)}
-        </Text>
-      ) : (
-        <Menu withArrow position="bottom-end">
-          <Menu.Target>
-            <UnstyledButton>
-              <Group gap={4}>
-                <Text size="sm">{t(roleLabel)}</Text>
-                <IconChevronDown size={14} />
-              </Group>
-            </UnstyledButton>
-          </Menu.Target>
+      <div className={classes.permissionItemRole}>
+        {isCurrentUser || disabled ? (
+          <Text size="sm" c="dimmed">
+            {t(roleLabel)}
+          </Text>
+        ) : (
+          <Menu withArrow position="bottom-end">
+            <Menu.Target>
+              <UnstyledButton>
+                <Group gap={4}>
+                  <Text size="sm">{t(roleLabel)}</Text>
+                  <IconChevronDown size={14} />
+                </Group>
+              </UnstyledButton>
+            </Menu.Target>
 
-          <Menu.Dropdown>
-            {pagePermissionRoleData.map((role) => (
+            <Menu.Dropdown>
+              {pagePermissionRoleData.map((role) => (
+                <Menu.Item
+                  key={role.value}
+                  onClick={() => onRoleChange(member.id, member.type, role.value)}
+                  rightSection={
+                    role.value === member.role ? <IconCheck size={16} /> : null
+                  }
+                >
+                  <div>
+                    <Text size="sm">{t(role.label)}</Text>
+                    <Text size="xs" c="dimmed">
+                      {t(role.description)}
+                    </Text>
+                  </div>
+                </Menu.Item>
+              ))}
+              <Menu.Divider />
               <Menu.Item
-                key={role.value}
-                onClick={() => onRoleChange(member.id, member.type, role.value)}
-                rightSection={
-                  role.value === member.role ? <IconCheck size={16} /> : null
-                }
+                color="red"
+                onClick={() => onRemove(member.id, member.type)}
               >
-                <div>
-                  <Text size="sm">{t(role.label)}</Text>
-                  <Text size="xs" c="dimmed">
-                    {t(role.description)}
-                  </Text>
-                </div>
+                {t("Remove access")}
               </Menu.Item>
-            ))}
-            <Menu.Divider />
-            <Menu.Item
-              color="red"
-              onClick={() => onRemove(member.id, member.type)}
-            >
-              {t("Remove access")}
-            </Menu.Item>
-          </Menu.Dropdown>
-        </Menu>
-      )}
+            </Menu.Dropdown>
+          </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 { PagePermissionList } from "./page-permission-list";
+import { GeneralAccessSelect } from "@/ee/page-permission";
+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 {