From c360781565d0f14d07a590ea302753e3732b84b9 Mon Sep 17 00:00:00 2001 From: Yaros Date: Tue, 9 Dec 2025 16:03:29 +0100 Subject: [PATCH] fix(mobile): fix overflow text in backup card (#24448) * fix(mobile): fix overflow text in backup card * refactor: use intrinsicheight * chore: fix spelling of entitycounttile --- .../beta_sync_settings/entity_count_tile.dart | 57 +++---- .../sync_status_and_actions.dart | 158 ++++++++++-------- 2 files changed, 113 insertions(+), 102 deletions(-) diff --git a/mobile/lib/widgets/settings/beta_sync_settings/entity_count_tile.dart b/mobile/lib/widgets/settings/beta_sync_settings/entity_count_tile.dart index ac357c2dee..d9a0bae606 100644 --- a/mobile/lib/widgets/settings/beta_sync_settings/entity_count_tile.dart +++ b/mobile/lib/widgets/settings/beta_sync_settings/entity_count_tile.dart @@ -2,26 +2,27 @@ import 'package:flutter/material.dart'; import 'package:immich_mobile/extensions/build_context_extensions.dart'; import 'package:immich_mobile/extensions/theme_extensions.dart'; -class EntitiyCountTile extends StatelessWidget { +class EntityCountTile extends StatelessWidget { final int count; final String label; final IconData icon; - const EntitiyCountTile({super.key, required this.count, required this.label, required this.icon}); + const EntityCountTile({super.key, required this.count, required this.label, required this.icon}); String zeroPadding(int number, int targetWidth) { final numStr = number.toString(); return numStr.length < targetWidth ? "0" * (targetWidth - numStr.length) : ""; } - int calculateMaxDigits(double availableWidth) { - const double charWidth = 11.0; - return (availableWidth / charWidth).floor().clamp(1, 8); - } - @override Widget build(BuildContext context) { + final screenWidth = MediaQuery.of(context).size.width; + final availableWidth = (screenWidth - 32 - 8) / 2; + const double charWidth = 11.0; + final maxDigits = ((availableWidth - 32) / charWidth).floor().clamp(1, 8); + return Container( + height: double.infinity, padding: const EdgeInsets.all(16), decoration: BoxDecoration( color: context.colorScheme.surfaceContainerLow, @@ -29,7 +30,6 @@ class EntitiyCountTile extends StatelessWidget { border: Border.all(width: 0.5, color: context.colorScheme.outline.withAlpha(25)), ), child: Column( - mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.center, children: [ // Icon and Label @@ -38,33 +38,30 @@ class EntitiyCountTile extends StatelessWidget { children: [ Icon(icon, color: context.primaryColor), const SizedBox(width: 8), - Text( - label, - style: TextStyle(color: context.primaryColor, fontWeight: FontWeight.bold, fontSize: 16), + Flexible( + child: Text( + label, + style: TextStyle(color: context.primaryColor, fontWeight: FontWeight.bold, fontSize: 16), + ), ), ], ), - const SizedBox(height: 12), // Number - LayoutBuilder( - builder: (context, constraints) { - final maxDigits = calculateMaxDigits(constraints.maxWidth); - return RichText( - text: TextSpan( - style: const TextStyle(fontSize: 18, fontFamily: 'OverpassMono', fontWeight: FontWeight.w600), - children: [ - TextSpan( - text: zeroPadding(count, maxDigits), - style: TextStyle(color: context.colorScheme.onSurfaceSecondary.withAlpha(75)), - ), - TextSpan( - text: count.toString(), - style: TextStyle(color: context.primaryColor), - ), - ], + const Spacer(), + RichText( + text: TextSpan( + style: const TextStyle(fontSize: 18, fontFamily: 'OverpassMono', fontWeight: FontWeight.w600), + children: [ + TextSpan( + text: zeroPadding(count, maxDigits), + style: TextStyle(color: context.colorScheme.onSurfaceSecondary.withAlpha(75)), ), - ); - }, + TextSpan( + text: count.toString(), + style: TextStyle(color: context.primaryColor), + ), + ], + ), ), ], ), diff --git a/mobile/lib/widgets/settings/beta_sync_settings/sync_status_and_actions.dart b/mobile/lib/widgets/settings/beta_sync_settings/sync_status_and_actions.dart index 64c3d9b832..d4730951c0 100644 --- a/mobile/lib/widgets/settings/beta_sync_settings/sync_status_and_actions.dart +++ b/mobile/lib/widgets/settings/beta_sync_settings/sync_status_and_actions.dart @@ -282,76 +282,87 @@ class _SyncStatsCounts extends ConsumerWidget { _SectionHeaderText(text: "assets".t(context: context)), Padding( padding: const EdgeInsets.fromLTRB(16, 8, 16, 16), - child: Flex( - direction: Axis.horizontal, - mainAxisAlignment: MainAxisAlignment.spaceBetween, - spacing: 8.0, - children: [ - Expanded( - child: EntitiyCountTile( - label: "local".t(context: context), - count: localAssetCount, - icon: Icons.smartphone, + // 1. Wrap in IntrinsicHeight + child: IntrinsicHeight( + child: Flex( + direction: Axis.horizontal, + mainAxisAlignment: MainAxisAlignment.spaceBetween, + // 2. Stretch children vertically to fill the IntrinsicHeight + crossAxisAlignment: CrossAxisAlignment.stretch, + spacing: 8.0, + children: [ + Expanded( + child: EntityCountTile( + label: "local".t(context: context), + count: localAssetCount, + icon: Icons.smartphone, + ), ), - ), - Expanded( - child: EntitiyCountTile( - label: "remote".t(context: context), - count: remoteAssetCount, - icon: Icons.cloud, + Expanded( + child: EntityCountTile( + label: "remote".t(context: context), + count: remoteAssetCount, + icon: Icons.cloud, + ), ), - ), - ], + ], + ), ), ), _SectionHeaderText(text: "albums".t(context: context)), Padding( padding: const EdgeInsets.fromLTRB(16, 8, 16, 16), - child: Flex( - direction: Axis.horizontal, - mainAxisAlignment: MainAxisAlignment.spaceBetween, - spacing: 8.0, - children: [ - Expanded( - child: EntitiyCountTile( - label: "local".t(context: context), - count: localAlbumCount, - icon: Icons.smartphone, + child: IntrinsicHeight( + child: Flex( + direction: Axis.horizontal, + mainAxisAlignment: MainAxisAlignment.spaceBetween, + crossAxisAlignment: CrossAxisAlignment.stretch, // Added + spacing: 8.0, + children: [ + Expanded( + child: EntityCountTile( + label: "local".t(context: context), + count: localAlbumCount, + icon: Icons.smartphone, + ), ), - ), - Expanded( - child: EntitiyCountTile( - label: "remote".t(context: context), - count: remoteAlbumCount, - icon: Icons.cloud, + Expanded( + child: EntityCountTile( + label: "remote".t(context: context), + count: remoteAlbumCount, + icon: Icons.cloud, + ), ), - ), - ], + ], + ), ), ), _SectionHeaderText(text: "other".t(context: context)), Padding( padding: const EdgeInsets.fromLTRB(16, 8, 16, 16), - child: Flex( - direction: Axis.horizontal, - mainAxisAlignment: MainAxisAlignment.spaceBetween, - spacing: 8.0, - children: [ - Expanded( - child: EntitiyCountTile( - label: "memories".t(context: context), - count: memoryCount, - icon: Icons.calendar_today, + child: IntrinsicHeight( + child: Flex( + direction: Axis.horizontal, + mainAxisAlignment: MainAxisAlignment.spaceBetween, + crossAxisAlignment: CrossAxisAlignment.stretch, // Added + spacing: 8.0, + children: [ + Expanded( + child: EntityCountTile( + label: "memories".t(context: context), + count: memoryCount, + icon: Icons.calendar_today, + ), ), - ), - Expanded( - child: EntitiyCountTile( - label: "hashed_assets".t(context: context), - count: localHashedCount, - icon: Icons.tag, + Expanded( + child: EntityCountTile( + label: "hashed_assets".t(context: context), + count: localHashedCount, + icon: Icons.tag, + ), ), - ), - ], + ], + ), ), ), // To be removed once the experimental feature is stable @@ -364,26 +375,29 @@ class _SyncStatsCounts extends ConsumerWidget { return counts.when( data: (c) => Padding( padding: const EdgeInsets.fromLTRB(16, 8, 16, 16), - child: Flex( - direction: Axis.horizontal, - mainAxisAlignment: MainAxisAlignment.spaceBetween, - spacing: 8.0, - children: [ - Expanded( - child: EntitiyCountTile( - label: "local".t(context: context), - count: c.total, - icon: Icons.delete_outline, + child: IntrinsicHeight( + child: Flex( + direction: Axis.horizontal, + mainAxisAlignment: MainAxisAlignment.spaceBetween, + crossAxisAlignment: CrossAxisAlignment.stretch, // Added + spacing: 8.0, + children: [ + Expanded( + child: EntityCountTile( + label: "local".t(context: context), + count: c.total, + icon: Icons.delete_outline, + ), ), - ), - Expanded( - child: EntitiyCountTile( - label: "hashed_assets".t(context: context), - count: c.hashed, - icon: Icons.tag, + Expanded( + child: EntityCountTile( + label: "hashed_assets".t(context: context), + count: c.hashed, + icon: Icons.tag, + ), ), - ), - ], + ], + ), ), ), loading: () => const CircularProgressIndicator(),