From 1ff5e91ccedca1d31ec29361adb56b5ee31455ab Mon Sep 17 00:00:00 2001
From: Ben Halpern <bendhalpern@gmail.com>
Date: Tue, 27 Jun 2023 09:48:45 -0400
Subject: [PATCH] Make sidebar billboard margins consistent and handle varied
 browser sizes for overflow (#19635)

---
 app/assets/stylesheets/components/cards.scss | 2 ++
 app/views/articles/_sticky_nav.html.erb      | 4 ++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/components/cards.scss b/app/assets/stylesheets/components/cards.scss
index 3d4d0da5c..6159ac905 100644
--- a/app/assets/stylesheets/components/cards.scss
+++ b/app/assets/stylesheets/components/cards.scss
@@ -13,6 +13,8 @@
     background: var(--card-bg);
     color: var(--card-secondary-color);
     box-shadow: 0 0 0 1px var(--card-secondary-border);
+    max-height: calc(100vh - var(--header-height) - 2*var(--layout-padding));
+    overflow: auto;
   }
 
   &--elevated {
diff --git a/app/views/articles/_sticky_nav.html.erb b/app/views/articles/_sticky_nav.html.erb
index 662aacedb..7e378334e 100644
--- a/app/views/articles/_sticky_nav.html.erb
+++ b/app/views/articles/_sticky_nav.html.erb
@@ -1,5 +1,5 @@
 <% @actor = @article.organization || @article.user %>
-<div class="crayons-article-sticky grid gap-4 break-word" id="article-show-primary-sticky-nav">
+<div class="crayons-article-sticky grid gap-4 pb-4 break-word" id="article-show-primary-sticky-nav">
   <div class="crayons-card crayons-card--secondary branded-7 p-4 pt-0 gap-4 grid" style="border-top-color: <%= Color::CompareHex.new([user_colors(@actor)[:bg], user_colors(@actor)[:text]]).brightness(0.88) %>;">
     <%= render "shared/profile_card_content", actor: @actor, context: "sidebar" %>
   </div>
@@ -55,4 +55,4 @@
   <% end %>
 </div>
 
-<div class="crayons-article-sticky grid gap-4 break-word pt-4 js-display-ad-container" data-async-url="<%= article_display_ad_path(username: @article.username, slug: @article.slug, placement_area: :post_sidebar) %>"></div>
+<div class="crayons-article-sticky grid gap-4 break-word js-display-ad-container" data-async-url="<%= article_display_ad_path(username: @article.username, slug: @article.slug, placement_area: :post_sidebar) %>"></div>