refactor: refactor after review

src/SearchField/SearchFieldAdvanced.jsx

@@ -100,7 +100,7 @@ function SearchFieldAdvanced(props) {
         role="search"
         onSubmit={handleSubmit}
         onReset={handleClear}
-        className="pgn__searchfield-form d-flex align-items-center w-100"
+        className="pgn__searchfield-form"
         aria-label={formAriaLabel}
       >
         <SearchFieldContext.Provider

src/SearchField/__snapshots__/SearchField.test.jsx.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<SearchField /> with basic usage should match the snapshot 1`] = `"<div class=\\"pgn__searchfield d-flex\\"><form role=\\"search\\" class=\\"d-flex align-items-center w-100\\"><label for=\\"pgn-searchfield-input-1\\" class=\\"m-0\\"><span class=\\"sr-only\\">search</span></label><input type=\\"text\\" class=\\"form-control\\" role=\\"searchbox\\" id=\\"pgn-searchfield-input-1\\" name=\\"searchfield-input\\" value=\\"\\"/><button type=\\"submit\\" class=\\"btn\\"><span class=\\"pgn__icon\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\" focusable=\\"false\\" aria-hidden=\\"true\\"><path d=\\"M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5Zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14Z\\" fill=\\"currentColor\\"></path></svg></span><span class=\\"sr-only\\">submit search</span></button></form></div>"`;
+exports[`<SearchField /> with basic usage should match the snapshot 1`] = `"<div class=\\"pgn__searchfield d-flex\\"><form role=\\"search\\" class=\\"pgn__searchfield-form\\"><label for=\\"pgn-searchfield-input-1\\" class=\\"m-0\\"><span class=\\"sr-only\\">search</span></label><input type=\\"text\\" class=\\"form-control\\" role=\\"searchbox\\" id=\\"pgn-searchfield-input-1\\" name=\\"searchfield-input\\" value=\\"\\"/><button type=\\"submit\\" class=\\"btn\\"><span class=\\"pgn__icon\\"><svg width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\" role=\\"img\\" focusable=\\"false\\" aria-hidden=\\"true\\"><path d=\\"M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5Zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14Z\\" fill=\\"currentColor\\"></path></svg></span><span class=\\"sr-only\\">submit search</span></button></form></div>"`;

src/SearchField/index.scss

@@ -5,6 +5,9 @@
   border: $search-border-width solid $search-border-color;
 
   .pgn__searchfield-form {
+    display: flex;
+    align-items: center;
+    width: 100%;
     background-color: $search-form-background-color;
   }