diff --git a/lib/screens/track_metadata_screen.dart b/lib/screens/track_metadata_screen.dart index afd4670f..9b4a1df1 100644 --- a/lib/screens/track_metadata_screen.dart +++ b/lib/screens/track_metadata_screen.dart @@ -20,6 +20,7 @@ import 'package:spotiflac_android/services/platform_bridge.dart'; import 'package:spotiflac_android/services/ffmpeg_service.dart'; import 'package:spotiflac_android/services/replaygain_service.dart'; import 'package:spotiflac_android/l10n/l10n.dart'; +import 'package:spotiflac_android/utils/adaptive_layout.dart'; import 'package:spotiflac_android/utils/audio_conversion_utils.dart'; import 'package:spotiflac_android/utils/audio_format_utils.dart'; import 'package:spotiflac_android/utils/cover_art_utils.dart'; @@ -659,7 +660,11 @@ class _TrackMetadataScreenState extends ConsumerState SliverToBoxAdapter( child: Center( child: ConstrainedBox( - constraints: const BoxConstraints(maxWidth: 720), + constraints: BoxConstraints( + maxWidth: adaptiveContentMaxWidth( + MediaQuery.sizeOf(context).width, + ), + ), child: _buildAnimatedTrackContent(context, ref, colorScheme), ), ), diff --git a/lib/utils/adaptive_layout.dart b/lib/utils/adaptive_layout.dart index 763060d1..02ea3417 100644 --- a/lib/utils/adaptive_layout.dart +++ b/lib/utils/adaptive_layout.dart @@ -1,15 +1,25 @@ import 'package:flutter/widgets.dart'; -/// Horizontal inset that centers content of [maxWidth] at [contentMaxWidth]; -/// zero once it fits, so rows stop stretching across a wide surface. Prefer -/// this constraint-based form when the widget may live inside an already -/// clamped box (e.g. a bottom sheet), where screen width would over-inset. -double wideInsetForWidth(double maxWidth, {double contentMaxWidth = 720}) => - maxWidth > contentMaxWidth ? (maxWidth - contentMaxWidth) / 2 : 0; +/// Widest content span for a surface of [maxWidth]: content is never narrower +/// than [contentMaxWidth], and the centering margin never exceeds 80dp per +/// side — so tablets keep near-full-width rows (issue #493) instead of a +/// fixed 720dp column floating in whitespace. +double adaptiveContentMaxWidth( + double maxWidth, { + double contentMaxWidth = 720, +}) => maxWidth > contentMaxWidth + 160 ? maxWidth - 160 : contentMaxWidth; -/// Horizontal inset that centers full-width list content at [contentMaxWidth] -/// on tablets/landscape; zero on phones, so rows stop stretching across the -/// whole screen. +/// Horizontal inset that centers content of [maxWidth] at +/// [adaptiveContentMaxWidth]; zero once it fits. Prefer this constraint-based +/// form when the widget may live inside an already clamped box (e.g. a bottom +/// sheet), where screen width would over-inset. +double wideInsetForWidth(double maxWidth, {double contentMaxWidth = 720}) => + maxWidth > contentMaxWidth + ? ((maxWidth - contentMaxWidth) / 2).clamp(0.0, 80.0) + : 0; + +/// Horizontal inset that centers full-width list content on tablets/landscape; +/// zero on phones, so rows stop stretching across the whole screen. double wideListInset(BuildContext context, {double contentMaxWidth = 720}) => wideInsetForWidth( MediaQuery.sizeOf(context).width,