update search box design

app/lib/features/geckoview/features/search/presentation/screens/search.dart

@@ -232,7 +232,8 @@ class SearchScreen extends HookConsumerWidget {
         final measuredHeight = getTextFieldHeight(textFieldKey);
 
         if (measuredHeight != null) {
-          preferredHeight.value = measuredHeight;
+          // Add 2px to account for SearchField container border
+          preferredHeight.value = measuredHeight + 2;
           return;
         }
       }
@@ -458,7 +459,7 @@ class SearchScreen extends HookConsumerWidget {
                 title: isEditMode
                     ? null
                     : Padding(
-                        padding: const EdgeInsets.symmetric(horizontal: 16.0),
+                        padding: const EdgeInsets.symmetric(horizontal: 8.0),
                         child: Builder(
                           builder: (context) {
                             final tabTypeSwitcher = Focus(
@@ -529,8 +530,6 @@ class SearchScreen extends HookConsumerWidget {
                       ),
                 bottom: PreferredSize(
                   preferredSize: Size.fromHeight(preferredHeight.value),
-                  child: Padding(
-                    padding: const EdgeInsets.only(left: 16.0),
                   child: SearchField(
                     textFieldKey: textFieldKey,
                     showBangIcon: showBangIcon,
@@ -595,9 +594,7 @@ class SearchScreen extends HookConsumerWidget {
                           if (isEditMode) {
                             // Load into existing tab
                             await ref
-                                  .read(
-                                    tabSessionProvider(tabId: tabId).notifier,
-                                  )
+                                .read(tabSessionProvider(tabId: tabId).notifier)
                                 .loadUrl(url: newUrl);
                           } else {
                             // Create new tab
@@ -612,8 +609,7 @@ class SearchScreen extends HookConsumerWidget {
                                       : null,
                                   launchedFromIntent: launchedFromIntent,
                                   selectTab: true,
-                                    containerSelection:
-                                        selectedContainer == null
+                                  containerSelection: selectedContainer == null
                                       ? const TabContainerSelection.unassigned()
                                       : TabContainerSelection.specific(
                                           selectedContainer,
@@ -636,7 +632,6 @@ class SearchScreen extends HookConsumerWidget {
                   ),
                 ),
               ),
-              ),
               SliverToBoxAdapter(
                 child: ClipboardFillLink(controller: searchTextController),
               ),

app/lib/features/geckoview/features/search/presentation/widgets/search_field.dart

@@ -107,7 +107,17 @@ class SearchField extends HookConsumerWidget {
       );
     }
 
-    return AutoSuggestTextField(
+    final theme = Theme.of(context);
+    final colorScheme = theme.colorScheme;
+
+    return Container(
+      margin: const EdgeInsets.symmetric(horizontal: 8.0),
+      decoration: BoxDecoration(
+        color: colorScheme.surfaceContainerHigh,
+        borderRadius: BorderRadius.circular(16),
+        border: Border.all(color: colorScheme.outlineVariant),
+      ),
+      child: AutoSuggestTextField(
         controller: textEditingController,
         suggestion: suggestion.value,
         enableIMEPersonalizedLearning: !incognitoEnabled,
@@ -121,6 +131,7 @@ class SearchField extends HookConsumerWidget {
         autofocus: autofocus,
         decoration: InputDecoration(
           border: InputBorder.none,
+          contentPadding: const EdgeInsetsDirectional.fromSTEB(12, 12, 0, 12),
           prefixIcon: (showBangIcon && activeBang != null)
               ? Padding(
                   padding: const EdgeInsetsDirectional.all(12.0),
@@ -130,14 +141,20 @@ class SearchField extends HookConsumerWidget {
           label: label,
           hint: hint,
           floatingLabelBehavior: FloatingLabelBehavior.always,
+          suffixIconConstraints: const BoxConstraints(minHeight: 48),
           suffixIcon: hasText
-            ? IconButton(
+              ? Padding(
+                  padding: const EdgeInsetsDirectional.only(end: 8.0),
+                  child: IconButton(
                     onPressed: () {
                       textEditingController.clear();
                     },
                     icon: const Icon(Icons.clear),
+                  ),
                 )
-            : Row(
+              : Padding(
+                  padding: const EdgeInsetsDirectional.only(end: 8.0),
+                  child: Row(
                     mainAxisSize: MainAxisSize.min,
                     children: [
                       QrScannerButton(
@@ -155,6 +172,7 @@ class SearchField extends HookConsumerWidget {
                     ],
                   ),
                 ),
+        ),
         onTapOutside: unfocusOnTapOutside
             ? (event) {
                 safeFocusNode.unfocus();
@@ -173,6 +191,7 @@ class SearchField extends HookConsumerWidget {
             suggestion.value = null;
           }
         },
+      ),
     );
   }
 }