From fa04e3016ce443e762870c270db32a6eb9bf99a1 Mon Sep 17 00:00:00 2001
From: "Natalie B." <22222885+espeon@users.noreply.github.com>
Date: Wed, 12 Nov 2025 18:32:13 -0600
Subject: [PATCH] remove padding and make all the settings pages match up

---
 .../components/settings/about-category-settings.tsx  |  2 +-
 .../settings/advanced-category-settings.tsx          |  4 ++--
 .../components/settings/danmu-category-settings.tsx  |  4 ++--
 .../settings/languages-category-settings.tsx         |  4 ++--
 .../settings/privacy-category-settings.tsx           |  2 +-
 js/app/components/settings/settings.tsx              |  2 +-
 js/components/src/components/ui/button.tsx           | 12 +++++++++---
 7 files changed, 18 insertions(+), 12 deletions(-)

diff --git a/js/app/components/settings/about-category-settings.tsx b/js/app/components/settings/about-category-settings.tsx
index 2445d32c..9badd6b6 100644
--- a/js/app/components/settings/about-category-settings.tsx
+++ b/js/app/components/settings/about-category-settings.tsx
@@ -59,7 +59,7 @@ export function AboutCategorySettings() {
 
   return (
     <ScrollView>
-      <View style={[zero.layout.flex.align.center]}>
+      <View style={[zero.layout.flex.align.center, zero.px[2], zero.py[2]]}>
         <MenuContainer
           style={{ paddingVertical: 24, maxWidth: 500, width: "100%" }}
         >
diff --git a/js/app/components/settings/advanced-category-settings.tsx b/js/app/components/settings/advanced-category-settings.tsx
index 16ef8af5..e5714094 100644
--- a/js/app/components/settings/advanced-category-settings.tsx
+++ b/js/app/components/settings/advanced-category-settings.tsx
@@ -43,8 +43,8 @@ export function AdvancedCategorySettings() {
 
   return (
     <ScrollView>
-      <View style={[zero.layout.flex.align.center, zero.px[2], zero.py[4]]}>
-        <View style={{ paddingVertical: 24, maxWidth: 500, width: "100%" }}>
+      <View style={[zero.layout.flex.align.center, zero.px[2], zero.py[2]]}>
+        <View style={{ maxWidth: 500, width: "100%" }}>
           <MenuContainer>
             <MenuGroup>
               <SettingToggle
diff --git a/js/app/components/settings/danmu-category-settings.tsx b/js/app/components/settings/danmu-category-settings.tsx
index 4fd1d339..06511520 100644
--- a/js/app/components/settings/danmu-category-settings.tsx
+++ b/js/app/components/settings/danmu-category-settings.tsx
@@ -31,8 +31,8 @@ export function DanmuCategorySettings() {
 
   return (
     <ScrollView>
-      <View style={[zero.layout.flex.align.center, zero.px[2], zero.py[4]]}>
-        <View style={{ paddingVertical: 24, maxWidth: 500, width: "100%" }}>
+      <View style={[zero.layout.flex.align.center, zero.px[2], zero.py[2]]}>
+        <View style={{ maxWidth: 500, width: "100%" }}>
           <View style={[{ alignItems: "stretch" }, zero.gap.all[12]]}>
             {/* Enable/Disable Danmu */}
             <SettingToggle
diff --git a/js/app/components/settings/languages-category-settings.tsx b/js/app/components/settings/languages-category-settings.tsx
index ab9ab3be..6e4d8e68 100644
--- a/js/app/components/settings/languages-category-settings.tsx
+++ b/js/app/components/settings/languages-category-settings.tsx
@@ -36,8 +36,8 @@ export function LanguagesCategorySettings() {
 
   return (
     <ScrollView>
-      <View style={[zero.layout.flex.align.center, zero.px[2], zero.py[4]]}>
-        <View style={{ paddingVertical: 24, maxWidth: 500, width: "100%" }}>
+      <View style={[zero.layout.flex.align.center, zero.px[2], zero.py[2]]}>
+        <View style={{ maxWidth: 500, width: "100%" }}>
           <MenuContainer>
             <View>
               <Text size="xl" style={{ marginBottom: 4 }}>
diff --git a/js/app/components/settings/privacy-category-settings.tsx b/js/app/components/settings/privacy-category-settings.tsx
index e2678d38..22c07518 100644
--- a/js/app/components/settings/privacy-category-settings.tsx
+++ b/js/app/components/settings/privacy-category-settings.tsx
@@ -30,7 +30,7 @@ export function PrivacyCategorySettings() {
   return (
     <ScrollView>
       <View style={[zero.layout.flex.align.center, zero.px[2], zero.py[2]]}>
-        <View style={{ paddingVertical: 24, maxWidth: 500, width: "100%" }}>
+        <View style={{ maxWidth: 500, width: "100%" }}>
           <MenuContainer>
             <MenuGroup>
               <SettingToggle
diff --git a/js/app/components/settings/settings.tsx b/js/app/components/settings/settings.tsx
index f78c35b7..16f0c2ac 100644
--- a/js/app/components/settings/settings.tsx
+++ b/js/app/components/settings/settings.tsx
@@ -29,7 +29,7 @@ export function Settings() {
   return (
     <ScrollView>
       <View style={[zero.layout.flex.align.center, zero.px[2], zero.py[2]]}>
-        <View style={[{ maxWidth: 500, width: "100%" }]}>
+        <View style={{ maxWidth: 500, width: "100%" }}>
           <MenuContainer>
             <MenuGroup>
               {loggedIn && userProfile ? (
diff --git a/js/components/src/components/ui/button.tsx b/js/components/src/components/ui/button.tsx
index e653a0c2..fc3501b4 100644
--- a/js/components/src/components/ui/button.tsx
+++ b/js/components/src/components/ui/button.tsx
@@ -228,9 +228,15 @@ export const Button = forwardRef<any, ButtonProps>(
             </ButtonPrimitive.Icon>
           ) : null}
 
-          <TextPrimitive.Root style={[textStyle as any, sizeStyles.text]}>
-            {loading && loadingText ? loadingText : children}
-          </TextPrimitive.Root>
+          {typeof children === "string" ? (
+            <TextPrimitive.Root style={[textStyle as any, sizeStyles.text]}>
+              {loading && loadingText ? loadingText : children}
+            </TextPrimitive.Root>
+          ) : loading && loadingText ? (
+            loadingText
+          ) : (
+            children
+          )}
 
           {loading && rightIcon ? (
             <ButtonPrimitive.Icon position="right">
-- 
2.51.2