diff --git a/packages/connection-form/src/components/advanced-options-tabs/advanced-tab/advanced-tab.tsx b/packages/connection-form/src/components/advanced-options-tabs/advanced-tab/advanced-tab.tsx
index 00034334d4c..eeab3ebe77f 100644
--- a/packages/connection-form/src/components/advanced-options-tabs/advanced-tab/advanced-tab.tsx
+++ b/packages/connection-form/src/components/advanced-options-tabs/advanced-tab/advanced-tab.tsx
@@ -53,10 +53,6 @@ const containerStyles = css({
   marginTop: spacing[3],
 });
 
-const fieldStyles = css({
-  width: '50%',
-});
-
 function AdvancedTab({
   updateConnectionFormField,
   connectionStringUrl,
@@ -144,7 +140,6 @@ function AdvancedTab({
       <FormFieldContainer>
         <TextInput
           spellCheck={false}
-          className={fieldStyles}
           onChange={({ target: { value } }: ChangeEvent<HTMLInputElement>) => {
             handleFieldChanged('replicaSet', value);
           }}
@@ -161,7 +156,6 @@ function AdvancedTab({
       <FormFieldContainer>
         <TextInput
           spellCheck={false}
-          className={fieldStyles}
           onChange={({ target: { value } }: ChangeEvent<HTMLInputElement>) => {
             handlePathChanged(value);
           }}
diff --git a/packages/connection-form/src/components/advanced-options-tabs/advanced-tab/url-options.tsx b/packages/connection-form/src/components/advanced-options-tabs/advanced-tab/url-options.tsx
index 7ddc078e854..c31eb7178a2 100644
--- a/packages/connection-form/src/components/advanced-options-tabs/advanced-tab/url-options.tsx
+++ b/packages/connection-form/src/components/advanced-options-tabs/advanced-tab/url-options.tsx
@@ -14,7 +14,6 @@ import UrlOptionsTable from './url-options-table';
 
 const urlOptionsContainerStyles = css({
   marginTop: spacing[3],
-  width: spacing[6] * 7,
 });
 
 const urlOptionsTableDescriptionStyles = css({
diff --git a/packages/connection-form/src/components/advanced-options-tabs/authentication-tab/authentication-tab.tsx b/packages/connection-form/src/components/advanced-options-tabs/authentication-tab/authentication-tab.tsx
index c348f4164d7..84eecf4ebcf 100644
--- a/packages/connection-form/src/components/advanced-options-tabs/authentication-tab/authentication-tab.tsx
+++ b/packages/connection-form/src/components/advanced-options-tabs/authentication-tab/authentication-tab.tsx
@@ -79,7 +79,6 @@ const containerStyles = css({
 
 const contentStyles = css({
   marginTop: spacing[3],
-  width: spacing[7] * 5,
 });
 
 function getSelectedAuthTabForConnectionString(
diff --git a/packages/connection-form/src/components/advanced-options-tabs/ssh-tunnel-tab/proxy-and-ssh-tunnel-tab.tsx b/packages/connection-form/src/components/advanced-options-tabs/ssh-tunnel-tab/proxy-and-ssh-tunnel-tab.tsx
index 1b0f5c11810..ec4cf163a5e 100644
--- a/packages/connection-form/src/components/advanced-options-tabs/ssh-tunnel-tab/proxy-and-ssh-tunnel-tab.tsx
+++ b/packages/connection-form/src/components/advanced-options-tabs/ssh-tunnel-tab/proxy-and-ssh-tunnel-tab.tsx
@@ -69,8 +69,6 @@ const containerStyles = css({
 
 const contentStyles = css({
   marginTop: spacing[3],
-  width: '50%',
-  minWidth: 400,
 });
 
 const getSelectedTunnelType = (
diff --git a/packages/connection-form/src/components/advanced-options-tabs/tls-ssl-tab/tls-certificate-authority.tsx b/packages/connection-form/src/components/advanced-options-tabs/tls-ssl-tab/tls-certificate-authority.tsx
index 3582945b60e..d7f0d9c0036 100644
--- a/packages/connection-form/src/components/advanced-options-tabs/tls-ssl-tab/tls-certificate-authority.tsx
+++ b/packages/connection-form/src/components/advanced-options-tabs/tls-ssl-tab/tls-certificate-authority.tsx
@@ -4,7 +4,6 @@ import {
   Description,
   Label,
   FileInput,
-  css,
   cx,
 } from '@mongodb-js/compass-components';
 import {
@@ -14,10 +13,6 @@ import {
 
 import FormFieldContainer from '../../form-field-container';
 
-const caFieldsContainer = css({
-  width: '80%',
-});
-
 function TLSCertificateAuthority({
   tlsCAFile,
   useSystemCA,
@@ -37,7 +32,7 @@ function TLSCertificateAuthority({
   ) => void;
 }): React.ReactElement {
   return (
-    <FormFieldContainer className={caFieldsContainer}>
+    <FormFieldContainer>
       <FileInput
         description={
           displayDatabaseConnectionUserHints ? 'Learn More' : undefined
diff --git a/packages/connection-form/src/components/advanced-options-tabs/tls-ssl-tab/tls-client-certificate.tsx b/packages/connection-form/src/components/advanced-options-tabs/tls-ssl-tab/tls-client-certificate.tsx
index 950a452377f..68899f711be 100644
--- a/packages/connection-form/src/components/advanced-options-tabs/tls-ssl-tab/tls-client-certificate.tsx
+++ b/packages/connection-form/src/components/advanced-options-tabs/tls-ssl-tab/tls-client-certificate.tsx
@@ -1,12 +1,8 @@
 import React from 'react';
-import { FileInput, TextInput, css } from '@mongodb-js/compass-components';
+import { FileInput, TextInput } from '@mongodb-js/compass-components';
 
 import FormFieldContainer from '../../form-field-container';
 
-const inputFieldStyles = css({
-  width: '80%',
-});
-
 function TLSClientCertificate({
   tlsCertificateKeyFile,
   tlsCertificateKeyFilePassword,
@@ -28,7 +24,7 @@ function TLSClientCertificate({
 }): React.ReactElement {
   return (
     <>
-      <FormFieldContainer className={inputFieldStyles}>
+      <FormFieldContainer>
         <FileInput
           description={
             displayDatabaseConnectionUserHints ? 'Learn More' : undefined
@@ -59,7 +55,6 @@ function TLSClientCertificate({
       </FormFieldContainer>
       <FormFieldContainer>
         <TextInput
-          className={inputFieldStyles}
           onChange={({
             target: { value },
           }: React.ChangeEvent<HTMLInputElement>) => {
diff --git a/packages/connection-form/src/components/form-field-container.tsx b/packages/connection-form/src/components/form-field-container.tsx
index e333f0563bc..f1d036e16d0 100644
--- a/packages/connection-form/src/components/form-field-container.tsx
+++ b/packages/connection-form/src/components/form-field-container.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 
 const formFieldContainerStyles = css({
   marginTop: spacing[3],
+  width: spacing[7] * 6,
 });
 
 function FormFieldContainer({