fix(settings): tidy spacing, uniform Android row heights & toggle layout

- spacing: top padding + inter-group gaps so section titles, descriptions
  and buttons no longer touch (playback buffer, audio/subtitles, music,
  marlin, kefin, streamystats, storage, hide-libraries)
- ListGroup: skip empty section titles
- SettingSwitch: cap the native Android switch in a fixed centered box so
  toggle rows match the other rows and stay put when toggled; iOS unchanged
- Appearance: move "Hide libraries" to the end of the list
This commit is contained in:
Gauvain
2026-06-24 22:21:06 +02:00
parent 91ea791663
commit 2ac664de5a
21 changed files with 128 additions and 68 deletions

View File

@@ -0,0 +1,40 @@
import type React from "react";
import { Platform, Switch, type SwitchProps, View } from "react-native";
/**
* Settings toggle. Android's native Switch lays out ~40px tall / ~56px wide and
* inflates list rows (iOS renders it ~31px). A plain `transform: scale` is
* visual-only and does NOT shrink the layout box, so we pin the Switch inside a
* FIXED-SIZE box (overflow hidden) and center it:
* - the fixed height caps the row height (compact, uniform rows),
* - the fixed width + centering keep the switch in the exact same spot in the
* on/off states (a non-fixed wrapper let its width fluctuate between states,
* which shifted the switch sideways on toggle).
* iOS renders the switch untouched.
*
* Tunables: BOX_H drives the row height; SCALE shrinks the visual to fit the
* box; keep BOX_W >= scaled visual width to avoid clipping the switch sideways.
*/
const BOX_W = 40;
const BOX_H = 30;
const SCALE = 0.9;
export const SettingSwitch: React.FC<SwitchProps> = (props) => {
if (Platform.OS !== "android") return <Switch {...props} />;
return (
<View
style={{
width: BOX_W,
height: BOX_H,
alignItems: "center",
justifyContent: "center",
overflow: "hidden",
}}
>
<Switch
{...props}
style={[props.style, { transform: [{ scale: SCALE }] }]}
/>
</View>
);
};