fix(ui): mobile tab bar — uniform sizing, indicator overlap, spacing

- UniformGrid Columns="5" on TabStrip so all 5 tabs always stay on one
  row on Android (Rows="1" alone did not auto-calculate columns at
  measure time on the Android Avalonia renderer)
- Contacts tab header was using hardcoded FontSize=13/Width=24/Spacing=4
  instead of the TabFontSize/TabIconSize/TabSpacing ViewModel bindings,
  making it visually larger than the other four tabs on mobile
- ContentPresenter Margin="0,0,0,4" in Controls.axaml pushes the tab
  header content above the 2 px selection indicator, which is drawn at
  the absolute bottom of the template Panel and was overlapping the label
- TabItem horizontal padding 4→8 px and TabSpacing 2→4 for both
  desktop and mobile to give more breathing room between tab items
This commit is contained in:
2026-06-17 08:17:09 +02:00
parent 5d2d0ad312
commit 9744619eb4
3 changed files with 180 additions and 112 deletions
@@ -96,6 +96,11 @@ public partial class MainWindowViewModel : ViewModelBase
public bool IsMobile => !IsDesktop;
// Tab bar sizing: compact on mobile so all 5 tabs fit in one row.
public double TabIconSize => IsMobile ? 20 : 24;
public double TabFontSize => IsMobile ? 10 : 13;
public double TabSpacing => IsMobile ? 4 : 4;
public string UnitLabel => _config.Unit;
public AppConfig CurrentConfig => _config;