fix: Allow search box to shrink on low width

ubuntu · Oct 3, 2024 · 49ba5d7 · 49ba5d7
1 parent 1edf713
commit 49ba5d7
Showing 1 changed file with 65 additions and 54 deletions.
diff --git 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<SnapSortOrder>(
-                        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<SnapSortOrder>(
+                              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,
+                        ),
+                      ],
+                    ),
                   ),
                 ],
               ),