diff --git a/lib/src/components/data-table/__snapshots__/DataTable.test.tsx.snap b/lib/src/components/data-table/__snapshots__/DataTable.test.tsx.snap
index e2cdaef34..8f2c03ee6 100644
--- a/lib/src/components/data-table/__snapshots__/DataTable.test.tsx.snap
+++ b/lib/src/components/data-table/__snapshots__/DataTable.test.tsx.snap
@@ -745,8 +745,9 @@ exports[`DataTable EmptyState renders custom empty state 1`] = `
     margin-bottom: var(--space-3);
   }
 
-  .c-dhzjXW-ieyRoAv-css {
+  .c-dhzjXW-icJWlas-css {
     position: relative;
+    width: auto;
     margin-bottom: var(--space-4);
   }
 
@@ -856,8 +857,9 @@ exports[`DataTable EmptyState renders custom empty state 1`] = `
     stroke-width: 3;
   }
 
-  .c-dhzjXW-icmpvrW-css {
+  .c-dhzjXW-ibnbbhV-css {
     position: relative;
+    width: auto;
   }
 
   .c-oUmPa-igyKUXm-css {
@@ -1392,8 +1394,9 @@ exports[`DataTable component Renders drag handles for draggable table rows 1`] =
     margin-bottom: var(--space-3);
   }
 
-  .c-dhzjXW-ieyRoAv-css {
+  .c-dhzjXW-icJWlas-css {
     position: relative;
+    width: auto;
     margin-bottom: var(--space-4);
   }
 
@@ -3147,8 +3150,9 @@ exports[`DataTable component renders 1`] = `
     margin-bottom: var(--space-3);
   }
 
-  .c-dhzjXW-ieyRoAv-css {
+  .c-dhzjXW-icJWlas-css {
     position: relative;
+    width: auto;
     margin-bottom: var(--space-4);
   }
 
@@ -3188,7 +3192,7 @@ exports[`DataTable component renders 1`] = `
     User search
   </label>
   <div
-    class="c-dhzjXW c-kOvGWL c-kOvGWL-dNqCDY-size-md c-dhzjXW-ieyRoAv-css"
+    class="c-dhzjXW c-kOvGWL c-kOvGWL-dNqCDY-size-md c-dhzjXW-icJWlas-css"
   >
     <input
       class="c-dyvMgW c-dyvMgW-gvmVBy-size-md c-foJWJd c-YEzsq c-YEzsq-icRYcAH-css"
@@ -4619,8 +4623,9 @@ exports[`DataTable server-side renders 1`] = `
     margin-bottom: var(--space-3);
   }
 
-  .c-dhzjXW-ieyRoAv-css {
+  .c-dhzjXW-icJWlas-css {
     position: relative;
+    width: auto;
     margin-bottom: var(--space-4);
   }
 
@@ -4730,8 +4735,9 @@ exports[`DataTable server-side renders 1`] = `
     stroke-width: 3;
   }
 
-  .c-dhzjXW-icmpvrW-css {
+  .c-dhzjXW-ibnbbhV-css {
     position: relative;
+    width: auto;
   }
 
   .c-oUmPa-igyKUXm-css {
@@ -4758,7 +4764,7 @@ exports[`DataTable server-side renders 1`] = `
     class="c-cVSpVL c-cVSpVL-gvmVBy-size-md c-cVSpVL-grKRUr-type-block c-cVSpVL-ihbtntv-css"
   />
   <div
-    class="c-dhzjXW c-kOvGWL c-kOvGWL-dNqCDY-size-md c-dhzjXW-icmpvrW-css"
+    class="c-dhzjXW c-kOvGWL c-kOvGWL-dNqCDY-size-md c-dhzjXW-ibnbbhV-css"
   >
     <input
       class="c-dyvMgW c-dyvMgW-gvmVBy-size-md c-foJWJd c-YEzsq c-YEzsq-icRYcAH-css"
@@ -5795,8 +5801,9 @@ exports[`DataTable sticky columns renders 1`] = `
     margin-bottom: var(--space-3);
   }
 
-  .c-dhzjXW-ieyRoAv-css {
+  .c-dhzjXW-icJWlas-css {
     position: relative;
+    width: auto;
     margin-bottom: var(--space-4);
   }
 
@@ -5906,8 +5913,9 @@ exports[`DataTable sticky columns renders 1`] = `
     stroke-width: 3;
   }
 
-  .c-dhzjXW-icmpvrW-css {
+  .c-dhzjXW-ibnbbhV-css {
     position: relative;
+    width: auto;
   }
 
   .c-oUmPa-igyKUXm-css {
diff --git a/lib/src/components/search-field/__snapshots__/SearchField.test.tsx.snap b/lib/src/components/search-field/__snapshots__/SearchField.test.tsx.snap
index 15db60760..5b6c17a1b 100644
--- a/lib/src/components/search-field/__snapshots__/SearchField.test.tsx.snap
+++ b/lib/src/components/search-field/__snapshots__/SearchField.test.tsx.snap
@@ -178,8 +178,9 @@ exports[`SearchField component renders a field in error state - has no programma
     margin-bottom: var(--space-3);
   }
 
-  .c-dhzjXW-icmpvrW-css {
+  .c-dhzjXW-ibnbbhV-css {
     position: relative;
+    width: auto;
   }
 
   .c-YEzsq-icRYcAH-css {
@@ -230,7 +231,7 @@ exports[`SearchField component renders a field in error state - has no programma
         </label>
       </div>
       <div
-        class="c-dhzjXW c-kOvGWL c-kOvGWL-dNqCDY-size-md c-dhzjXW-icmpvrW-css"
+        class="c-dhzjXW c-kOvGWL c-kOvGWL-dNqCDY-size-md c-dhzjXW-ibnbbhV-css"
       >
         <input
           class="c-dyvMgW c-dyvMgW-gvmVBy-size-md c-foJWJd c-YEzsq c-YEzsq-icRYcAH-css"
@@ -443,8 +444,9 @@ exports[`SearchField component renders a field with a disabled input - has no pr
     margin-bottom: var(--space-3);
   }
 
-  .c-dhzjXW-icmpvrW-css {
+  .c-dhzjXW-ibnbbhV-css {
     position: relative;
+    width: auto;
   }
 
   .c-YEzsq-icRYcAH-css {
@@ -478,7 +480,7 @@ exports[`SearchField component renders a field with a disabled input - has no pr
         </label>
       </div>
       <div
-        class="c-dhzjXW c-kOvGWL c-kOvGWL-dNqCDY-size-md c-dhzjXW-icmpvrW-css"
+        class="c-dhzjXW c-kOvGWL c-kOvGWL-dNqCDY-size-md c-dhzjXW-ibnbbhV-css"
       >
         <input
           class="c-dyvMgW c-dyvMgW-gvmVBy-size-md c-foJWJd c-YEzsq c-YEzsq-icRYcAH-css"
@@ -655,8 +657,9 @@ exports[`SearchField component renders a field with a search input - has no prog
     margin-bottom: var(--space-3);
   }
 
-  .c-dhzjXW-icmpvrW-css {
+  .c-dhzjXW-ibnbbhV-css {
     position: relative;
+    width: auto;
   }
 
   .c-YEzsq-icRYcAH-css {
@@ -690,7 +693,7 @@ exports[`SearchField component renders a field with a search input - has no prog
         </label>
       </div>
       <div
-        class="c-dhzjXW c-kOvGWL c-kOvGWL-dNqCDY-size-md c-dhzjXW-icmpvrW-css"
+        class="c-dhzjXW c-kOvGWL c-kOvGWL-dNqCDY-size-md c-dhzjXW-ibnbbhV-css"
       >
         <input
           class="c-dyvMgW c-dyvMgW-gvmVBy-size-md c-foJWJd c-YEzsq c-YEzsq-icRYcAH-css"
diff --git a/lib/src/components/search-input/SearchInput.tsx b/lib/src/components/search-input/SearchInput.tsx
index 0abf499ed..0ff4795e8 100644
--- a/lib/src/components/search-input/SearchInput.tsx
+++ b/lib/src/components/search-input/SearchInput.tsx
@@ -47,9 +47,9 @@ const StyledIcon = styled(Icon, {
 
 const StyledSearchInputText = styled(InputText, {
   '&::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button':
-    {
-      display: 'none'
-    }
+  {
+    display: 'none'
+  }
 })
 
 export const SearchInput: React.ForwardRefExoticComponent<SearchInputProps> =
@@ -145,7 +145,7 @@ export const SearchInput: React.ForwardRefExoticComponent<SearchInputProps> =
       }
 
       return (
-        <InputBackground css={{ position: 'relative', ...css }} size={size}>
+        <InputBackground css={{ position: 'relative', width: 'auto', ...css }} size={size}>
           <StyledSearchInputText
             ref={setInputElRef}
             size={size}
diff --git a/lib/src/components/search-input/__snapshots__/SearchInput.test.tsx.snap b/lib/src/components/search-input/__snapshots__/SearchInput.test.tsx.snap
index f11703cff..8b6690e2b 100644
--- a/lib/src/components/search-input/__snapshots__/SearchInput.test.tsx.snap
+++ b/lib/src/components/search-input/__snapshots__/SearchInput.test.tsx.snap
@@ -111,8 +111,9 @@ exports[`SearchInput component renders 1`] = `
 }
 
 @media  {
-  .c-dhzjXW-icmpvrW-css {
+  .c-dhzjXW-ibnbbhV-css {
     position: relative;
+    width: auto;
   }
 
   .c-YEzsq-icRYcAH-css {
@@ -129,7 +130,7 @@ exports[`SearchInput component renders 1`] = `
 
 <div>
   <div
-    class="c-dhzjXW c-kOvGWL c-kOvGWL-dNqCDY-size-md c-dhzjXW-icmpvrW-css"
+    class="c-dhzjXW c-kOvGWL c-kOvGWL-dNqCDY-size-md c-dhzjXW-ibnbbhV-css"
   >
     <input
       class="c-dyvMgW c-dyvMgW-gvmVBy-size-md c-foJWJd c-YEzsq c-YEzsq-icRYcAH-css"
@@ -360,8 +361,9 @@ exports[`SearchInput component renders clear button when non-empty defaultValue
 }
 
 @media  {
-  .c-dhzjXW-icmpvrW-css {
+  .c-dhzjXW-ibnbbhV-css {
     position: relative;
+    width: auto;
   }
 
   .c-YEzsq-icRYcAH-css {
@@ -385,7 +387,7 @@ exports[`SearchInput component renders clear button when non-empty defaultValue
 
 <div>
   <div
-    class="c-dhzjXW c-kOvGWL c-kOvGWL-dNqCDY-size-md c-dhzjXW-icmpvrW-css"
+    class="c-dhzjXW c-kOvGWL c-kOvGWL-dNqCDY-size-md c-dhzjXW-ibnbbhV-css"
   >
     <input
       class="c-dyvMgW c-dyvMgW-gvmVBy-size-md c-foJWJd c-YEzsq c-YEzsq-icRYcAH-css"
@@ -612,8 +614,9 @@ exports[`SearchInput component renders lg size 1`] = `
 }
 
 @media  {
-  .c-dhzjXW-icmpvrW-css {
+  .c-dhzjXW-ibnbbhV-css {
     position: relative;
+    width: auto;
   }
 
   .c-YEzsq-icRYcAH-css {
@@ -637,7 +640,7 @@ exports[`SearchInput component renders lg size 1`] = `
 
 <div>
   <div
-    class="c-dhzjXW c-kOvGWL c-kOvGWL-hSbHZR-size-lg c-dhzjXW-icmpvrW-css"
+    class="c-dhzjXW c-kOvGWL c-kOvGWL-hSbHZR-size-lg c-dhzjXW-ibnbbhV-css"
   >
     <input
       class="c-dyvMgW c-dyvMgW-gvmVBy-size-md c-foJWJd c-YEzsq c-YEzsq-icRYcAH-css"