diff --git a/webapp/packages/plugin-user-profile/src/UserProfileForm/UserForm.m.css b/webapp/packages/plugin-user-profile/src/UserProfileForm/UserForm.m.css
index e3b6d1e2e9..4582cbe5f8 100644
--- a/webapp/packages/plugin-user-profile/src/UserProfileForm/UserForm.m.css
+++ b/webapp/packages/plugin-user-profile/src/UserProfileForm/UserForm.m.css
@@ -49,6 +49,14 @@
   }
 }
 
+.box {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  height: 100%;
+  overflow: auto;
+}
+
 .contentBox {
   composes: theme-background-secondary theme-border-color-background from global;
   position: relative;
diff --git a/webapp/packages/plugin-user-profile/src/UserProfileForm/UserForm.tsx b/webapp/packages/plugin-user-profile/src/UserProfileForm/UserForm.tsx
index 4c14025f71..b2219c0215 100644
--- a/webapp/packages/plugin-user-profile/src/UserProfileForm/UserForm.tsx
+++ b/webapp/packages/plugin-user-profile/src/UserProfileForm/UserForm.tsx
@@ -36,29 +36,31 @@ export const UserForm = observer<Props>(function UserForm({ user, state, onClose
   const localProvider = user.linkedAuthProviders.includes(AUTH_PROVIDER_LOCAL_ID);
 
   return styled(styles)(
-    <TabsState>
-      <div className={s(moduleStyle, { topBar: true })}>
-        <div className={s(moduleStyle, { topBarTabs: true })}>
-          <div className={s(moduleStyle, { statusMessage: true })}>
-            <StatusMessage type={ENotificationType.Info} message={state.info.statusMessage} />
+    <div className={s(moduleStyle, { box: true })}>
+      <TabsState>
+        <div className={s(moduleStyle, { topBar: true })}>
+          <div className={s(moduleStyle, { topBarTabs: true })}>
+            <div className={s(moduleStyle, { statusMessage: true })}>
+              <StatusMessage type={ENotificationType.Info} message={state.info.statusMessage} />
+            </div>
+            <TabList className={s(moduleStyle, { tabList: true })} aria-label="User Settings" style={style} disabled={state.info.disabled}>
+              <UserInfoTab style={style} />
+              {localProvider && <AuthenticationTab style={style} />}
+            </TabList>
+          </div>
+          <div className={s(moduleStyle, { topBarActions: true })}>
+            {onClose && (
+              <Button type="button" mod={['outlined']} onClick={onClose}>
+                {translate('ui_processing_cancel')}
+              </Button>
+            )}
           </div>
-          <TabList className={s(moduleStyle, { tabList: true })} aria-label="User Settings" style={style} disabled={state.info.disabled}>
-            <UserInfoTab style={style} />
-            {localProvider && <AuthenticationTab style={style} />}
-          </TabList>
         </div>
-        <div className={s(moduleStyle, { topBarActions: true })}>
-          {onClose && (
-            <Button type="button" mod={['outlined']} onClick={onClose}>
-              {translate('ui_processing_cancel')}
-            </Button>
-          )}
+        <div className={s(moduleStyle, { contentBox: true })}>
+          <UserInfoPanel user={user} style={style} />
+          {localProvider && <AuthenticationPanel style={style} />}
         </div>
-      </div>
-      <div className={s(moduleStyle, { contentBox: true })}>
-        <UserInfoPanel user={user} style={style} />
-        {localProvider && <AuthenticationPanel style={style} />}
-      </div>
-    </TabsState>,
+      </TabsState>
+    </div>,
   );
 });