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

Conversation 0 Commits 1 Files Changed 5

+141 -78

Prat_09 commented 2026-04-17 20:44:00 +00:00

Contributor

Copy Link

Copy Source

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

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| |:--:|:--:|:--:| |||| Let me know if any further additions or refinements are required. Resolves #208

Screenshot 2026-04-18 at 2.06.32 AM.png

113 KiB

Screenshot 2026-04-18 at 2.08.34 AM.png

155 KiB

Screenshot 2026-04-18 at 2.08.43 AM.png

113 KiB

hodlbod added 1 commit 2026-04-17 21:58:46 +00:00

fix: improve-toggle-switch-placement (#208) a80bd7d417

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

hodlbod referenced this issue from a commit 2026-04-17 21:58:54 +00:00

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

Sign in to join this conversation.

Reviewers

No Reviewers

Labels

Clear labels

design

For issues related to design work. Development should be done in another issue and refer back to this one.

dev

Issues related to development work

easy

Issues that can be executed on by new contributors

idea

For issues that aren't yet actionable

priority

For issues related to high priority features and bugs

usability

Issues that have to be validated with real live human beings.

No Label

Milestone

No items

No Milestone

Projects

Clear projects

No project

Assignees

Clear assignees

hodlbod (hodlbod) mplorentz (Matt Lorentz) sakshamjain (Saksham Jain) sondreb triesap userAdityaa (Aditya Chaudhary)

No Assignees

2 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: coracle/flotilla#232

Allow edits from maintainers