Fix buttons widths from BassCSS to USWDS migration

app/assets/stylesheets/components/_btn.scss

@@ -35,6 +35,13 @@
   }
 }
 
+.usa-button:not([class*='margin-']) {
+  // Temporary: To be backported to design system. Margins should be applied at the button element,
+  // or at the very least (a) we don't want the margins to offset full-width buttons on mobile, and
+  // (b) the default margin would not be large enough on its own.
+  margin-right: 0;
+}
+
 .usa-button.usa-button--unstyled:visited {
   // Temporary: Links in the IdP do not currently conform to the design system and instead retain
   // their color even if visited. Part of the work of LG-3877 should be to remove these styles, and
@@ -53,6 +60,11 @@
 }
 
 .usa-button--unstyled {
+  // Temporary: To be backported to design system. Unstyled buttons should inherit the appearance
+  // of a link.
+  display: inline;
+  width: auto;
+
   &:hover,
   &:active {
     // Temporary: These styles should be ported upstream to the design system, optionally as part of

app/assets/stylesheets/components/_spinner-button.scss

@@ -19,7 +19,9 @@
 }
 
 .spinner-button {
-  display: inline-block;
+  @include at-media('mobile-lg') {
+    display: inline-block;
+  }
 }
 
 .spinner-button--spinner-active {

app/javascript/packages/document-capture/components/acuant-capture.jsx

@@ -396,6 +396,7 @@ function AcuantCapture(
       <div className="margin-top-2">
         {isMobile && (
           <Button
+            isFlexibleWidth
             isOutline={!value}
             isUnstyled={!!value}
             onClick={startCaptureOrTriggerUpload}
@@ -414,9 +415,11 @@ function AcuantCapture(
           formatHTML(t('doc_auth.buttons.take_or_upload_picture'), {
             'lg-take-photo': () => null,
             'lg-upload': ({ children }) => (
-              <Button isUnstyled onClick={forceUpload} className="margin-left-1">
-                {children}
-              </Button>
+              <span className="padding-left-1">
+                <Button isUnstyled onClick={forceUpload}>
+                  {children}
+                </Button>
+              </span>
             ),
           })}
       </div>

app/javascript/packages/document-capture/components/button.jsx

@@ -9,6 +9,8 @@
  * @prop {(ReactMouseEvent)=>void=} onClick Click handler.
  * @prop {ReactNode=} children Element children.
  * @prop {boolean=} isBig Whether button should be styled as big button.
+ * @prop {boolean=} isFlexibleWidth Whether button should be styled as flexible width, such that it
+ * shrinks to its minimum width instead of occupying full-width on mobile viewports.
  * @prop {boolean=} isWide Whether button should be styled as primary button.
  * @prop {boolean=} isOutline Whether button should be styled as secondary button.
  * @prop {boolean=} isDisabled Whether button is disabled.
@@ -25,6 +27,7 @@ function Button({
   onClick,
   children,
   isBig,
+  isFlexibleWidth,
   isWide,
   isOutline,
   isDisabled,
@@ -35,6 +38,7 @@ function Button({
   const classes = [
     'usa-button',
     isBig && 'usa-button--big',
+    isFlexibleWidth && 'usa-button--flexible-width',
     isWide && 'usa-button--wide',
     isOutline && 'usa-button--outline',
     isUnstyled && 'usa-button--unstyled',

app/views/account_reset/pending/cancel.html.erb

@@ -3,5 +3,5 @@
 <%= link_to(
   t('links.continue_sign_in'),
   user_two_factor_authentication_path,
-  class: 'usa-button usa-button--big',
+  class: 'usa-button usa-button--wide usa-button--big',
 ) %>

app/views/account_reset/pending/confirm.html.erb

@@ -3,12 +3,7 @@
 <%= button_to(
     t('forms.buttons.continue'),
     account_reset_pending_cancel_path,
-    class: 'usa-button usa-button--big margin-right-6',
-    form_class: 'display-inline',
+    class: 'usa-button usa-button--wide usa-button--big margin-bottom-2',
 ) %>
 
-<%= link_to(
-  t('links.go_back'),
-  account_reset_pending_path,
-  class: '',
-) %>
+<%= link_to(t('links.go_back'), account_reset_pending_path) %>

app/views/account_reset/pending/show.html.erb

@@ -10,5 +10,5 @@
 <%= link_to(
     t('account_reset.pending.cancel_request'),
     account_reset_pending_confirm_path,
-    class: 'usa-button usa-button--big',
+    class: 'usa-button usa-button--wide usa-button--big',
 ) %>

app/views/account_reset/request/show.html.erb

@@ -23,7 +23,7 @@
       t('users.personal_key.print'),
       '#',
       data: { print: true },
-      class: 'usa-button usa-button--outline margin-left-2 display-inline-block ico ico-print',
+      class: 'usa-button usa-button--outline margin-top-2 ico ico-print',
     ) %>
   </div>
   <hr/>

app/views/accounts/_webauthn.html.erb

@@ -22,9 +22,7 @@
           <div class="grid-col-4 mobile-lg:grid-col-6 right-align">
             <%= link_to(
               t('account.index.webauthn_delete'),
-              webauthn_setup_delete_path(id: cfg.id),
-              method: :get,
-              class: 'usa-button usa-button--unstyled'
+              webauthn_setup_delete_path(id: cfg.id)
             ) %>
           </div>
         <% end %>

app/views/accounts/actions/_manage_personal_key.html.erb

@@ -1,8 +1,8 @@
 <%= button_to(
   create_new_personal_key_url,
   method: :post,
-  class: 'usa-button usa-button--unstyled margin-left-1',
-  form_class: 'inline-block',
+  class: 'usa-button usa-button--unstyled',
+  form_class: 'inline-block padding-left-1',
 ) do %>
   <span class='usa-sr-only'>
     <%= t('account.items.personal_key') %>

app/views/devise/passwords/new.html.erb

@@ -20,7 +20,7 @@
                             aria: { invalid: false, describedby: 'email-description' } } %>
   <%= f.input :request_id, as: :hidden, input_html: { value: request_id } %>
   <%= render 'shared/recaptcha' %>
-  <%= f.button :submit, t('forms.buttons.continue'), class: 'usa-button--big margin-top-2' %>
+  <%= f.button :submit, t('forms.buttons.continue'), class: 'usa-button--big usa-button--wide margin-top-2' %>
 <% end %>
 
 <div class="margin-top-2 padding-top-1 border-top">

app/views/event_disavowal/new.html.erb

@@ -14,7 +14,7 @@
     <%= f.input :password, label: t('forms.passwords.edit.labels.password'), required: true,
                 input_html: { aria: { invalid: false }, class: 'password-toggle' } %>
     <%= render 'devise/shared/password_strength', forbidden_passwords: @forbidden_passwords %>
-    <%= f.button :submit, t('forms.passwords.edit.buttons.submit'), class: 'usa-button--big margin-bottom-4' %>
+    <%= f.button :submit, t('forms.passwords.edit.buttons.submit'), class: 'usa-button--big usa-button--wide margin-bottom-4' %>
 <% end %>
 
 <%= render 'shared/password_accordion' %>

app/views/idv/review/new.html.erb

@@ -17,8 +17,7 @@
               input_html: { aria: { invalid: false }, class: 'password-toggle' } %>
   <div class="right-align margin-top-neg-2 margin-bottom-6">
     <%= t('idv.forgot_password.link_html',
-          link: link_to(t('idv.forgot_password.link_text'), idv_forgot_password_url,
-                        class: 'usa-button usa-button--unstyled margin-left-1', form_class: 'inline-block')) %>
+          link: link_to(t('idv.forgot_password.link_text'), idv_forgot_password_url, class: 'margin-left-1')) %>
 
   </div>
   <%= accordion('review-verified-info', t('idv.messages.review.intro')) do %>

app/views/saml_idp/shared/saml_post_binding.html.erb

@@ -24,7 +24,7 @@
           <% if params.key?(:RelayState) %>
             <%= hidden_field_tag('RelayState', params[:RelayState]) %>
           <% end %>
-          <%= submit_tag t('forms.buttons.submit.default'), class: 'usa-button usa-button--big' %>
+          <%= submit_tag t('forms.buttons.submit.default'), class: 'usa-button usa-button--wide usa-button--big' %>
         <% end %>
       </div>
     </div>

app/views/sign_up/email_resend/new.html.erb

@@ -8,5 +8,5 @@
                        html: { autocomplete: 'off', method: :post, role: 'form' }) do |f| %>
   <%= f.input :email, required: true, input_html: { aria: { invalid: false } } %>
   <%= f.input :request_id, as: :hidden %>
-  <%= f.button :submit, t('forms.buttons.resend_confirmation'), class: 'usa-button--big margin-top-2 margin-bottom-1' %>
+  <%= f.button :submit, t('forms.buttons.resend_confirmation'), class: 'usa-button--big usa-button--wide margin-top-2 margin-bottom-1' %>
 <% end %>

app/views/two_factor_authentication/backup_code_verification/show.html.erb

@@ -11,7 +11,7 @@
 <%= validated_form_for(@backup_code_form, url: login_two_factor_backup_code_path,
                        html: { autocomplete: 'off', method: :post, role: 'form' }) do |f| %>
   <%= render 'partials/backup_code/entry_fields', f: f, attribute_name: :backup_code %>
-  <%= f.button :submit, t('forms.buttons.submit.default'), class: 'usa-button--big' %>
+  <%= f.button :submit, t('forms.buttons.submit.default'), class: 'usa-button--big usa-button--wide' %>
 <% end %>
 
 <%= render 'shared/fallback_links', presenter: @presenter %>

app/views/two_factor_authentication/options/index.html.erb

@@ -39,7 +39,7 @@
     </fieldset>
   </div>
 
-  <%= f.button :submit, t('forms.buttons.continue'), class: 'usa-button--big' %>
+  <%= f.button :submit, t('forms.buttons.continue'), class: 'usa-button--big usa-button--wide' %>
 <% end %>
 
 <br/>

app/views/two_factor_authentication/personal_key_verification/show.html.erb

@@ -11,7 +11,7 @@
 <%= validated_form_for(@personal_key_form, url: login_two_factor_personal_key_path,
                        html: { autocomplete: 'off', method: :post, role: 'form' }) do |f| %>
   <%= render 'partials/personal_key/entry_fields', f: f, attribute_name: :personal_key %>
-  <%= f.button :submit, t('forms.buttons.submit.default'), class: 'usa-button--big' %>
+  <%= f.button :submit, t('forms.buttons.submit.default'), class: 'usa-button--big usa-button--wide' %>
 <% end %>
 
 <%= render 'shared/fallback_links', presenter: @presenter %>

app/views/two_factor_authentication/piv_cac_verification/show.html.erb

@@ -11,7 +11,7 @@
 <%= render 'shared/spinner-button' do %>
   <%= link_to @presenter.piv_cac_capture_text,
               @presenter.piv_cac_service_link,
-              class: 'usa-button usa-button--big' %>
+              class: 'usa-button usa-button--big usa-button--wide' %>
 <% end %>
 <%= render 'shared/fallback_links', presenter: @presenter %>
 <%= render 'shared/cancel', link: @presenter.cancel_link %>

app/views/two_factor_authentication/totp_verification/show.html.erb

@@ -27,7 +27,7 @@
                   t('forms.messages.remember_device'),
                   class: 'blue margin-right-2' %>
   </div>
-  <%= submit_tag 'Submit', class: 'usa-button usa-button--big' %>
+  <%= submit_tag 'Submit', class: 'usa-button usa-button--wide usa-button--big' %>
 <% end %>
 
 <%= render 'shared/fallback_links', presenter: @presenter %>

app/views/users/backup_code_setup/create.html.erb

@@ -44,19 +44,15 @@
     <% end %>
     <%= link_to t('forms.backup_code.print'), '#',
                 data: { print: true },
-                class: 'usa-button usa-button--outline margin-left-2 ico ico-print' -%>
+                class: 'usa-button usa-button--outline margin-top-2 mobile-lg:margin-top-0 mobile-lg:margin-left-2 ico ico-print' -%>
     <%= link_to t('links.copy'), '#',
-                class: 'usa-button usa-button--outline margin-left-2 clipboard ico ico-copy',
+                class: 'usa-button usa-button--outline margin-top-2 mobile-lg:margin-top-0 mobile-lg:margin-left-2 clipboard ico ico-copy',
                 data: { "clipboard-text": @codes.join(' ') } -%>
   </div>
 </div>
 
 <%= form_tag(backup_code_continue_path, method: :patch, role: 'form') do %>
-  <div class="clearfix margin-x-neg-1">
-    <div class="col col-6 sm-col-5 padding-x-1">
-      <%= button_tag t('forms.buttons.continue'), type: 'submit', class: 'usa-button usa-button--big usa-button--wide' %>
-    </div>
-  </div>
+  <%= button_tag t('forms.buttons.continue'), type: 'submit', class: 'usa-button usa-button--big usa-button--wide' %>
 <% end %>
 
 <%= javascript_packs_tag_once 'clipboard' %>

app/views/users/emails/verify.html.erb

@@ -23,7 +23,7 @@
 </div>
 
 <%= t('notices.signed_up_and_confirmed.no_email_sent_explanation_start') %>
-<%= button_to(t('links.resend'), add_email_resend_path, method: :post, class: 'usa-button usa-button--unstyled margin-left-1', form_class: 'inline-block') %>
+<%= button_to(t('links.resend'), add_email_resend_path, method: :post, class: 'usa-button usa-button--unstyled', form_class: 'inline-block padding-left-1') %>
 
 <p><% link = link_to(t('notices.use_diff_email.link'), add_email_path) %></p>
 

app/views/users/forget_all_browsers/show.html.erb

@@ -8,7 +8,7 @@
   <%= t('account.forget_all_browsers.longer_description') %>
 </p>
 
-<%= button_to(t('forms.buttons.confirm'), forget_all_browsers_path, method: 'delete', class: 'usa-button usa-button--big margin-top-4') %>
+<%= button_to(t('forms.buttons.confirm'), forget_all_browsers_path, method: 'delete', class: 'usa-button usa-button--wide usa-button--big margin-top-4') %>
 
 <div class="margin-top-4 border-top">
   <div class="margin-top-1">

app/views/users/passwords/edit.html.erb

@@ -14,7 +14,7 @@
   <%= f.input :password, label: t('forms.passwords.edit.labels.password'), required: true,
               input_html: { aria: { invalid: false, describedby: 'password-description' }, class: 'password-toggle' } %>
   <%= render 'devise/shared/password_strength', forbidden_passwords: @forbidden_passwords %>
-  <%= f.button :submit, t('forms.buttons.submit.update'), class: 'usa-button--big margin-top-2 margin-bottom-4' %>
+  <%= f.button :submit, t('forms.buttons.submit.update'), class: 'usa-button--big usa-button--wide margin-top-2 margin-bottom-4' %>
 <% end %>
 
 <%= render 'shared/password_accordion' %>

app/views/users/piv_cac_authentication_setup/new.html.erb

@@ -44,7 +44,7 @@
       <div class="margin-bottom-4">
         <%= t('instructions.mfa.piv_cac.step_3_info_html') %>
       </div>
-      <input type="submit" name="commit" value="<%= t('forms.piv_cac_setup.submit') %>" class="usa-button usa-button--big" data-disable-with="Add PIV/CAC card" />
+      <input type="submit" name="commit" value="<%= t('forms.piv_cac_setup.submit') %>" class="usa-button usa-button--wide usa-button--big" data-disable-with="Add PIV/CAC card" />
     </div>
   </li>
 </ul>

app/views/users/piv_cac_login/new.html.erb

@@ -11,7 +11,7 @@
 <%= render 'shared/spinner-button' do %>
   <%= link_to @presenter.piv_cac_capture_text,
               @presenter.piv_cac_service_link,
-              class: 'usa-button usa-button--big' %>
+              class: 'usa-button usa-button--wide usa-button--big' %>
 <% end %>
 
 <%= render 'shared/cancel', link: new_user_session_url %>

app/views/users/piv_cac_setup_from_sign_in/prompt.html.erb

@@ -20,12 +20,13 @@
                          class: 'block col-12 field monospace', size: 16, maxlength: 20,
                          'aria-labelledby': 'totp-label' %>
        <div class="margin-top-2">
-        <%= submit_tag t('forms.piv_cac_setup.submit'), class: 'usa-button usa-button--big margin-right-1' %>
-        <div class="inline-block">
-          <%= link_to t('forms.piv_cac_setup.no_thanks'), new_user_session_url,
-                      class: 'usa-button usa-button--big usa-button--outline' %>
-        </div>
-       </div>
+        <%= submit_tag t('forms.piv_cac_setup.submit'), class: 'usa-button usa-button--wide usa-button--big' %>
+      </div>
+      <div class="margin-top-2">
+        <%= link_to t('forms.piv_cac_setup.no_thanks'),
+                    new_user_session_url,
+                    class: 'usa-button usa-button--wide usa-button--big usa-button--outline' %>
+      </div>
     <% end %>
   </div>
 </div>

app/views/users/service_provider_inactive/index.html.erb

@@ -18,6 +18,6 @@
   link_to(
     t('service_providers.errors.inactive.button_text'),
     root_path,
-    class: 'usa-button usa-button--big margin-top-3'
+    class: 'usa-button usa-button--wide usa-button--big margin-top-3'
   )
 %>

app/views/users/service_provider_revoke/show.html.erb

@@ -13,7 +13,7 @@
       t('forms.buttons.continue'),
       service_provider_revoke_url(@service_provider.id),
       method: 'delete',
-      class: 'usa-button usa-button--big margin-top-4') %>
+      class: 'usa-button usa-button--wide usa-button--big margin-top-4') %>
 
 <div class="margin-top-4 border-top">
   <div class="margin-top-1">

app/views/users/totp_setup/confirm_delete.html.erb

@@ -17,4 +17,4 @@
 <%= form_tag(disable_totp_path(id: params[:id]), method: :delete, role: 'form') do %>
   <%= button_tag t('account.index.totp_confirm_delete'), type: 'submit', class: 'usa-button usa-button--big usa-button--wide margin-bottom-2' %>
 <% end %>
-<%= link_to t('links.cancel'), account_path, class: 'usa-button usa-button--big usa-button--wide usa-button-outline' %>
+<%= link_to t('links.cancel'), account_path, class: 'usa-button usa-button--big usa-button--wide usa-button--outline' %>

app/views/users/verify_account/index.html.erb

@@ -8,11 +8,24 @@
 </p>
 <%= validated_form_for(@verify_account_form, url: verify_account_path,
                      html: { autocomplete: 'off', method: :post, role: 'form' }) do |f| %>
-  <%= f.input :otp, required: true, input_html: { aria: { invalid: false } },
-    label: t('forms.verify_profile.name'), wrapper_html: { class: 'margin-bottom-4' }, wrapper: :inline_form do %>
-    <%= f.input_field :otp, as: :inline, autofocus: true, type: 'text', maxlength: '10', value: @code %>
-    <%= f.button :submit, t('forms.verify_profile.submit'), class: 'usa-button--big' %>
-  <% end %>
+  <div class="grid-row margin-bottom-5">
+    <div class="grid-col-12 tablet:grid-col-6">
+      <%= f.input :otp,
+                  type: 'text',
+                  maxlength: 10,
+                  required: true,
+                  autofocus: true,
+                  input_html: {
+                    aria: { invalid: false },
+                    value: @code,
+                  },
+                  label: t('forms.verify_profile.name'),
+                  class: 'margin-bottom-5' %>
+      <%= f.button :submit,
+                   t('forms.verify_profile.submit'),
+                   class: 'usa-button--big usa-button--full-width' %>
+    </div>
+  </div>
 <% end %>
 
 <% if FeatureManagement.enable_gpo_verification? && !@mail_spammed %>

app/views/users/verify_personal_key/new.html.erb

@@ -20,7 +20,7 @@
 <div class="margin-top-2">
   <%= t('forms.personal_key.alternative') %>
   <%= button_to(t('links.reverify'), reactivate_account_path, method: :put,
-                class: 'usa-button usa-button--unstyled margin-left-1', form_class: 'inline-block') %>
+                class: 'usa-button usa-button--unstyled', form_class: 'inline-block padding-left-1') %>
 </div>
 
 <%= render 'shared/cancel', link: account_path %>