From 33488ba88eb764ce85121ee031eede0bb6b43201 Mon Sep 17 00:00:00 2001
From: Suzanne Aitchison <suzanne@forem.com>
Date: Thu, 3 Mar 2022 13:51:16 +0000
Subject: [PATCH] fix grid col overflow in right sidebar in safari (#16771)

---
 app/assets/stylesheets/components/cards.scss  | 2 ++
 app/views/sidebars/_homepage_content.html.erb | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/components/cards.scss b/app/assets/stylesheets/components/cards.scss
index 4c3320efb..b409a0ce7 100644
--- a/app/assets/stylesheets/components/cards.scss
+++ b/app/assets/stylesheets/components/cards.scss
@@ -5,6 +5,8 @@
   background: var(--card-bg);
   color: var(--card-color);
   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;
 
   &--secondary {
diff --git a/app/views/sidebars/_homepage_content.html.erb b/app/views/sidebars/_homepage_content.html.erb
index ecfad2f2d..480b63bf3 100644
--- a/app/views/sidebars/_homepage_content.html.erb
+++ b/app/views/sidebars/_homepage_content.html.erb
@@ -11,7 +11,7 @@
     <%= render "articles/sidebar_listings" if Listing.feature_enabled? %>
 
     <% Settings::General.sidebar_tags.each do |tag| %>
-      <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"><a href="/t/<%= tag %>" class="crayons-link">#<%= tag %></a></h3>
         </header>