fix overflow

department-of-veterans-affairs · Jan 10, 2025 · fa25cef · fa25cef
1 parent 6717021
commit fa25cef
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 46 deletions.
diff --git a/packages/web-components/src/components/va-search-input/test/va-search-input.e2e.ts b/packages/web-components/src/components/va-search-input/test/va-search-input.e2e.ts
@@ -47,14 +47,16 @@ describe('va-search-input', () => {
         <mock:shadow-root>
         <form class="usa-search" role="search">
           <label class="usa-sr-only" for="search-field">Search</label>
-          <input class="usa-input" id="search-field" name="search" type="search" aria-autocomplete="none" aria-label="Search" autocomplete="off">
-          <button aria-label="Clear the search contents" class="usa-search__clear-input  usa-search__clear-input_empty" type="button">
-            <va-icon class="hydrated usa-search__clear-icon"></va-icon>
-          </button>
-          <button class="usa-button" type="submit">
-          <span class="usa-search__submit-text">Search VA.gov</span>
-          <va-icon class="hydrated usa-search__submit-icon"></va-icon>
-          </button>
+          <div class="usa-search__input-wrapper">
+            <input class="usa-input" id="search-field" name="search" type="search" aria-autocomplete="none" aria-label="Search" autocomplete="off">
+            <button aria-label="Clear the search contents" class="usa-search__clear-input  usa-search__clear-input_empty" type="button">
+              <va-icon class="hydrated usa-search__clear-icon"></va-icon>
+            </button>
+            <button class="usa-button" type="submit">
+              <span class="usa-search__submit-text">Search VA.gov</span>
+              <va-icon class="hydrated usa-search__submit-icon"></va-icon>
+            </button>
+          </div>
         </form>
         </mock:shadow-root>
       </va-search-input>

diff --git a/packages/web-components/src/components/va-search-input/va-search-input.scss b/packages/web-components/src/components/va-search-input/va-search-input.scss
@@ -90,4 +90,9 @@
 
 .usa-search__clear-input_empty {
   display: none;
+}
+.usa-search__input-wrapper {
+  width: 100%;
+  max-width: 1024px;
+  position: relative;
 }
diff --git a/packages/web-components/src/components/va-search-input/va-search-input.tsx b/packages/web-components/src/components/va-search-input/va-search-input.tsx
@@ -487,45 +487,47 @@ export class VaSearchInput {
           <label class="usa-sr-only" htmlFor="search-field">
             {label}
           </label>
-          <input
-            class="usa-input"
-            id="search-field"
-            name="search"
-            type="search"
-            ref={el => (this.inputRef = el as HTMLInputElement)}
-            aria-autocomplete={ariaAutoComplete}
-            aria-controls={ariaControls}
-            aria-expanded={ariaExpanded}
-            aria-haspopup={ariaHasPopup}
-            aria-label={label}
-            autocomplete="off"
-            onFocus={handleInputFocus}
-            onInput={handleInput}
-            onKeyDown={handleInputKeyDown}
-            role={role}
-            value={value}
-          />
-          <button type="button" onClick={handleClearButtonClick} class={clearButtonClasses} aria-label="Clear the search contents">
-            <va-icon
-              class="usa-search__clear-icon"
-              icon="close"
-              size={3}
+          <div class='usa-search__input-wrapper'>
+            <input
+              class="usa-input"
+              id="search-field"
+              name="search"
+              type="search"
+              ref={el => (this.inputRef = el as HTMLInputElement)}
+              aria-autocomplete={ariaAutoComplete}
+              aria-controls={ariaControls}
+              aria-expanded={ariaExpanded}
+              aria-haspopup={ariaHasPopup}
+              aria-label={label}
+              autocomplete="off"
+              onFocus={handleInputFocus}
+              onInput={handleInput}
+              onKeyDown={handleInputKeyDown}
+              role={role}
+              value={value}
             />
-          </button>
-          <button
-            class="usa-button"
-            type="submit"
-            onClick={handleButtonClick}
-          >
-            {!small && (
-              <span class="usa-search__submit-text">{buttonText}</span>
-            )}
-            <va-icon
-              class="usa-search__submit-icon"
-              icon="search"
-              size={3}
-            ></va-icon>
-          </button>
+            <button type="button" onClick={handleClearButtonClick} class={clearButtonClasses} aria-label="Clear the search contents">
+              <va-icon
+                class="usa-search__clear-icon"
+                icon="close"
+                size={3}
+              />
+            </button>
+            <button
+              class="usa-button"
+              type="submit"
+              onClick={handleButtonClick}
+            >
+              {!small && (
+                <span class="usa-search__submit-text">{buttonText}</span>
+              )}
+              <va-icon
+                class="usa-search__submit-icon"
+                icon="search"
+                size={3}
+              ></va-icon>
+            </button>
+          </div>
           {isListboxOpen && (
             <ul
               id="va-search-listbox"