From f7d4061b86f080aeda0638382d8aabb9faefc55d Mon Sep 17 00:00:00 2001
From: kmmiio99o <szymonladziak00@gmail.com>
Date: Fri, 6 Feb 2026 20:13:55 +0100
Subject: [PATCH] feat: fix buttons in Developer settings looking bad

---
 .../ui/settings/pages/Developer/index.tsx     | 130 ++++++++++--------
 src/metro/common/types/components.ts          |   2 +-
 2 files changed, 73 insertions(+), 59 deletions(-)

diff --git a/src/core/ui/settings/pages/Developer/index.tsx b/src/core/ui/settings/pages/Developer/index.tsx
index 043f035..5ef3c0f 100644
--- a/src/core/ui/settings/pages/Developer/index.tsx
+++ b/src/core/ui/settings/pages/Developer/index.tsx
@@ -122,76 +122,90 @@ export default function Developer() {
           style={{ paddingVertical: 24, paddingHorizontal: 12 }}
           spacing={24}
         >
-          <TableRowGroup title={Strings.DEBUGGER_URL}>
-            <TextInput
-              placeholder="127.0.0.1:9090"
-              size="md"
-              leadingIcon={() => (
-                <LegacyFormText style={styles.leadingText}>
-                  ws://
-                </LegacyFormText>
-              )}
-              defaultValue={settings.debuggerUrl}
-              onChange={(v: string) => (settings.debuggerUrl = v)}
-            />
-            <TableSwitchRow
-              label={Strings.AUTO_DEBUGGER}
-              icon={<TableRow.Icon source={findAssetId("copy")} />}
-              value={settings.autoDebugger}
-              onValueChange={(v: boolean) => {
-                settings.autoDebugger = v;
-              }}
-            />
-            <TableRow
-              label={Strings.CONNECT_TO_DEBUG_WEBSOCKET}
-              subLabel="Connect to Chrome DevTools for debugging"
-              icon={<TableRow.Icon source={findAssetId("WrenchIcon")} />}
-              onPress={handleDebuggerConnect}
-            />
-          </TableRowGroup>
+          <Stack spacing={4}>
+            <TableRowGroup title={Strings.DEBUGGER_URL}>
+              <Stack spacing={4}>
+                <TextInput
+                  placeholder="127.0.0.1:9090"
+                  size="md"
+                  leadingIcon={() => (
+                    <LegacyFormText style={styles.leadingText}>
+                      ws://
+                    </LegacyFormText>
+                  )}
+                  defaultValue={settings.debuggerUrl}
+                  onChange={(v: string) => (settings.debuggerUrl = v)}
+                />
+              </Stack>
+            </TableRowGroup>
 
-          {isReactDevToolsPreloaded() && (
-            <TableRowGroup title="React Development">
-              <TextInput
-                placeholder="127.0.0.1:8097"
-                size="md"
-                leadingIcon={() => (
-                  <LegacyFormText style={styles.leadingText}>
-                    ws://
-                  </LegacyFormText>
-                )}
-                defaultValue={settings.devToolsUrl}
-                onChange={(v: string) => (settings.devToolsUrl = v)}
-              />
+            <TableRowGroup>
               <TableSwitchRow
-                label={Strings.AUTO_DEVTOOLS}
-                icon={<TableRow.Icon source={findAssetId("ic_badge_staff")} />}
-                value={settings.autoDevTools}
+                label={Strings.AUTO_DEBUGGER}
+                icon={<TableRow.Icon source={findAssetId("copy")} />}
+                value={settings.autoDebugger}
                 onValueChange={(v: boolean) => {
-                  settings.autoDevTools = v;
+                  settings.autoDebugger = v;
                 }}
               />
               <TableRow
-                label={Strings.CONNECT_TO_REACT_DEVTOOLS}
-                subLabel="Connect React DevTools for component debugging"
-                icon={<TableRow.Icon source={findAssetId("ic_badge_staff")} />}
-                onPress={handleReactDevToolsConnect}
+                label={Strings.CONNECT_TO_DEBUG_WEBSOCKET}
+                subLabel="Connect DevTools for debugging"
+                icon={<TableRow.Icon source={findAssetId("WrenchIcon")} />}
+                onPress={handleDebuggerConnect}
               />
+            </TableRowGroup>
+          </Stack>
 
-              {isLoaderConfigSupported() && isVendettaLoader() && (
+          {isReactDevToolsPreloaded() && (
+            <Stack spacing={4}>
+              <TableRowGroup title="React Development">
+                <Stack spacing={4}>
+                  <TextInput
+                    placeholder="127.0.0.1:8097"
+                    size="md"
+                    leadingIcon={() => (
+                      <LegacyFormText style={styles.leadingText}>
+                        ws://
+                      </LegacyFormText>
+                    )}
+                    defaultValue={settings.devToolsUrl}
+                    onChange={(v: string) => (settings.devToolsUrl = v)}
+                  />
+                </Stack>
+              </TableRowGroup>
+
+              <TableRowGroup>
                 <TableSwitchRow
-                  label={Strings.LOAD_REACT_DEVTOOLS}
-                  subLabel={`${Strings.VERSION}: ${getReactDevToolsVersion()}`}
-                  icon={
-                    <TableRow.Icon source={findAssetId("ic_badge_staff")} />
-                  }
-                  value={loaderConfig.loadReactDevTools}
+                  label={Strings.AUTO_DEVTOOLS}
+                  icon={<TableRow.Icon source={findAssetId("ic_badge_staff")} />}
+                  value={settings.autoDevTools}
                   onValueChange={(v: boolean) => {
-                    loaderConfig.loadReactDevTools = v;
+                    settings.autoDevTools = v;
                   }}
                 />
-              )}
-            </TableRowGroup>
+                <TableRow
+                  label={Strings.CONNECT_TO_REACT_DEVTOOLS}
+                  subLabel="Connect React DevTools for component debugging"
+                  icon={<TableRow.Icon source={findAssetId("ic_badge_staff")} />}
+                  onPress={handleReactDevToolsConnect}
+                />
+
+                {isLoaderConfigSupported() && isVendettaLoader() && (
+                  <TableSwitchRow
+                    label={Strings.LOAD_REACT_DEVTOOLS}
+                    subLabel={`${Strings.VERSION}: ${getReactDevToolsVersion()}`}
+                    icon={
+                      <TableRow.Icon source={findAssetId("ic_badge_staff")} />
+                    }
+                    value={loaderConfig.loadReactDevTools}
+                    onValueChange={(v: boolean) => {
+                      loaderConfig.loadReactDevTools = v;
+                    }}
+                  />
+                )}
+              </TableRowGroup>
+            </Stack>
           )}
 
           {isLoaderConfigSupported() && (
diff --git a/src/metro/common/types/components.ts b/src/metro/common/types/components.ts
index 254fa34..87a3bf3 100644
--- a/src/metro/common/types/components.ts
+++ b/src/metro/common/types/components.ts
@@ -211,7 +211,7 @@ interface TableRowIconProps {
 export type TableRowIcon = React.FC<TableRowIconProps>;
 
 interface TableRowGroupProps {
-    title: string;
+    title?: string;
     children: ReactNode;
 }