LG-365 Make CTA full width on mobile for certain screens

app/assets/stylesheets/components/_intl-tel-input.scss

@@ -2,6 +2,10 @@
   display: none;
 }
 
+.intl-tel-input {
+  width: 100%;
+}
+
 .no-js {
   .js-intl-tel-code-select {
     display: block;

app/views/devise/sessions/new.html.slim

@@ -11,7 +11,8 @@ h1.h3.my0 = decorated_session.new_session_heading
   = f.input :email, label: t('account.index.email'), required: true, input_html: { class: 'mb4' }
   = f.input :password, label: t('account.index.password'), required: true
   = f.input :request_id, as: :hidden, input_html: { value: request_id }
-  = f.button :submit, t('links.next'), class: 'btn-wide'
+  div
+    = f.button :submit, t('links.next'), class: 'sm-col-6 col-12 btn-wide mb3'
 
 p.my3
   = link_to t('notices.terms_of_service.link'), MarketingSite.privacy_url, target: '_blank'

app/views/idv/jurisdiction/new.html.slim

@@ -20,6 +20,7 @@ p.mt4.mb0 id='jurisdiction-label' = t('idv.messages.jurisdiction.where')
   p = link_to t('idv.messages.jurisdiction.no_id'), idv_jurisdiction_fail_path(:no_id)
 
   .mt4
-    button type='submit' class='btn btn-primary btn-wide' = t('forms.buttons.continue')
+    button type='submit' class='btn btn-primary btn-wide sm-col-6 col-12'
+      = t('forms.buttons.continue')
 
 = render 'shared/cancel', link: idv_cancel_path

app/views/idv/phone/new.html.slim

@@ -18,7 +18,7 @@ ul.py1.m0
   - if FeatureManagement.enable_usps_verification?
       = render 'verification_options'
 
-  = f.button :submit, t('forms.buttons.continue'), class: 'btn-wide mt6'
+  = f.button :submit, t('forms.buttons.continue'), class: 'btn-wide mt6 sm-col-6 col-12'
 
 = render 'shared/cancel', link: idv_cancel_path
 

app/views/idv/sessions/new.html.slim

@@ -72,6 +72,7 @@ p = link_to t('links.access_help'),
           input_html: { class: 'zipcode', value: @view_model.idv_form.zipcode }
 
   .mt3
-    button type='submit' class='btn btn-primary btn-wide' = t('forms.buttons.continue')
+    button type='submit' class='btn btn-primary btn-wide sm-col-6 col-12'
+      = t('forms.buttons.continue')
 = render 'shared/cancel', link: idv_cancel_path
 = render @view_model.modal_partial, view_model: @view_model

app/views/idv/sessions/success.html.slim

@@ -10,6 +10,7 @@ h1.h3.mb2.mt3.my0 = t('idv.titles.session.success')
 
 h2.h3.mb6.my0 = t('idv.messages.sessions.success')
 
-= link_to t('forms.buttons.continue'), idv_phone_path, class: 'btn btn-primary btn-wide'
+= link_to t('forms.buttons.continue'), idv_phone_path,
+  class: 'btn btn-primary btn-wide sm-col-6 col-12'
 
 = render 'shared/cancel', link: idv_cancel_path

app/views/shared/_personal_key.html.slim

@@ -19,9 +19,10 @@ p.mt-tiny.mb0
 = accordion('personal-key-info', t('users.personal_key.help_text_header')) do
   = simple_format(t('users.personal_key.help_text'))
 
-= button_to t('forms.buttons.continue'), update_path,
-          class: 'btn btn-primary btn-wide mb1 personal-key-continue',
-          'data-toggle': 'modal'
+div
+  = button_to t('forms.buttons.continue'), update_path,
+            class: 'btn btn-primary btn-wide mb1 personal-key-continue sm-col-6 col-12 mb3',
+            'data-toggle': 'modal'
 
 = render 'shared/personal_key_confirmation_modal', code: code, update_path: update_path
 

app/views/shared/_user_verify_password.html.slim

@@ -3,4 +3,4 @@ p = t('idv.messages.sessions.review_message')
 = simple_form_for(current_user, url: update_path,
     html: { autocomplete: 'off', method: :put, role: 'form' }) do |f|
   = f.input :password, label: t('idv.form.password'), required: true
-  = f.button :submit, t('forms.buttons.continue'), class: 'btn btn-primary btn-wide'
+  = f.button :submit, t('forms.buttons.continue'), class: 'btn btn-primary btn-wide sm-col-6 col-12'

app/views/sign_up/passwords/new.html.slim

@@ -12,7 +12,8 @@ p.mt2.mb0#password-description
   = render 'devise/shared/password_strength'
   = hidden_field_tag :confirmation_token, @confirmation_token, id: 'confirmation_token'
   = f.input :request_id, as: :hidden, input_html: { value: params[:request_id] || request_id }
-  = f.button :submit, t('forms.buttons.continue'), class: 'btn-wide mb3'
+  div
+    = f.button :submit, t('forms.buttons.continue'), class: 'sm-col-6 col-12 btn-wide mb3'
 
 = render 'shared/password_accordion'
 

app/views/two_factor_authentication/otp_verification/show.html.slim

@@ -14,7 +14,7 @@ p == @presenter.phone_number_message
       autofocus: true, pattern: '[0-9]*', class: 'col-12 field monospace mfa',
       'aria-describedby': 'code-instructs', maxlength: Devise.direct_otp_length,
       autocomplete: 'off', type: 'tel')
-  = submit_tag t('forms.buttons.submit.default'), class: 'btn btn-primary align-top'
+  = submit_tag t('forms.buttons.submit.default'), class: 'btn btn-primary align-top sm-col-6 col-12'
   - if @presenter.remember_device_available?
     .border.col-9.rounded-lg.mt2
       = check_box_tag 'remember_device', true, false, class: 'my2 ml2 mr1'

app/views/users/phone_setup/index.html.slim

@@ -19,7 +19,8 @@ p.mt-tiny.mb0 = @presenter.info
       strong.left = @presenter.label
     = f.input :phone, as: :tel, label: false, required: true,
         input_html: { class: 'phone col-8 mb4' }
-  = f.button :submit, t('forms.buttons.send_security_code')
+  div
+    = f.button :submit, t('forms.buttons.send_security_code'), class: 'sm-col-6 col-12 btn-wide mb3'
 .mt2.pt1.border-top
   - path = current_user.piv_cac_enabled? ? account_recovery_setup_path : two_factor_options_path
   = link_to t('devise.two_factor_authentication.two_factor_choice_cancel'), path

app/views/users/two_factor_authentication_setup/index.html.slim

@@ -20,6 +20,7 @@ p.mt-tiny.mb3 = @presenter.info
             span.blue.bold.fs-20p = option.label
             .regular.gray-dark.fs-10p.mb-tiny = option.info
 
-  = f.button :submit, t('forms.buttons.continue')
+  div
+    = f.button :submit, t('forms.buttons.continue'), class: 'sm-col-6 col-12 btn-wide mb3'
 
 = render 'shared/cancel', link: destroy_user_session_path