From 9812e13a0e3492cbe641db67a5e0a90a818b73b1 Mon Sep 17 00:00:00 2001
From: Jannis Braun <151788261+TheZwiss@users.noreply.github.com>
Date: Sun, 22 Mar 2026 02:33:05 +0100
Subject: [PATCH] fix: center settings content within content area

Content was left-aligned in the content pane, making it appear
off-center relative to the full modal. Add mx-auto to center
the max-w-[640px] wrapper within the content area, matching
Discord's centering behavior.
---
 packages/web/src/components/modals/SpaceSettings.tsx | 2 +-
 packages/web/src/components/modals/UserSettings.tsx  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/web/src/components/modals/SpaceSettings.tsx b/packages/web/src/components/modals/SpaceSettings.tsx
index 34c86251..26e9864f 100644
--- a/packages/web/src/components/modals/SpaceSettings.tsx
+++ b/packages/web/src/components/modals/SpaceSettings.tsx
@@ -379,7 +379,7 @@ export function SpaceSettingsModal() {
         {/* Content area (desktop always, mobile only when viewing content) */}
         {(!isMobile || mobileView === 'content') && (
           <div className="flex-1 min-w-0 overflow-y-auto scrollbar-thin py-6">
-            <div className="px-6 max-w-[640px]">
+            <div className="px-6 max-w-[640px] mx-auto">
               {/* Mobile back button */}
               {isMobile && (
                 <button
diff --git a/packages/web/src/components/modals/UserSettings.tsx b/packages/web/src/components/modals/UserSettings.tsx
index 68ba5d09..dcdcdd75 100644
--- a/packages/web/src/components/modals/UserSettings.tsx
+++ b/packages/web/src/components/modals/UserSettings.tsx
@@ -158,7 +158,7 @@ export function UserSettingsModal() {
         {/* Content area (desktop always, mobile only when viewing content) */}
         {(!isMobile || mobileView === 'content') && (
           <div className="flex-1 min-w-0 overflow-y-auto scrollbar-thin py-6">
-            <div className="px-6 max-w-[640px]">
+            <div className="px-6 max-w-[640px] mx-auto">
               {/* Mobile back button */}
               {isMobile && (
                 <button