fix: Improve toggle switch placement in settings screen (#208) #232

Merged
hodlbod merged 1 commits from Prat_09/flotilla:208-fix-settings-toggle-switches into dev 2026-04-17 21:58:52 +00:00
Contributor

Problem:

  • Inconsistent toggle input across different settings screens.
  • Slider input relied on the default widths, causing it to compress at smaller font sizes.
  • In the Media Server section, the Add Server button gets pushed to the bottom when multiple servers are added, reducing its visibility as a primary action.

Changes Implemented:

  • Refactored toggled switches to be strictly inline and right-aligned with the setting label.
  • Added flex-box styling so that if a setting label spans across multiple lines, the toggle auto-aligns to the vertical center of the label's text block
  • Detached descriptions so that the setting's description is unattached to the setting label and toggle input.
  • Updated slider inputs to use full-width.
  • Positioned the Add server button inline with the Media Server label to maintain visiblity as a primary action.
Alert Settings Content Settings Privacy Settings
Screenshot 2026-04-18 at 2.06.32 AM.png Screenshot 2026-04-18 at 2.08.34 AM.png Screenshot 2026-04-18 at 2.08.43 AM.png

Let me know if any further additions or refinements are required.

Resolves #208

Problem: - Inconsistent toggle input across different settings screens. - Slider input relied on the default widths, causing it to compress at smaller font sizes. - In the Media Server section, the Add Server button gets pushed to the bottom when multiple servers are added, reducing its visibility as a primary action. Changes Implemented: - Refactored toggled switches to be strictly inline and right-aligned with the setting label. - Added flex-box styling so that if a setting label spans across multiple lines, the toggle auto-aligns to the vertical center of the label's text block - Detached descriptions so that the setting's description is unattached to the setting label and toggle input. - Updated slider inputs to use full-width. - Positioned the Add server button inline with the Media Server label to maintain visiblity as a primary action. |Alert Settings | Content Settings| Privacy Settings| |:--:|:--:|:--:| |![Screenshot 2026-04-18 at 2.06.32 AM.png](/attachments/5991e231-6dca-4c96-81d9-6bea3e29ac56)|![Screenshot 2026-04-18 at 2.08.34 AM.png](/attachments/bbfac1c5-7297-4f48-a86e-926335edd64a)|![Screenshot 2026-04-18 at 2.08.43 AM.png](/attachments/41cb1378-f947-4759-b2c8-0e541eff8046)| Let me know if any further additions or refinements are required. Resolves #208
hodlbod added 1 commit 2026-04-17 21:58:46 +00:00
hodlbod force-pushed 208-fix-settings-toggle-switches from 3de934b406 to a80bd7d417 2026-04-17 21:58:46 +00:00 Compare
hodlbod merged commit 32a31045ef into dev 2026-04-17 21:58:52 +00:00
hodlbod deleted branch 208-fix-settings-toggle-switches 2026-04-17 21:58:52 +00:00
Sign in to join this conversation.