From 8c80da783ff8e3ee97e597c7e0ac1f80f8a320b7 Mon Sep 17 00:00:00 2001
From: Craig Russell <CDRussell@users.noreply.github.com>
Date: Tue, 31 Oct 2023 20:44:09 +0000
Subject: [PATCH] Apply max-width constraints to autofill dialogs' contents
 (#3773)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--
Note: This checklist is a reminder of our shared engineering
expectations.
The items in Bold are required
If your PR involves UI changes:
1. Upload screenshots or screencasts that illustrate the changes before
/ after
2. Add them under the UI changes section (feel free to add more columns
if needed)
If your PR does not involve UI changes, you can remove the **UI
changes** section

At a minimum, make sure your changes are tested in API 23 and one of the
more recent API levels available.
-->

Task/Issue URL: https://app.asana.com/0/0/1205495150811754/f

### Description
We want to apply a max-width constraint to the contents of the autofill
dialogs. Some of the autofill dialogs had different ways of constraining
content before, and others had none; this PR consolidates them all into
using this approach:

- Guideline left set to 10% from left edge of dialog, guideline right
set to 10% from right edge of dialog
- Autofill dialog content can use the remaining 80% of dialog width, up
to max of `480dp`

ℹ️ Note for reviewing the PR:
- a lot of the _changes_ are caused by indentation as views are now
inside another view group
- tip: hide whitespace differences to see only what's actually changed,
ignoring the change indentation
<img width="249" alt="Screenshot 2023-10-31 at 12 34 27"
src="https://github.com/duckduckgo/Android/assets/1336281/f19f99f0-6b02-4d3a-9810-4d2a4719432c">


### Steps to test this PR

_Save login prompt_
- [x] Visit https://fill.dev/form/login-simple and enter username
[`abcd`] and password (>= 4 chars)
- [x] Verify save prompt looks ok

_Select login prompt_
- [x] Visit https://fill.dev/form/login-simple again
- [x] verify prompt to login with saved credential looks ok

_Update login prompt_
- [x] Visit https://fill.dev/form/login-simple again and dismiss any
prompts to use a saved login
- [x] Instead, enter same username as before `abcd` and a new password
- [x] Verify the update login prompt looks ok

_Generate password prompt_
- [x] Visit https://fill.dev/form/registration-email and tap on password
field
- [x] Verify generate password prompts looks ok

_Email protection in-context signup_
- [x] Visit https://fill.dev/form/registration-email when you're **not**
signed into email protection (requires device to be in English locale)
- [x] Tap on grey Dax in email field; verify the prompt to sign up for
email protection looks ok

_Email protection, signed in state_
- [x] Sign into email protection (doesn't matter how you sign in,
in-context or normal approach from settings)
- [x] Visit https://fill.dev/form/registration-email again, and tap on
email field
- [x] Verify the prompt to use Email Protection looks ok



### UI changes

Screenshots available
[here](https://app.asana.com/0/0/1205842983551006/f) for phones and
tablets, portrait and landscape
---
 ...tent_autofill_generate_password_dialog.xml | 163 +++++++++-------
 .../content_autofill_save_new_credentials.xml | 179 +++++++++---------
 ...nt_autofill_select_credentials_tooltip.xml | 116 +++++++-----
 ...t_autofill_update_existing_credentials.xml | 154 ++++++++-------
 .../dialog_email_protection_choose_email.xml  |  95 ++++++----
 ...og_email_protection_in_context_sign_up.xml | 166 ++++++++--------
 .../res/values/autofill-impl-dimensions.xml   |   1 +
 .../src/main/res/values/styles.xml            |  14 ++
 8 files changed, 483 insertions(+), 405 deletions(-)

diff --git a/autofill/autofill-impl/src/main/res/layout/content_autofill_generate_password_dialog.xml b/autofill/autofill-impl/src/main/res/layout/content_autofill_generate_password_dialog.xml
index 6e5ad8642f74..74d9171baaa0 100644
--- a/autofill/autofill-impl/src/main/res/layout/content_autofill_generate_password_dialog.xml
+++ b/autofill/autofill-impl/src/main/res/layout/content_autofill_generate_password_dialog.xml
@@ -28,86 +28,105 @@
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintTop_toTopOf="parent" />
 
-        <com.duckduckgo.mobile.android.ui.view.text.DaxTextView
+        <androidx.constraintlayout.widget.Guideline
+            android:id="@+id/guidelineStart"
+            style="@style/AutofillDialogContentGuidelineStart" />
+
+        <androidx.constraintlayout.widget.Guideline
+            android:id="@+id/guidelineEnd"
+            style="@style/AutofillDialogContentGuidelineEnd" />
+
+        <androidx.constraintlayout.widget.ConstraintLayout
+            android:id="@+id/autofillDialogContentContainer"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
-            android:id="@+id/dialogTitle"
-            android:layout_marginTop="40dp"
-            android:layout_marginStart="@dimen/keyline_4"
-            android:layout_marginEnd="@dimen/keyline_4"
-            android:text="@string/autofill_password_generation_offer_title"
-            android:gravity="center_horizontal"
-            app:layout_constraintEnd_toEndOf="@id/useSecurePasswordButton"
-            app:layout_constraintStart_toStartOf="@id/useSecurePasswordButton"
             app:layout_constraintTop_toTopOf="parent"
-            app:typography="h2" />
+            app:layout_constraintWidth_max="@dimen/autofillBottomSheetContentMaxWidth"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintStart_toStartOf="@id/guidelineStart"
+            app:layout_constraintEnd_toEndOf="@id/guidelineEnd">
 
-        <com.duckduckgo.mobile.android.ui.view.text.DaxTextView
-            android:id="@+id/generatedPassword"
-            android:layout_width="wrap_content"
-            app:layout_constrainedWidth="true"
-            app:typography="body1_mono"
-            android:gravity="center_horizontal"
-            android:layout_marginTop="28dp"
-            tools:text="abc123ABC456@^*789abc123ABC456@^*789abc123ABC456@^*789"
-            android:layout_marginBottom="28dp"
-            android:letterSpacing="0.06"
-            app:layout_constraintHorizontal_chainStyle="packed"
-            app:layout_constraintEnd_toStartOf="@id/copyPasswordButton"
-            app:layout_constraintStart_toStartOf="@id/useSecurePasswordButton"
-            app:layout_constraintTop_toBottomOf="@id/dialogTitle"
-            android:layout_height="wrap_content" />
+            <com.duckduckgo.mobile.android.ui.view.text.DaxTextView
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:id="@+id/dialogTitle"
+                android:layout_marginTop="40dp"
+                android:layout_marginStart="@dimen/keyline_4"
+                android:layout_marginEnd="@dimen/keyline_4"
+                android:text="@string/autofill_password_generation_offer_title"
+                android:gravity="center_horizontal"
+                app:layout_constraintEnd_toEndOf="@id/useSecurePasswordButton"
+                app:layout_constraintStart_toStartOf="@id/useSecurePasswordButton"
+                app:layout_constraintTop_toTopOf="parent"
+                app:typography="h2" />
 
-        <com.duckduckgo.mobile.android.ui.view.button.IconButton
-            android:id="@+id/copyPasswordButton"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:background="?selectableItemBackgroundBorderless"
-            android:scaleType="fitCenter"
-            android:layout_marginStart="10dp"
-            app:tint="?attr/daxColorPrimaryIcon"
-            app:srcCompat="@drawable/ic_copy"
-            app:layout_constraintStart_toEndOf="@id/generatedPassword"
-            app:layout_constraintTop_toTopOf="@id/generatedPassword"
-            app:layout_constraintEnd_toEndOf="@id/useSecurePasswordButton"
-            app:layout_constraintBottom_toBottomOf="@id/generatedPassword"
-            android:contentDescription="@string/credentialManagementEditButtonCopyPassword" />
+            <com.duckduckgo.mobile.android.ui.view.text.DaxTextView
+                android:id="@+id/generatedPassword"
+                android:layout_width="wrap_content"
+                app:layout_constrainedWidth="true"
+                app:typography="body1_mono"
+                android:gravity="center_horizontal"
+                android:layout_marginTop="28dp"
+                tools:text="abc123ABC456@^*789abc123ABC456@^*789abc123ABC456@^*789"
+                android:layout_marginBottom="28dp"
+                android:letterSpacing="0.06"
+                app:layout_constraintHorizontal_chainStyle="packed"
+                app:layout_constraintEnd_toStartOf="@id/copyPasswordButton"
+                app:layout_constraintStart_toStartOf="@id/useSecurePasswordButton"
+                app:layout_constraintTop_toBottomOf="@id/dialogTitle"
+                android:layout_height="wrap_content" />
 
-        <com.duckduckgo.mobile.android.ui.view.text.DaxTextView
-            android:id="@+id/dialogSubtitle"
-            android:layout_width="0dp"
-            android:layout_height="wrap_content"
-            android:layout_marginTop="24dp"
-            android:enabled="false"
-            android:gravity="center_horizontal"
-            app:layout_constraintWidth_percent="0.75"
-            app:typography="body2"
-            app:layout_constraintEnd_toEndOf="@id/useSecurePasswordButton"
-            app:layout_constraintStart_toStartOf="@id/useSecurePasswordButton"
-            app:layout_constraintTop_toBottomOf="@id/generatedPassword"
-            android:text="@string/autofill_password_generation_offer_message" />
+            <com.duckduckgo.mobile.android.ui.view.button.IconButton
+                android:id="@+id/copyPasswordButton"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:background="?selectableItemBackgroundBorderless"
+                android:scaleType="fitCenter"
+                android:layout_marginStart="10dp"
+                app:tint="?attr/daxColorPrimaryIcon"
+                app:srcCompat="@drawable/ic_copy"
+                app:layout_constraintStart_toEndOf="@id/generatedPassword"
+                app:layout_constraintTop_toTopOf="@id/generatedPassword"
+                app:layout_constraintEnd_toEndOf="@id/useSecurePasswordButton"
+                app:layout_constraintBottom_toBottomOf="@id/generatedPassword"
+                android:contentDescription="@string/credentialManagementEditButtonCopyPassword" />
 
-        <com.duckduckgo.mobile.android.ui.view.button.DaxButtonPrimary
-            android:id="@+id/useSecurePasswordButton"
-            app:buttonSize="large"
-            android:layout_width="0dp"
-            android:layout_height="wrap_content"
-            android:layout_marginTop="@dimen/keyline_5"
-            android:text="@string/autofill_password_generation_offer_accept"
-            app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toBottomOf="@id/dialogSubtitle"
-            app:layout_constraintWidth_percent="0.8" />
+            <com.duckduckgo.mobile.android.ui.view.text.DaxTextView
+                android:id="@+id/dialogSubtitle"
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:layout_marginTop="24dp"
+                android:enabled="false"
+                android:gravity="center_horizontal"
+                app:layout_constraintWidth_percent="0.75"
+                app:typography="body2"
+                app:layout_constraintEnd_toEndOf="@id/useSecurePasswordButton"
+                app:layout_constraintStart_toStartOf="@id/useSecurePasswordButton"
+                app:layout_constraintTop_toBottomOf="@id/generatedPassword"
+                android:text="@string/autofill_password_generation_offer_message" />
 
-        <com.duckduckgo.mobile.android.ui.view.button.DaxButtonGhost
-            android:id="@+id/cancelButton"
-            android:layout_width="0dp"
-            android:layout_height="wrap_content"
-            app:buttonSize="large"
-            android:text="@string/autofill_password_generation_offer_decline"
-            app:layout_constraintEnd_toEndOf="@id/useSecurePasswordButton"
-            app:layout_constraintStart_toStartOf="@id/useSecurePasswordButton"
-            app:layout_constraintTop_toBottomOf="@id/useSecurePasswordButton" />
+            <com.duckduckgo.mobile.android.ui.view.button.DaxButtonPrimary
+                android:id="@+id/useSecurePasswordButton"
+                app:buttonSize="large"
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:layout_marginTop="@dimen/keyline_5"
+                android:text="@string/autofill_password_generation_offer_accept"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toBottomOf="@id/dialogSubtitle" />
+
+            <com.duckduckgo.mobile.android.ui.view.button.DaxButtonGhost
+                android:id="@+id/cancelButton"
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                app:buttonSize="large"
+                android:text="@string/autofill_password_generation_offer_decline"
+                app:layout_constraintEnd_toEndOf="@id/useSecurePasswordButton"
+                app:layout_constraintStart_toStartOf="@id/useSecurePasswordButton"
+                app:layout_constraintTop_toBottomOf="@id/useSecurePasswordButton" />
+
+        </androidx.constraintlayout.widget.ConstraintLayout>
 
     </androidx.constraintlayout.widget.ConstraintLayout>
 </androidx.core.widget.NestedScrollView>
\ No newline at end of file
diff --git a/autofill/autofill-impl/src/main/res/layout/content_autofill_save_new_credentials.xml b/autofill/autofill-impl/src/main/res/layout/content_autofill_save_new_credentials.xml
index 6d4b99231e65..84995b19201e 100644
--- a/autofill/autofill-impl/src/main/res/layout/content_autofill_save_new_credentials.xml
+++ b/autofill/autofill-impl/src/main/res/layout/content_autofill_save_new_credentials.xml
@@ -14,117 +14,114 @@
   ~ limitations under the License.
   -->
 
-<androidx.core.widget.NestedScrollView
-    xmlns:android="http://schemas.android.com/apk/res/android"
+<androidx.core.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent">
 
-    <androidx.constraintlayout.widget.ConstraintLayout
-        style="@style/AutofillDialogRootViewStyle">
+    <androidx.constraintlayout.widget.ConstraintLayout style="@style/AutofillDialogRootViewStyle">
+
+        <ImageView
+            android:id="@+id/closeButton"
+            style="@style/AutofillDialogCloseButton"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintTop_toTopOf="parent" />
 
         <androidx.constraintlayout.widget.Guideline
             android:id="@+id/guidelineStart"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:background="#F00"
-            android:orientation="vertical"
-            app:layout_constraintGuide_percent=".15"/>
+            style="@style/AutofillDialogContentGuidelineStart" />
 
         <androidx.constraintlayout.widget.Guideline
             android:id="@+id/guidelineEnd"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:background="#F00"
-            android:orientation="vertical"
-            app:layout_constraintGuide_percent=".85"/>
-
-        <ImageView
-            android:id="@+id/closeButton"
-            style="@style/AutofillDialogCloseButton"
-            app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintTop_toTopOf="parent"/>
+            style="@style/AutofillDialogContentGuidelineEnd" />
 
-        <LinearLayout
-            android:id="@+id/siteDetailsContainer"
+        <androidx.constraintlayout.widget.ConstraintLayout
+            android:id="@+id/autofillDialogContentContainer"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
-            android:layout_marginTop="40dp"
-            android:gravity="center"
-            android:orientation="horizontal"
-            app:layout_constraintEnd_toEndOf="@id/guidelineEnd"
+            app:layout_constraintTop_toTopOf="parent"
+            app:layout_constraintWidth_max="@dimen/autofillBottomSheetContentMaxWidth"
+            app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintStart_toStartOf="@id/guidelineStart"
-            app:layout_constraintTop_toTopOf="parent">
+            app:layout_constraintEnd_toEndOf="@id/guidelineEnd">
 
-            <ImageView
-                android:id="@+id/favicon"
-                style="@style/AutofillDialogFaviconStyle"
-                tools:src="@drawable/ic_dax_icon"/>
+            <LinearLayout
+                android:id="@+id/siteDetailsContainer"
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:layout_marginTop="40dp"
+                android:gravity="center"
+                android:orientation="horizontal"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="parent">
+
+                <ImageView
+                    android:id="@+id/favicon"
+                    style="@style/AutofillDialogFaviconStyle"
+                    tools:src="@drawable/ic_dax_icon" />
+
+                <com.duckduckgo.mobile.android.ui.view.text.DaxTextView
+                    android:id="@+id/siteName"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_marginEnd="@dimen/keyline_2"
+                    app:typography="h5"
+                    tools:text="duckduckgo.com" />
+
+            </LinearLayout>
 
             <com.duckduckgo.mobile.android.ui.view.text.DaxTextView
-                android:id="@+id/siteName"
-                android:layout_width="wrap_content"
+                android:layout_width="0dp"
                 android:layout_height="wrap_content"
-                android:layout_marginEnd="@dimen/keyline_2"
-                app:typography="h5"
-                tools:text="duckduckgo.com" />
-
-        </LinearLayout>
-
-        <com.duckduckgo.mobile.android.ui.view.text.DaxTextView
-            android:layout_width="0dp"
-            android:layout_height="wrap_content"
-            android:id="@+id/dialogTitle"
-            android:breakStrategy="balanced"
-            android:text="@string/saveLoginDialogTitle"
-            android:layout_marginTop="@dimen/keyline_5"
-            android:gravity="center_horizontal"
-            app:layout_constraintEnd_toEndOf="@id/guidelineEnd"
-            app:layout_constraintStart_toStartOf="@id/guidelineStart"
-            app:layout_constraintTop_toBottomOf="@id/siteDetailsContainer"
-            app:typography="h2" />
-
-
-        <TextView
-            tools:ignore="DeprecatedWidgetInXml"
-            android:id="@+id/onboardingSubtitle"
-            android:layout_width="0dp"
-            android:layout_height="wrap_content"
-            android:layout_marginTop="@dimen/keyline_5"
-            android:text="@string/saveLoginDialogSubtitle"
-            android:textAlignment="center"
-            android:textColor="?autofillDialogOnboardingExplanationColor"
-            android:textSize="14sp"
-            app:layout_constraintEnd_toEndOf="@id/saveLoginButton"
-            app:layout_constraintStart_toStartOf="@id/saveLoginButton"
-            app:layout_constraintTop_toBottomOf="@id/dialogTitle"/>
-
-        <com.duckduckgo.mobile.android.ui.view.button.DaxButtonPrimary
-            android:id="@+id/saveLoginButton"
-            android:layout_width="0dp"
-            app:buttonSize="large"
-            android:layout_height="wrap_content"
-            android:layout_marginTop="@dimen/keyline_5"
-            android:layout_marginStart="40dp"
-            android:layout_marginEnd="40dp"
-            android:text="@string/saveLoginDialogButtonSave"
-            app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toBottomOf="@id/onboardingSubtitle"
-            app:layout_constraintWidth_max="300dp"
-            app:layout_constraintWidth_percent="0.8"/>
-
-        <com.duckduckgo.mobile.android.ui.view.button.DaxButtonGhost
-            android:id="@+id/cancelButton"
-            android:layout_width="0dp"
-            android:layout_height="wrap_content"
-            app:buttonSize="large"
-            android:text="@string/saveLoginDialogNotNow"
-            app:layout_constraintEnd_toEndOf="@id/saveLoginButton"
-            app:layout_constraintStart_toStartOf="@id/saveLoginButton"
-            app:layout_constraintTop_toBottomOf="@id/saveLoginButton"/>
+                android:id="@+id/dialogTitle"
+                android:breakStrategy="balanced"
+                android:text="@string/saveLoginDialogTitle"
+                android:layout_marginTop="@dimen/keyline_5"
+                android:gravity="center_horizontal"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toBottomOf="@id/siteDetailsContainer"
+                app:typography="h2" />
+
+
+            <TextView
+                tools:ignore="DeprecatedWidgetInXml"
+                android:id="@+id/onboardingSubtitle"
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:layout_marginTop="@dimen/keyline_5"
+                android:text="@string/saveLoginDialogSubtitle"
+                android:textAlignment="center"
+                android:textColor="?autofillDialogOnboardingExplanationColor"
+                android:textSize="14sp"
+                app:layout_constraintEnd_toEndOf="@id/saveLoginButton"
+                app:layout_constraintStart_toStartOf="@id/saveLoginButton"
+                app:layout_constraintTop_toBottomOf="@id/dialogTitle" />
+
+            <com.duckduckgo.mobile.android.ui.view.button.DaxButtonPrimary
+                android:id="@+id/saveLoginButton"
+                android:layout_width="0dp"
+                app:buttonSize="large"
+                android:layout_height="wrap_content"
+                android:layout_marginTop="@dimen/keyline_5"
+                android:text="@string/saveLoginDialogButtonSave"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toBottomOf="@id/onboardingSubtitle" />
+
+            <com.duckduckgo.mobile.android.ui.view.button.DaxButtonGhost
+                android:id="@+id/cancelButton"
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                app:buttonSize="large"
+                android:text="@string/saveLoginDialogNotNow"
+                app:layout_constraintEnd_toEndOf="@id/saveLoginButton"
+                app:layout_constraintStart_toStartOf="@id/saveLoginButton"
+                app:layout_constraintTop_toBottomOf="@id/saveLoginButton" />
 
+        </androidx.constraintlayout.widget.ConstraintLayout>
     </androidx.constraintlayout.widget.ConstraintLayout>
 
 </androidx.core.widget.NestedScrollView>
diff --git a/autofill/autofill-impl/src/main/res/layout/content_autofill_select_credentials_tooltip.xml b/autofill/autofill-impl/src/main/res/layout/content_autofill_select_credentials_tooltip.xml
index b6979e2d7e1e..93e4beafa158 100644
--- a/autofill/autofill-impl/src/main/res/layout/content_autofill_select_credentials_tooltip.xml
+++ b/autofill/autofill-impl/src/main/res/layout/content_autofill_select_credentials_tooltip.xml
@@ -14,8 +14,7 @@
   ~ limitations under the License.
   -->
 
-<androidx.constraintlayout.widget.ConstraintLayout
-    xmlns:android="http://schemas.android.com/apk/res/android"
+<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
     style="@style/AutofillDialogRootViewStyle">
@@ -26,59 +25,76 @@
         app:layout_constraintEnd_toEndOf="parent"
         app:layout_constraintTop_toTopOf="parent" />
 
-    <LinearLayout
-        android:id="@+id/siteDetailsContainer"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:layout_marginTop="40dp"
-        android:gravity="center"
-        android:orientation="horizontal"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="parent">
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/guidelineStart"
+        style="@style/AutofillDialogContentGuidelineStart" />
 
-        <ImageView
-            android:id="@+id/favicon"
-            style="@style/AutofillDialogFaviconStyle"
-            android:importantForAccessibility="no"
-            tools:src="@drawable/ic_dax_icon" />
+    <androidx.constraintlayout.widget.Guideline
+        android:id="@+id/guidelineEnd"
+        style="@style/AutofillDialogContentGuidelineEnd" />
 
-        <com.duckduckgo.mobile.android.ui.view.text.DaxTextView
-            android:id="@+id/siteName"
-            android:layout_width="wrap_content"
+    <androidx.constraintlayout.widget.ConstraintLayout
+        android:id="@+id/autofillDialogContentContainer"
+        android:layout_width="0dp"
+        android:layout_height="wrap_content"
+        app:layout_constraintTop_toTopOf="parent"
+        app:layout_constraintWidth_max="@dimen/autofillBottomSheetContentMaxWidth"
+        app:layout_constraintBottom_toBottomOf="parent"
+        app:layout_constraintStart_toStartOf="@id/guidelineStart"
+        app:layout_constraintEnd_toEndOf="@id/guidelineEnd">
+
+        <LinearLayout
+            android:id="@+id/siteDetailsContainer"
+            android:layout_width="0dp"
             android:layout_height="wrap_content"
-            android:layout_marginEnd="@dimen/keyline_2"
-            app:typography="h5"
-            tools:text="duckduckgo.com" />
+            android:layout_marginTop="40dp"
+            android:gravity="center"
+            android:orientation="horizontal"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toTopOf="parent">
 
-    </LinearLayout>
+            <ImageView
+                android:id="@+id/favicon"
+                style="@style/AutofillDialogFaviconStyle"
+                android:importantForAccessibility="no"
+                tools:src="@drawable/ic_dax_icon" />
 
-    <com.duckduckgo.mobile.android.ui.view.text.DaxTextView
-        android:layout_width="0dp"
-        android:layout_height="wrap_content"
-        android:id="@+id/useLoginTitle"
-        android:text="@string/useSavedLoginDialogTitle"
-        android:layout_marginTop="@dimen/keyline_5"
-        android:gravity="center_horizontal"
-        app:layout_constraintBottom_toTopOf="@id/availableCredentialsRecycler"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toBottomOf="@id/siteDetailsContainer"
-        app:typography="h2" />
+            <com.duckduckgo.mobile.android.ui.view.text.DaxTextView
+                android:id="@+id/siteName"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_marginEnd="@dimen/keyline_2"
+                app:typography="h5"
+                tools:text="duckduckgo.com" />
 
-    <androidx.recyclerview.widget.RecyclerView
-        android:id="@+id/availableCredentialsRecycler"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:nestedScrollingEnabled="true"
-        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
-        app:layout_constrainedHeight="true"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent"
-        android:layout_marginEnd="@dimen/keyline_6"
-        android:layout_marginStart="@dimen/keyline_6"
-        app:layout_constraintTop_toBottomOf="@id/useLoginTitle"
-        tools:listitem="@layout/item_row_autofill_credentials_picker_secondary_button" />
+        </LinearLayout>
+
+        <com.duckduckgo.mobile.android.ui.view.text.DaxTextView
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            android:id="@+id/useLoginTitle"
+            android:text="@string/useSavedLoginDialogTitle"
+            android:layout_marginTop="@dimen/keyline_5"
+            android:gravity="center_horizontal"
+            app:layout_constraintBottom_toTopOf="@id/availableCredentialsRecycler"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@id/siteDetailsContainer"
+            app:typography="h2" />
+
+        <androidx.recyclerview.widget.RecyclerView
+            android:id="@+id/availableCredentialsRecycler"
+            android:layout_width="match_parent"
+            android:layout_height="wrap_content"
+            android:nestedScrollingEnabled="true"
+            app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
+            app:layout_constrainedHeight="true"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintEnd_toEndOf="parent"
+            app:layout_constraintStart_toStartOf="parent"
+            app:layout_constraintTop_toBottomOf="@id/useLoginTitle"
+            tools:listitem="@layout/item_row_autofill_credentials_picker_secondary_button" />
 
+    </androidx.constraintlayout.widget.ConstraintLayout>
 </androidx.constraintlayout.widget.ConstraintLayout>
\ No newline at end of file
diff --git a/autofill/autofill-impl/src/main/res/layout/content_autofill_update_existing_credentials.xml b/autofill/autofill-impl/src/main/res/layout/content_autofill_update_existing_credentials.xml
index b197fc23f5f8..fd416aec0507 100644
--- a/autofill/autofill-impl/src/main/res/layout/content_autofill_update_existing_credentials.xml
+++ b/autofill/autofill-impl/src/main/res/layout/content_autofill_update_existing_credentials.xml
@@ -28,82 +28,100 @@
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintTop_toTopOf="parent" />
 
-        <LinearLayout
-            android:id="@+id/siteDetailsContainer"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:layout_marginTop="40dp"
-            android:gravity="center"
-            android:orientation="horizontal"
-            app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toTopOf="parent">
+        <androidx.constraintlayout.widget.Guideline
+            android:id="@+id/guidelineStart"
+            style="@style/AutofillDialogContentGuidelineStart" />
 
-            <ImageView
-                android:id="@+id/favicon"
-                style="@style/AutofillDialogFaviconStyle"
-                tools:src="@drawable/ic_dax_icon" />
+        <androidx.constraintlayout.widget.Guideline
+            android:id="@+id/guidelineEnd"
+            style="@style/AutofillDialogContentGuidelineEnd" />
 
-            <com.duckduckgo.mobile.android.ui.view.text.DaxTextView
-                android:id="@+id/siteName"
-                android:layout_width="wrap_content"
+        <androidx.constraintlayout.widget.ConstraintLayout
+            android:id="@+id/autofillDialogContentContainer"
+            android:layout_width="0dp"
+            android:layout_height="wrap_content"
+            app:layout_constraintTop_toTopOf="parent"
+            app:layout_constraintWidth_max="@dimen/autofillBottomSheetContentMaxWidth"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintStart_toStartOf="@id/guidelineStart"
+            app:layout_constraintEnd_toEndOf="@id/guidelineEnd">
+
+            <LinearLayout
+                android:id="@+id/siteDetailsContainer"
+                android:layout_width="match_parent"
                 android:layout_height="wrap_content"
-                android:layout_marginEnd="@dimen/keyline_2"
-                app:typography="h5"
-                tools:text="duckduckgo.com" />
+                android:layout_marginTop="40dp"
+                android:gravity="center"
+                android:orientation="horizontal"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="parent">
 
-        </LinearLayout>
+                <ImageView
+                    android:id="@+id/favicon"
+                    style="@style/AutofillDialogFaviconStyle"
+                    tools:src="@drawable/ic_dax_icon" />
 
-        <com.duckduckgo.mobile.android.ui.view.text.DaxTextView
-            android:layout_width="0dp"
-            android:layout_height="wrap_content"
-            android:id="@+id/dialogTitle"
-            android:layout_marginTop="@dimen/keyline_5"
-            android:layout_marginStart="@dimen/keyline_4"
-            android:layout_marginEnd="@dimen/keyline_4"
-            tools:text="Update password for\nUSERNAME?"
-            android:gravity="center_horizontal"
-            app:layout_constraintBottom_toTopOf="@id/dialogSubtitle"
-            app:layout_constraintEnd_toEndOf="@id/updateCredentialsButton"
-            app:layout_constraintStart_toStartOf="@id/updateCredentialsButton"
-            app:layout_constraintTop_toBottomOf="@id/siteDetailsContainer"
-            app:typography="h2" />
+                <com.duckduckgo.mobile.android.ui.view.text.DaxTextView
+                    android:id="@+id/siteName"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_marginEnd="@dimen/keyline_2"
+                    app:typography="h5"
+                    tools:text="duckduckgo.com" />
 
-        <com.duckduckgo.mobile.android.ui.view.text.DaxTextView
-            android:id="@+id/dialogSubtitle"
-            android:layout_width="0dp"
-            android:layout_height="wrap_content"
-            android:layout_marginTop="24dp"
-            android:enabled="false"
-            android:gravity="center_horizontal"
-            app:layout_constraintWidth_percent="0.75"
-            app:typography="body2"
-            app:layout_constraintEnd_toEndOf="@id/updateCredentialsButton"
-            app:layout_constraintStart_toStartOf="@id/updateCredentialsButton"
-            app:layout_constraintTop_toBottomOf="@id/dialogTitle"
-            tools:text="@string/updateLoginUpdatePasswordExplanation" />
+            </LinearLayout>
 
-        <com.duckduckgo.mobile.android.ui.view.button.DaxButtonPrimary
-            android:id="@+id/updateCredentialsButton"
-            app:buttonSize="large"
-            android:layout_width="0dp"
-            android:layout_height="wrap_content"
-            android:layout_marginTop="@dimen/keyline_5"
-            android:text="@string/updateLoginDialogButtonUpdatePassword"
-            app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toBottomOf="@id/dialogSubtitle"
-            app:layout_constraintWidth_percent="0.8" />
+            <com.duckduckgo.mobile.android.ui.view.text.DaxTextView
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:id="@+id/dialogTitle"
+                android:layout_marginTop="@dimen/keyline_5"
+                android:layout_marginStart="@dimen/keyline_4"
+                android:layout_marginEnd="@dimen/keyline_4"
+                tools:text="Update password for\nUSERNAME?"
+                android:gravity="center_horizontal"
+                app:layout_constraintBottom_toTopOf="@id/dialogSubtitle"
+                app:layout_constraintEnd_toEndOf="@id/updateCredentialsButton"
+                app:layout_constraintStart_toStartOf="@id/updateCredentialsButton"
+                app:layout_constraintTop_toBottomOf="@id/siteDetailsContainer"
+                app:typography="h2" />
 
-        <com.duckduckgo.mobile.android.ui.view.button.DaxButtonGhost
-            android:id="@+id/cancelButton"
-            android:layout_width="0dp"
-            android:layout_height="wrap_content"
-            app:buttonSize="large"
-            android:text="@string/updateLoginDialogButtonNotNow"
-            app:layout_constraintEnd_toEndOf="@id/updateCredentialsButton"
-            app:layout_constraintStart_toStartOf="@id/updateCredentialsButton"
-            app:layout_constraintTop_toBottomOf="@id/updateCredentialsButton" />
+            <com.duckduckgo.mobile.android.ui.view.text.DaxTextView
+                android:id="@+id/dialogSubtitle"
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:layout_marginTop="24dp"
+                android:enabled="false"
+                android:gravity="center_horizontal"
+                app:layout_constraintWidth_percent="0.75"
+                app:typography="body2"
+                app:layout_constraintEnd_toEndOf="@id/updateCredentialsButton"
+                app:layout_constraintStart_toStartOf="@id/updateCredentialsButton"
+                app:layout_constraintTop_toBottomOf="@id/dialogTitle"
+                tools:text="@string/updateLoginUpdatePasswordExplanation" />
+
+            <com.duckduckgo.mobile.android.ui.view.button.DaxButtonPrimary
+                android:id="@+id/updateCredentialsButton"
+                app:buttonSize="large"
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:layout_marginTop="@dimen/keyline_5"
+                android:text="@string/updateLoginDialogButtonUpdatePassword"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toBottomOf="@id/dialogSubtitle" />
+
+            <com.duckduckgo.mobile.android.ui.view.button.DaxButtonGhost
+                android:id="@+id/cancelButton"
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                app:buttonSize="large"
+                android:text="@string/updateLoginDialogButtonNotNow"
+                app:layout_constraintEnd_toEndOf="@id/updateCredentialsButton"
+                app:layout_constraintStart_toStartOf="@id/updateCredentialsButton"
+                app:layout_constraintTop_toBottomOf="@id/updateCredentialsButton" />
 
+        </androidx.constraintlayout.widget.ConstraintLayout>
     </androidx.constraintlayout.widget.ConstraintLayout>
 </androidx.core.widget.NestedScrollView>
\ No newline at end of file
diff --git a/autofill/autofill-impl/src/main/res/layout/dialog_email_protection_choose_email.xml b/autofill/autofill-impl/src/main/res/layout/dialog_email_protection_choose_email.xml
index d0a2c2f7438d..9199cef495e9 100644
--- a/autofill/autofill-impl/src/main/res/layout/dialog_email_protection_choose_email.xml
+++ b/autofill/autofill-impl/src/main/res/layout/dialog_email_protection_choose_email.xml
@@ -30,52 +30,65 @@
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintTop_toTopOf="parent" />
 
-        <com.duckduckgo.mobile.android.ui.view.text.DaxTextView
+        <androidx.constraintlayout.widget.Guideline
+            android:id="@+id/guidelineStart"
+            style="@style/AutofillDialogContentGuidelineStart" />
+
+        <androidx.constraintlayout.widget.Guideline
+            android:id="@+id/guidelineEnd"
+            style="@style/AutofillDialogContentGuidelineEnd" />
+
+        <androidx.constraintlayout.widget.ConstraintLayout
+            android:id="@+id/autofillDialogContentContainer"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
-            android:id="@+id/dialogTitle"
-            android:layout_marginTop="40dp"
-            android:layout_marginStart="@dimen/keyline_4"
-            android:layout_marginEnd="@dimen/keyline_4"
-            android:text="@string/autofill_email_protection_choose_email_dialog_title"
-            android:gravity="center_horizontal"
-            app:layout_constraintBottom_toTopOf="@id/primaryCta"
-            app:layout_constraintEnd_toEndOf="@id/primaryCta"
-            app:layout_constraintStart_toStartOf="@id/primaryCta"
             app:layout_constraintTop_toTopOf="parent"
-            app:typography="h2" />
+            app:layout_constraintWidth_max="@dimen/autofillBottomSheetContentMaxWidth"
+            app:layout_constraintBottom_toBottomOf="parent"
+            app:layout_constraintStart_toStartOf="@id/guidelineStart"
+            app:layout_constraintEnd_toEndOf="@id/guidelineEnd">
 
-        <com.duckduckgo.mobile.android.ui.view.listitem.TwoLineListItem
-            android:id="@+id/primaryCta"
-            android:layout_width="0dp"
-            android:layout_height="wrap_content"
-            android:layout_marginTop="@dimen/keyline_5"
-            android:layout_marginStart="@dimen/keyline_5"
-            android:layout_marginEnd="@dimen/keyline_5"
-            app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintEnd_toEndOf="parent"
-            android:background="@drawable/autofill_rounded_container_listitem_background"
-            tools:primaryText="dax@duck.com"
-            app:layout_constraintWidth_percent="0.9"
-            app:layout_constraintTop_toBottomOf="@id/dialogTitle"
-            app:leadingIcon="@drawable/ic_dax_icon"
-            app:secondaryText="@string/autofillTooltipUseYourAliasDescription" />
+            <com.duckduckgo.mobile.android.ui.view.text.DaxTextView
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:id="@+id/dialogTitle"
+                android:layout_marginTop="40dp"
+                android:layout_marginStart="@dimen/keyline_4"
+                android:layout_marginEnd="@dimen/keyline_4"
+                android:text="@string/autofill_email_protection_choose_email_dialog_title"
+                android:gravity="center_horizontal"
+                app:layout_constraintBottom_toTopOf="@id/primaryCta"
+                app:layout_constraintEnd_toEndOf="@id/primaryCta"
+                app:layout_constraintStart_toStartOf="@id/primaryCta"
+                app:layout_constraintTop_toTopOf="parent"
+                app:typography="h2" />
 
-        <com.duckduckgo.mobile.android.ui.view.listitem.TwoLineListItem
-            android:id="@+id/secondaryCta"
-            android:layout_width="0dp"
-            android:layout_height="wrap_content"
-            android:background="@drawable/autofill_rounded_container_listitem_background"
-            android:layout_marginStart="@dimen/keyline_5"
-            android:layout_marginEnd="@dimen/keyline_5"
-            android:layout_marginTop="@dimen/keyline_2"
-            app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintWidth_percent="0.9"
-            app:leadingIcon="@drawable/ic_dax_icon"
-            app:layout_constraintTop_toBottomOf="@id/primaryCta"
-            app:primaryText="@string/autofillTooltipGenerateAddress"
-            app:secondaryText="@string/autofillTooltipGenerateAddressDescription" />
+            <com.duckduckgo.mobile.android.ui.view.listitem.TwoLineListItem
+                android:id="@+id/primaryCta"
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:layout_marginTop="@dimen/keyline_5"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintEnd_toEndOf="parent"
+                android:background="@drawable/autofill_rounded_container_listitem_background"
+                tools:primaryText="dax@duck.com"
+                app:layout_constraintTop_toBottomOf="@id/dialogTitle"
+                app:leadingIcon="@drawable/ic_dax_icon"
+                app:secondaryText="@string/autofillTooltipUseYourAliasDescription" />
+
+            <com.duckduckgo.mobile.android.ui.view.listitem.TwoLineListItem
+                android:id="@+id/secondaryCta"
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:background="@drawable/autofill_rounded_container_listitem_background"
+                android:layout_marginTop="@dimen/keyline_2"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:leadingIcon="@drawable/ic_dax_icon"
+                app:layout_constraintTop_toBottomOf="@id/primaryCta"
+                app:primaryText="@string/autofillTooltipGenerateAddress"
+                app:secondaryText="@string/autofillTooltipGenerateAddressDescription" />
 
+        </androidx.constraintlayout.widget.ConstraintLayout>
     </androidx.constraintlayout.widget.ConstraintLayout>
 </androidx.core.widget.NestedScrollView>
diff --git a/autofill/autofill-impl/src/main/res/layout/dialog_email_protection_in_context_sign_up.xml b/autofill/autofill-impl/src/main/res/layout/dialog_email_protection_in_context_sign_up.xml
index f9e1fb1d9cf1..fe23a14692fd 100644
--- a/autofill/autofill-impl/src/main/res/layout/dialog_email_protection_in_context_sign_up.xml
+++ b/autofill/autofill-impl/src/main/res/layout/dialog_email_protection_in_context_sign_up.xml
@@ -16,110 +16,110 @@
 
 <androidx.core.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
-    xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent">
 
     <androidx.constraintlayout.widget.ConstraintLayout style="@style/AutofillDialogRootViewStyle">
 
-        <androidx.constraintlayout.widget.Guideline
-            android:id="@+id/guidelineStart"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:orientation="vertical"
-            app:layout_constraintGuide_percent=".15" />
-
-        <androidx.constraintlayout.widget.Guideline
-            android:id="@+id/guidelineEnd"
-            android:layout_width="wrap_content"
-            android:layout_height="wrap_content"
-            android:orientation="vertical"
-            app:layout_constraintGuide_percent=".85" />
-
         <ImageView
             android:id="@+id/closeButton"
             style="@style/AutofillDialogCloseButton"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintTop_toTopOf="parent" />
 
-        <LinearLayout
-            android:id="@+id/siteDetailsContainer"
+        <androidx.constraintlayout.widget.Guideline
+            android:id="@+id/guidelineStart"
+            style="@style/AutofillDialogContentGuidelineStart" />
+
+        <androidx.constraintlayout.widget.Guideline
+            android:id="@+id/guidelineEnd"
+            style="@style/AutofillDialogContentGuidelineEnd" />
+
+        <androidx.constraintlayout.widget.ConstraintLayout
+            android:id="@+id/autofillDialogContentContainer"
             android:layout_width="0dp"
             android:layout_height="wrap_content"
-            android:layout_marginTop="40dp"
-            android:gravity="center"
-            android:orientation="horizontal"
-            app:layout_constraintEnd_toEndOf="@id/guidelineEnd"
+            app:layout_constraintTop_toTopOf="parent"
+            app:layout_constraintWidth_max="@dimen/autofillBottomSheetContentMaxWidth"
+            app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintStart_toStartOf="@id/guidelineStart"
-            app:layout_constraintTop_toTopOf="parent">
+            app:layout_constraintEnd_toEndOf="@id/guidelineEnd">
 
-            <ImageView
-                android:id="@+id/favicon"
-                style="@style/AutofillDialogFaviconStyle"
-                android:importantForAccessibility="no"
-                app:srcCompat="@drawable/ic_dax_icon" />
+            <LinearLayout
+                android:id="@+id/siteDetailsContainer"
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:layout_marginTop="40dp"
+                android:gravity="center"
+                android:orientation="horizontal"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toTopOf="parent">
+
+                <ImageView
+                    android:id="@+id/favicon"
+                    style="@style/AutofillDialogFaviconStyle"
+                    android:importantForAccessibility="no"
+                    app:srcCompat="@drawable/ic_dax_icon" />
+
+                <com.duckduckgo.mobile.android.ui.view.text.DaxTextView
+                    android:id="@+id/emailProtectionTitle"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    android:layout_marginEnd="@dimen/keyline_2"
+                    app:typography="h5"
+                    android:text="@string/autofillEmailProtectionInContextSignUpDialogFeatureName" />
+
+            </LinearLayout>
 
             <com.duckduckgo.mobile.android.ui.view.text.DaxTextView
-                android:id="@+id/emailProtectionTitle"
-                android:layout_width="wrap_content"
+                android:layout_width="0dp"
                 android:layout_height="wrap_content"
-                android:layout_marginEnd="@dimen/keyline_2"
-                app:typography="h5"
-                android:text="@string/autofillEmailProtectionInContextSignUpDialogFeatureName" />
-
-        </LinearLayout>
+                android:id="@+id/dialogTitle"
+                android:breakStrategy="balanced"
+                android:text="@string/autofillEmailProtectionInContextSignUpDialogTitle"
+                android:layout_marginTop="@dimen/keyline_5"
+                android:gravity="center_horizontal"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toBottomOf="@id/siteDetailsContainer"
+                app:typography="h2" />
 
-        <com.duckduckgo.mobile.android.ui.view.text.DaxTextView
-            android:layout_width="0dp"
-            android:layout_height="wrap_content"
-            android:id="@+id/dialogTitle"
-            android:breakStrategy="balanced"
-            android:text="@string/autofillEmailProtectionInContextSignUpDialogTitle"
-            android:layout_marginTop="@dimen/keyline_5"
-            android:gravity="center_horizontal"
-            app:layout_constraintEnd_toEndOf="@id/guidelineEnd"
-            app:layout_constraintStart_toStartOf="@id/guidelineStart"
-            app:layout_constraintTop_toBottomOf="@id/siteDetailsContainer"
-            app:typography="h2" />
-
-
-        <com.duckduckgo.mobile.android.ui.view.text.DaxTextView
-            android:id="@+id/onboardingSubtitle"
-            android:layout_width="0dp"
-            android:layout_height="wrap_content"
-            android:layout_marginTop="@dimen/keyline_5"
-            android:text="@string/autofillEmailProtectionInContextSignUpDialogExplanation"
-            android:textAlignment="center"
-            app:typography="body2"
-            app:layout_constraintEnd_toEndOf="@id/protectMyEmailButton"
-            app:layout_constraintStart_toStartOf="@id/protectMyEmailButton"
-            app:layout_constraintTop_toBottomOf="@id/dialogTitle" />
-
-        <com.duckduckgo.mobile.android.ui.view.button.DaxButtonPrimary
-            android:id="@+id/protectMyEmailButton"
-            android:layout_width="0dp"
-            app:buttonSize="large"
-            android:layout_height="wrap_content"
-            android:layout_marginTop="@dimen/keyline_5"
-            android:layout_marginStart="40dp"
-            android:layout_marginEnd="40dp"
-            android:text="@string/autofillEmailProtectionInContextSignUpDialogProtectEmailButtonText"
-            app:layout_constraintEnd_toEndOf="parent"
-            app:layout_constraintStart_toStartOf="parent"
-            app:layout_constraintTop_toBottomOf="@id/onboardingSubtitle"
-            app:layout_constraintWidth_max="300dp"
-            app:layout_constraintWidth_percent="0.8" />
 
-        <com.duckduckgo.mobile.android.ui.view.button.DaxButtonSecondary
-            android:id="@+id/doNotShowAgainButton"
-            android:layout_width="0dp"
-            android:layout_height="wrap_content"
-            app:buttonSize="large"
-            android:text="@string/autofillEmailProtectionInContextSignUpDialogDoNotShowAgainButtonText"
-            app:layout_constraintEnd_toEndOf="@id/protectMyEmailButton"
-            app:layout_constraintStart_toStartOf="@id/protectMyEmailButton"
-            app:layout_constraintTop_toBottomOf="@id/protectMyEmailButton" />
+            <com.duckduckgo.mobile.android.ui.view.text.DaxTextView
+                android:id="@+id/onboardingSubtitle"
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                android:layout_marginTop="@dimen/keyline_5"
+                android:text="@string/autofillEmailProtectionInContextSignUpDialogExplanation"
+                android:textAlignment="center"
+                app:typography="body2"
+                app:layout_constraintEnd_toEndOf="@id/protectMyEmailButton"
+                app:layout_constraintStart_toStartOf="@id/protectMyEmailButton"
+                app:layout_constraintTop_toBottomOf="@id/dialogTitle" />
+
+            <com.duckduckgo.mobile.android.ui.view.button.DaxButtonPrimary
+                android:id="@+id/protectMyEmailButton"
+                android:layout_width="0dp"
+                app:buttonSize="large"
+                android:layout_height="wrap_content"
+                android:layout_marginTop="@dimen/keyline_5"
+                android:text="@string/autofillEmailProtectionInContextSignUpDialogProtectEmailButtonText"
+                app:layout_constraintEnd_toEndOf="parent"
+                app:layout_constraintStart_toStartOf="parent"
+                app:layout_constraintTop_toBottomOf="@id/onboardingSubtitle" />
+
+            <com.duckduckgo.mobile.android.ui.view.button.DaxButtonSecondary
+                android:id="@+id/doNotShowAgainButton"
+                android:layout_width="0dp"
+                android:layout_height="wrap_content"
+                app:buttonSize="large"
+                android:text="@string/autofillEmailProtectionInContextSignUpDialogDoNotShowAgainButtonText"
+                app:layout_constraintEnd_toEndOf="@id/protectMyEmailButton"
+                app:layout_constraintStart_toStartOf="@id/protectMyEmailButton"
+                app:layout_constraintTop_toBottomOf="@id/protectMyEmailButton" />
 
+        </androidx.constraintlayout.widget.ConstraintLayout>
     </androidx.constraintlayout.widget.ConstraintLayout>
 
 </androidx.core.widget.NestedScrollView>
diff --git a/autofill/autofill-impl/src/main/res/values/autofill-impl-dimensions.xml b/autofill/autofill-impl/src/main/res/values/autofill-impl-dimensions.xml
index a7a3c1359e3d..8d1305db35b8 100644
--- a/autofill/autofill-impl/src/main/res/values/autofill-impl-dimensions.xml
+++ b/autofill/autofill-impl/src/main/res/values/autofill-impl-dimensions.xml
@@ -17,4 +17,5 @@
 <resources>
     <dimen name="credentialManagementListItemPopupMenuWidth">200dp</dimen>
     <dimen name="autofillBottomSheetBottomPadding">30dp</dimen>
+    <dimen name="autofillBottomSheetContentMaxWidth">480dp</dimen>
 </resources>
\ No newline at end of file
diff --git a/autofill/autofill-impl/src/main/res/values/styles.xml b/autofill/autofill-impl/src/main/res/values/styles.xml
index 4d35b6b4037c..3921ffce2e96 100644
--- a/autofill/autofill-impl/src/main/res/values/styles.xml
+++ b/autofill/autofill-impl/src/main/res/values/styles.xml
@@ -52,4 +52,18 @@
         <item name="android:src">@drawable/ic_close_24</item>
     </style>
 
+    <style name="AutofillDialogContentGuidelineStart">
+        <item name="android:layout_width">wrap_content</item>
+        <item name="android:layout_height">wrap_content</item>
+        <item name="android:orientation">vertical</item>
+        <item name="layout_constraintGuide_percent">0.1</item>
+    </style>
+
+    <style name="AutofillDialogContentGuidelineEnd">
+        <item name="android:layout_width">wrap_content</item>
+        <item name="android:layout_height">wrap_content</item>
+        <item name="android:orientation">vertical</item>
+        <item name="layout_constraintGuide_percent">0.9</item>
+    </style>
+
 </resources>
\ No newline at end of file