LG-4792: Revise email languages layout to avoid text wrapping

**Why**: As a user, I want all information to be displayed in a clear visual hierarchy without visual design issues, so that I am not distracted while I am signing in or verifying my identity.
18F · Feb 3, 2022 · 504b9f3 · 504b9f3
1 parent 5a70437
commit 504b9f3
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 28 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,7 @@ Unreleased
 
 ### Improvements/Changes
 - Layout: Improve layout margins and typographical consistency across several content pages. (#5880, #5884, #5887, #5888, #5908)
+- Layout: Improve layout margins and typographical consistency across several content pages. (#5880, #5884, #5887, #5888, #5906)
 - Typography: Updated monospace font to Roboto Mono for consistency across login.gov sites. (#5891)
 - Icons: Replaced custom button icons using U.S. Web Design system icons. (#5904)
 

diff --git a/app/assets/stylesheets/utilities/_space-misc.scss b/app/assets/stylesheets/utilities/_space-misc.scss
@@ -31,6 +31,10 @@
   padding-left: 24px;
 }
 
+.minw-full {
+  min-width: 100%;
+}
+
 @media #{$breakpoint-sm} {
   .sm-mr-20p {
     margin-right: 20px;

diff --git a/app/views/shared/_email_languages.html.erb b/app/views/shared/_email_languages.html.erb
@@ -3,30 +3,33 @@ locals:
 * f: from validated_form_for
 * selection: the current language selection
 %>
-<div class="margin-bottom-4">
-  <ul class="usa-input-list">
-    <% I18n.available_locales.each do |locale| %>
-      <% item_id = "email-locale-#{locale}" %>
-      <li class="grid-col-8 mobile-lg:grid-col-6">
-        <%= f.input_field(
-              :email_language,
-              type: :radio,
-              value: locale,
-              checked: selection ?
-                selection.to_s == locale.to_s :
-                (I18n.locale.to_s == locale.to_s),
-              class: 'usa-radio__input usa-radio__input--bordered',
-              id: item_id,
-            ) %>
-        <%= f.label(
-              :email_language,
-              locale == I18n.locale ?
-                t('account.email_language.default', language: t("i18n.locale.#{locale}")) :
-                t("i18n.locale.#{locale}"),
-              for: item_id,
-              class: 'usa-radio__label width-full',
-            ) %>
-      </li>
-    <% end %>
-  </ul>
+<div class="grid-row margin-bottom-2">
+  <div class="grid-col-fill">
+    <ul class="usa-input-list display-inline-block minw-full">
+      <% I18n.available_locales.each do |locale| %>
+        <% item_id = "email-locale-#{locale}" %>
+        <li class="text-no-wrap width-full">
+          <%= f.input_field(
+                :email_language,
+                type: :radio,
+                value: locale,
+                checked: selection ?
+                  selection.to_s == locale.to_s :
+                  (I18n.locale.to_s == locale.to_s),
+                class: 'usa-radio__input usa-radio__input--bordered',
+                id: item_id,
+              ) %>
+          <%= f.label(
+                :email_language,
+                locale == I18n.locale ?
+                  t('account.email_language.default', language: t("i18n.locale.#{locale}")) :
+                  t("i18n.locale.#{locale}"),
+                for: item_id,
+                class: 'usa-radio__label width-full text-no-wrap',
+              ) %>
+        </li>
+      <% end %>
+    </ul>
+  </div>
+  <div class="grid-col-4 tablet:grid-col-6"></div>
 </div>
diff --git a/app/views/sign_up/registrations/new.html.erb b/app/views/sign_up/registrations/new.html.erb
@@ -23,7 +23,7 @@
       <%= t('forms.registration.labels.email_language') %>
     </legend>
 
-    <p class="margin-bottom-4">
+    <p class="margin-bottom-2">
       <%= t(
             'account.email_language.languages_list',
             app_name: APP_NAME,
@@ -45,6 +45,7 @@
           <%= t('sign_up.terms', app_name: APP_NAME) %>
           <%= new_window_link_to(t('titles.rules_of_use'), MarketingSite.rules_of_use_url) %>
         <% end,
+        label_html: { class: 'margin-y-0' },
         required: true,
       ) %>
 
@@ -53,7 +54,7 @@
         :button,
         t('forms.buttons.submit.default'),
         type: :submit,
-        class: 'usa-button usa-button--big usa-button--wide margin-y-5',
+        class: 'display-block usa-button usa-button--big usa-button--wide margin-y-5',
       ) %>
 <% end %>