caption settings reorganize

Co-authored-by: Jip Frijlink <JipFr@users.noreply.github.com>

src/components/player/atoms/Settings.tsx

@@ -51,7 +51,7 @@ function SettingsOverlay({ id }: { id: string }) {
             <CaptionsView id={id} />
           </Menu.CardWithScrollable>
         </OverlayPage>
-        <OverlayPage id={id} path="/captions/settings" width={343} height={430}>
+        <OverlayPage id={id} path="/captions/settings" width={343} height={450}>
           <Menu.Card>
             <CaptionSettingsView id={id} />
           </Menu.Card>

src/components/player/atoms/settings/CaptionSettingsView.tsx

@@ -236,14 +236,16 @@ export function CaptionSettingsView({ id }: { id: string }) {
           decimalsAllowed={1}
           controlButtons
         />
-        <CaptionSetting
-          label="Text size"
-          max={200}
-          min={1}
-          textTransformer={(s) => `${s}%`}
-          onChange={(v) => updateStyling({ size: v / 100 })}
-          value={styling.size * 100}
-        />
+        <div className="flex justify-between items-center">
+          <Menu.FieldTitle>Fix capitalization</Menu.FieldTitle>
+          <div className="flex justify-center items-center">
+            <Toggle
+              enabled={overrideCasing}
+              onClick={() => setOverrideCasing(!overrideCasing)}
+            />
+          </div>
+        </div>
+        <Menu.Divider />
         <CaptionSetting
           label="Background opacity"
           max={100}
@@ -252,6 +254,14 @@ export function CaptionSettingsView({ id }: { id: string }) {
           value={styling.backgroundOpacity * 100}
           textTransformer={(s) => `${s}%`}
         />
+        <CaptionSetting
+          label="Text size"
+          max={200}
+          min={1}
+          textTransformer={(s) => `${s}%`}
+          onChange={(v) => updateStyling({ size: v / 100 })}
+          value={styling.size * 100}
+        />
         <div className="flex justify-between items-center">
           <Menu.FieldTitle>Color</Menu.FieldTitle>
           <div className="flex justify-center items-center">
@@ -264,15 +274,6 @@ export function CaptionSettingsView({ id }: { id: string }) {
             ))}
           </div>
         </div>
-        <div className="flex justify-between items-center">
-          <Menu.FieldTitle>Fix capitalization</Menu.FieldTitle>
-          <div className="flex justify-center items-center">
-            <Toggle
-              enabled={overrideCasing}
-              onClick={() => setOverrideCasing(!overrideCasing)}
-            />
-          </div>
-        </div>
       </Menu.Section>
     </>
   );