-

user/web/src/components/UserManagement.tsx

@@ -5,7 +5,7 @@ import {
   Badge,
   Group,
   Text,
-  Stack
+  SidebarLayout
 } from '@skybridge/web-components';
 import { Avatar } from '@mantine/core';
 import { IconUser, IconMail } from '@tabler/icons-react';
@@ -145,12 +145,17 @@ const UserManagement: React.FC = () => {
   ];
 
   return (
-    <Stack 
-      gap="md" 
-      style={{
-        transition: 'margin-right 0.3s ease',
-        marginRight: userSidebarOpened ? '400px' : '0',
-      }}
+    <SidebarLayout
+      sidebarOpened={userSidebarOpened}
+      sidebarWidth={400}
+      sidebar={
+        <UserSidebar
+          opened={userSidebarOpened}
+          onClose={() => setUserSidebarOpened(false)}
+          onSuccess={handleSuccess}
+          editUser={editingUser}
+        />
+      }
     >
       <DataTable
         data={users}
@@ -170,14 +175,7 @@ const UserManagement: React.FC = () => {
         onRefresh={() => loadUsers()}
         emptyMessage="No users found"
       />
-      
-      <UserSidebar
-        opened={userSidebarOpened}
-        onClose={() => setUserSidebarOpened(false)}
-        onSuccess={handleSuccess}
-        editUser={editingUser}
-      />
-    </Stack>
+    </SidebarLayout>
   );
 };