From 49ba5d70295f9ca42724d6398d512e7a08a05fb7 Mon Sep 17 00:00:00 2001 From: Lukas Klingsbo Date: Thu, 3 Oct 2024 16:58:26 +0200 Subject: [PATCH] fix: Allow search box to shrink on low width --- .../app_center/lib/manage/manage_page.dart | 119 ++++++++++-------- 1 file changed, 65 insertions(+), 54 deletions(-) diff --git a/packages/app_center/lib/manage/manage_page.dart b/packages/app_center/lib/manage/manage_page.dart index 12e6a1856..9f34f0bf7 100644 --- a/packages/app_center/lib/manage/manage_page.dart +++ b/packages/app_center/lib/manage/manage_page.dart @@ -173,61 +173,72 @@ class ManagePage extends ConsumerWidget { .titleMedium! .copyWith(fontWeight: FontWeight.w500), ), - const Spacer(), - ConstrainedBox( - constraints: const BoxConstraints(maxWidth: 300), - // TODO: refactor - extract common text field decoration from - // here and the `SearchField` widget - child: TextFormField( - style: Theme.of(context).textTheme.bodyMedium, - strutStyle: kSearchFieldStrutStyle, - textAlignVertical: TextAlignVertical.center, - cursorWidth: 1, - decoration: InputDecoration( - prefixIcon: kSearchFieldPrefixIcon, - prefixIconConstraints: kSearchFieldIconConstraints, - hintText: l10n.managePageSearchFieldSearchHint, - ), - initialValue: ref.watch(localSnapFilterProvider), - onChanged: (value) => ref - .read(localSnapFilterProvider.notifier) - .state = value, - ), - ), - const SizedBox(width: kSpacing), - Text(l10n.searchPageSortByLabel), - const SizedBox(width: kSpacingSmall), - // TODO: refactor - create proper widget - Consumer( - builder: (context, ref, child) { - final sortOrder = ref.watch(localSnapSortOrderProvider); - return MenuButtonBuilder( - values: const [ - SnapSortOrder.alphabeticalAsc, - SnapSortOrder.alphabeticalDesc, - SnapSortOrder.installedDateAsc, - SnapSortOrder.installedDateDesc, - SnapSortOrder.installedSizeAsc, - SnapSortOrder.installedSizeDesc, - ], - itemBuilder: (context, sortOrder, child) => - Text(sortOrder.localize(l10n)), - onSelected: (value) => ref - .read(localSnapSortOrderProvider.notifier) - .state = value, - expanded: false, - child: Text(sortOrder.localize(l10n)), - ); - }, - ), const SizedBox(width: kSpacing), - Text(l10n.managePageShowSystemSnapsLabel), - const SizedBox(width: kSpacingSmall), - YaruCheckbox( - value: ref.watch(showLocalSystemAppsProvider), - onChanged: (value) => ref - .read(showLocalSystemAppsProvider.notifier) - .state = value ?? false, + Expanded( + child: Row( + mainAxisAlignment: MainAxisAlignment.end, + children: [ + Flexible( + child: ConstrainedBox( + constraints: const BoxConstraints(maxWidth: 300), + // TODO: refactor - extract common text field decoration from + // here and the `SearchField` widget + child: TextFormField( + style: Theme.of(context).textTheme.bodyMedium, + strutStyle: kSearchFieldStrutStyle, + textAlignVertical: TextAlignVertical.center, + cursorWidth: 1, + decoration: InputDecoration( + prefixIcon: kSearchFieldPrefixIcon, + prefixIconConstraints: + kSearchFieldIconConstraints, + hintText: l10n.managePageSearchFieldSearchHint, + ), + initialValue: ref.watch(localSnapFilterProvider), + onChanged: (value) => ref + .read(localSnapFilterProvider.notifier) + .state = value, + ), + ), + ), + const SizedBox(width: kSpacing), + Text(l10n.searchPageSortByLabel), + const SizedBox(width: kSpacingSmall), + // TODO: refactor - create proper widget + Consumer( + builder: (context, ref, child) { + final sortOrder = + ref.watch(localSnapSortOrderProvider); + return MenuButtonBuilder( + values: const [ + SnapSortOrder.alphabeticalAsc, + SnapSortOrder.alphabeticalDesc, + SnapSortOrder.installedDateAsc, + SnapSortOrder.installedDateDesc, + SnapSortOrder.installedSizeAsc, + SnapSortOrder.installedSizeDesc, + ], + itemBuilder: (context, sortOrder, child) => + Text(sortOrder.localize(l10n)), + onSelected: (value) => ref + .read(localSnapSortOrderProvider.notifier) + .state = value, + expanded: false, + child: Text(sortOrder.localize(l10n)), + ); + }, + ), + const SizedBox(width: kSpacing), + Text(l10n.managePageShowSystemSnapsLabel), + const SizedBox(width: kSpacingSmall), + YaruCheckbox( + value: ref.watch(showLocalSystemAppsProvider), + onChanged: (value) => ref + .read(showLocalSystemAppsProvider.notifier) + .state = value ?? false, + ), + ], + ), ), ], ),