Fix Battery Settings Layout Overflow (Dropdown Causing Vertical Text Wrap)

Problem

The Battery Chemistry row in App Settings was rendering incorrectly on smaller screens and certain device widths.

Observed issues:

• Subtitle text (“Set per device …”) collapsed horizontally.
• Text rendered vertically, wrapping one character per line.
• Layout appeared broken and unreadable.

This occurred because the DropdownButton was placed inside the trailing: slot of a ListTile, alongside:

• leading icon
• title
• long subtitle
• dropdown control

The ListTile could not satisfy layout constraints, so Flutter compressed the subtitle to near-zero width, forcing character-by-character wrapping.

Root Cause

ListTile.trailing is width-constrained and intended for compact widgets (icons, switches, small controls).

Placing a wide widget like DropdownButton in trailing: caused horizontal constraint pressure. Flutter resolved this by shrinking the subtitle first, leading to vertical text collapse.

Solution

Restructured the layout as follows:

1. Keep ListTile responsible only for:

   • leading
   • title
   • subtitle

2. Move the dropdown out of ListTile.trailing.

3. Render the dropdown as a full-width control beneath the tile.

4. Use DropdownButtonFormField with:

   • isExpanded: true
   • Proper InputDecoration
   • Consistent horizontal padding

This ensures:

• The dropdown gets full horizontal width.
• The subtitle keeps correct wrapping behavior.
• No layout compression occurs.
• Material spacing remains consistent.

Implementation Changes

Before:

• DropdownButton inside ListTile.trailing

After:

• ListTile handles text only
• DropdownButtonFormField rendered beneath it
• Added isExpanded: true
• Explicit padding for proper alignment

Result

• Subtitle renders correctly (no vertical collapse)
• UI matches intended Material layout
• Improved responsiveness on smaller devices
• Localization-safe for longer strings
• Cleaner separation of layout responsibilities

Testing

Tested:

• Small screen widths
• Long device names
• Different localization strings
• Connected and disconnected states

No layout regressions observed.

Rationale

This aligns with Flutter layout best practices:

• ListTile.trailing should only contain compact widgets.
• Larger interactive controls should be placed outside of ListTile.

This change prevents future constraint-related UI issues.