From 18877f6f1b21ff0ceec546695fd7aec9f0d6e4b7 Mon Sep 17 00:00:00 2001
From: Suzanne Aitchison <suzanne@forem.com>
Date: Tue, 8 Mar 2022 10:37:52 +0000
Subject: [PATCH] Avoid layout funkiness when non-breaking characters are used
 (#16782)

* Apply overflow-wrap fallback everywhere we use anywhere value

* fix some more non breaking spaces layout issues

* user with org sidebar

* comment index header
---
 app/assets/stylesheets/base/main.scss                       | 3 +++
 app/assets/stylesheets/components/cards.scss                | 3 +++
 app/assets/stylesheets/components/links.scss                | 1 +
 app/assets/stylesheets/components/profile-preview-card.scss | 3 +++
 app/assets/stylesheets/components/stories.scss              | 5 +++++
 app/assets/stylesheets/preact/onboarding-modal.scss         | 3 +++
 app/assets/stylesheets/views/article.scss                   | 2 ++
 app/assets/stylesheets/views/dashboard.scss                 | 3 +++
 app/assets/stylesheets/views/listings.scss                  | 3 +++
 app/assets/stylesheets/views/signin.scss                    | 4 ++++
 app/views/articles/_sidebar.html.erb                        | 2 +-
 app/views/articles/_sidebar_additional.html.erb             | 2 +-
 app/views/articles/_sidebar_listings.html.erb               | 2 +-
 app/views/comments/index.html.erb                           | 2 +-
 app/views/stories/_sign_in_invitation.html.erb              | 4 ++--
 app/views/users/_sidebar.html.erb                           | 2 +-
 app/views/users/show.html.erb                               | 2 +-
 17 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/app/assets/stylesheets/base/main.scss b/app/assets/stylesheets/base/main.scss
index d3dce9cfb..89fa40e02 100644
--- a/app/assets/stylesheets/base/main.scss
+++ b/app/assets/stylesheets/base/main.scss
@@ -77,6 +77,9 @@ a {
   letter-spacing: -0.02em;
   line-height: 1;
   outline: 0;
+
+  // overflow-wrap: anywhere isn't supported in Safari, in which case this fallback applies
+  overflow-wrap: break-word;
   overflow-wrap: anywhere;
 
   &__img,
diff --git a/app/assets/stylesheets/components/cards.scss b/app/assets/stylesheets/components/cards.scss
index b409a0ce7..deed222d0 100644
--- a/app/assets/stylesheets/components/cards.scss
+++ b/app/assets/stylesheets/components/cards.scss
@@ -54,6 +54,9 @@
   border-radius: var(--radius-auto);
   background: var(--card-bg);
   box-shadow: 0 0 0 1px var(--card-border);
+
+  // overflow-wrap: anywhere isn't supported in Safari, in which case this fallback applies
+  overflow-wrap: break-word;
   overflow-wrap: anywhere;
 
   &__revealable {
diff --git a/app/assets/stylesheets/components/links.scss b/app/assets/stylesheets/components/links.scss
index ca2a1e169..456cbf487 100644
--- a/app/assets/stylesheets/components/links.scss
+++ b/app/assets/stylesheets/components/links.scss
@@ -13,6 +13,7 @@
   outline: 0;
   text-decoration: none;
   color: var(--color);
+  max-width: 100%;
 
   &--block {
     display: flex;
diff --git a/app/assets/stylesheets/components/profile-preview-card.scss b/app/assets/stylesheets/components/profile-preview-card.scss
index ea2176bd5..f964a5ab0 100644
--- a/app/assets/stylesheets/components/profile-preview-card.scss
+++ b/app/assets/stylesheets/components/profile-preview-card.scss
@@ -10,6 +10,9 @@
     left: 0;
     font-size: var(--fs-base);
     font-weight: var(--fw-normal);
+
+    // overflow-wrap: anywhere isn't supported in Safari, in which case this fallback applies
+    overflow-wrap: break-word;
     overflow-wrap: anywhere;
   }
 
diff --git a/app/assets/stylesheets/components/stories.scss b/app/assets/stylesheets/components/stories.scss
index 7c2731daf..4a18f25da 100644
--- a/app/assets/stylesheets/components/stories.scss
+++ b/app/assets/stylesheets/components/stories.scss
@@ -152,6 +152,9 @@
     color: var(--card-color);
     line-height: var(--lh-tight);
     font-size: var(--title-font-size);
+
+    // overflow-wrap: anywhere isn't supported in Safari, in which case this fallback applies
+    overflow-wrap: break-word;
     overflow-wrap: anywhere;
     word-break: break-word;
     margin-bottom: var(--su-1);
@@ -238,6 +241,8 @@
       color: black;
       background: yellow;
     }
+    // overflow-wrap: anywhere isn't supported in Safari, in which case this fallback applies
+    overflow-wrap: break-word;
     overflow-wrap: anywhere;
     word-break: break-word;
   }
diff --git a/app/assets/stylesheets/preact/onboarding-modal.scss b/app/assets/stylesheets/preact/onboarding-modal.scss
index 87110c08e..08e56c2b8 100644
--- a/app/assets/stylesheets/preact/onboarding-modal.scss
+++ b/app/assets/stylesheets/preact/onboarding-modal.scss
@@ -460,6 +460,9 @@ $onboarding-user-selected-hover: rgba(71, 85, 235, 0.2);
   .user-summary {
     margin: 0;
     line-height: var(--lh-tight);
+
+    // overflow-wrap: anywhere isn't supported in Safari, in which case this fallback applies
+    overflow-wrap: break-word;
     overflow-wrap: anywhere;
   }
 
diff --git a/app/assets/stylesheets/views/article.scss b/app/assets/stylesheets/views/article.scss
index e05d10b8c..0d0582b28 100644
--- a/app/assets/stylesheets/views/article.scss
+++ b/app/assets/stylesheets/views/article.scss
@@ -41,6 +41,8 @@
   }
 
   &__header {
+    // overflow-wrap: anywhere isn't supported in Safari, in which case this fallback applies
+    overflow-wrap: break-word;
     overflow-wrap: anywhere;
     word-break: break-word;
 
diff --git a/app/assets/stylesheets/views/dashboard.scss b/app/assets/stylesheets/views/dashboard.scss
index f0d9acad3..a2cf615b6 100644
--- a/app/assets/stylesheets/views/dashboard.scss
+++ b/app/assets/stylesheets/views/dashboard.scss
@@ -24,6 +24,9 @@
 
   &__title {
     grid-column-end: span 2;
+
+    // overflow-wrap: anywhere isn't supported in Safari, in which case this fallback applies
+    overflow-wrap: break-word;
     overflow-wrap: anywhere;
     word-break: break-word;
     @media (min-width: $breakpoint-m) {
diff --git a/app/assets/stylesheets/views/listings.scss b/app/assets/stylesheets/views/listings.scss
index 7a3cd32b4..27ed8c13c 100644
--- a/app/assets/stylesheets/views/listings.scss
+++ b/app/assets/stylesheets/views/listings.scss
@@ -14,6 +14,9 @@
 
 .single-listing {
   $el: &;
+
+  // overflow-wrap: anywhere isn't supported in Safari, in which case this fallback applies
+  overflow-wrap: break-word;
   overflow-wrap: anywhere;
   word-break: break-word;
   overflow: hidden;
diff --git a/app/assets/stylesheets/views/signin.scss b/app/assets/stylesheets/views/signin.scss
index 851278617..31611854e 100644
--- a/app/assets/stylesheets/views/signin.scss
+++ b/app/assets/stylesheets/views/signin.scss
@@ -51,6 +51,10 @@
     font-size: var(--fs-2xl);
     line-height: var(--lh-tight);
 
+    // overflow-wrap: anywhere isn't supported in Safari, in which case this fallback applies
+    overflow-wrap: break-word;
+    overflow-wrap: anywhere;
+
     @media (min-width: $breakpoint-s) {
       font-size: var(--fs-3xl);
     }
diff --git a/app/views/articles/_sidebar.html.erb b/app/views/articles/_sidebar.html.erb
index c6e990d3c..797bf8d35 100644
--- a/app/views/articles/_sidebar.html.erb
+++ b/app/views/articles/_sidebar.html.erb
@@ -1,4 +1,4 @@
-<div id="sidebar-wrapper-left" class="sidebar-wrapper sidebar-wrapper-left crayons-layout__sidebar-left">
+<div id="sidebar-wrapper-left" class="sidebar-wrapper sidebar-wrapper-left crayons-layout__sidebar-left crayons-layout__content">
   <aside class="side-bar" aria-label="Primary sidebar">
     <% cache(release_adjusted_cache_key("main-sidebar-nav--#{user_signed_in?}"), expires_in: 15.minutes) do %>
       <%= render "shared/auth_widget" unless user_signed_in? %>
diff --git a/app/views/articles/_sidebar_additional.html.erb b/app/views/articles/_sidebar_additional.html.erb
index 7b8cc3d35..22a8a2ec9 100644
--- a/app/views/articles/_sidebar_additional.html.erb
+++ b/app/views/articles/_sidebar_additional.html.erb
@@ -1,4 +1,4 @@
-<div id="sidebar-wrapper-right" class="sidebar-wrapper sidebar-wrapper-right crayons-layout__sidebar-right">
+<div id="sidebar-wrapper-right" class="sidebar-wrapper sidebar-wrapper-right crayons-layout__sidebar-right crayons-layout__content">
   <% unless user_signed_in? %>
     <%= render "sidebars/homepage_content" %>
   <% end %>
diff --git a/app/views/articles/_sidebar_listings.html.erb b/app/views/articles/_sidebar_listings.html.erb
index a2016e48e..18ffe19cf 100644
--- a/app/views/articles/_sidebar_listings.html.erb
+++ b/app/views/articles/_sidebar_listings.html.erb
@@ -1,6 +1,6 @@
 <% @listings = Listing.where(published: true).select(:title, :classified_listing_category_id, :slug, :bumped_at) %>
 <% if params[:timeframe].blank? && @listings.any? %>
-  <section class="crayons-card crayons-card--secondary">
+  <section class="crayons-card crayons-card--secondary crayons-layout__content">
     <header class="crayons-card__header">
       <h3 class="crayons-subtitle-2"><%= t("views.main.side.listings.heading") %></h3>
       <div class="crayons-card__actions">
diff --git a/app/views/comments/index.html.erb b/app/views/comments/index.html.erb
index eea3bf1ab..67041ecd7 100644
--- a/app/views/comments/index.html.erb
+++ b/app/views/comments/index.html.erb
@@ -90,7 +90,7 @@
   <% else %>
     <div id="response-templates-data" class="hidden"></div>
     <%= javascript_packs_with_chunks_tag "responseTemplates", "commentsDisplay", defer: true %>
-    <header class="p-2 pb-4 m:p-6 m:pb-6 crayons-card crayons-card--secondary s:mx-2 m:mx-4 -mb-1 z-0">
+    <header class="p-2 pb-4 m:p-6 m:pb-6 crayons-card crayons-card--secondary crayons-layout__content s:mx-2 m:mx-4 -mb-1 z-0">
       <% if @commentable %>
       <h1 class="crayons-subtitle-1 mb-4">
         <%= t("views.comments.parent.subtitle_html",
diff --git a/app/views/stories/_sign_in_invitation.html.erb b/app/views/stories/_sign_in_invitation.html.erb
index e4ac31cb9..d907918c0 100644
--- a/app/views/stories/_sign_in_invitation.html.erb
+++ b/app/views/stories/_sign_in_invitation.html.erb
@@ -1,10 +1,10 @@
 <div class="authentication-feed__card" id="in-feed-cta">
-  <div class="authentication-feed__container">
+  <div class="authentication-feed__container crayons-layout__content">
     <figure class="authentication-feed__image-container">
       <img class="authentication-feed__image" src="<%= optimized_image_url(Settings::General.logo_png, width: 190) %>"
             alt="Secondary <%= community_name %> logo" loading="lazy" />
     </figure>
-    <div class="authentication-feed__content">
+    <div class="authentication-feed__content crayons-layout__content">
       <h2 class="authentication-feed__title">
         <%= render "shared/authentication_title" %>
       </h2>
diff --git a/app/views/users/_sidebar.html.erb b/app/views/users/_sidebar.html.erb
index c27e43c73..21580dbf5 100644
--- a/app/views/users/_sidebar.html.erb
+++ b/app/views/users/_sidebar.html.erb
@@ -1,7 +1,7 @@
 <div class="m:gap-4 hidden m:grid js-user-info">
   <% cache "user-profile-sidebar-additional-#{@user.id}-#{@user.github_repos_updated_at}-#{@user.badge_achievements_count}-#{@user.organization_info_updated_at}", expires_in: 2.days do %>
     <% if @user.organizations.present? %>
-      <div class="crayons-card crayons-card--secondary">
+      <div class="crayons-card crayons-card--secondary crayons-layout__content">
         <header class="crayons-card__header">
           <h3 class="crayons-subtitle-3 spec-org-titles"><%= t("views.users.side.org") %></h3>
         </header>
diff --git a/app/views/users/show.html.erb b/app/views/users/show.html.erb
index 41c514b27..71f69a9d2 100644
--- a/app/views/users/show.html.erb
+++ b/app/views/users/show.html.erb
@@ -132,7 +132,7 @@
   data-feed="<%= params[:timeframe] || "base-feed" %>"
   data-articles-since="0">
 
-  <div class="crayons-layout__sidebar-left">
+  <div class="crayons-layout__sidebar-left crayons-layout__content">
     <%= render partial: "users/sidebar", locals: { repositories: @github_repositories } %>
   </div>