From 0708069c5b20fee33e4ec76f3438a346d4e00f22 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 10 Feb 2026 13:45:03 +0000
Subject: [PATCH 1/6] Initial plan


From e7b53e3ee21744f366d6b9ab41af59c45a734938 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 10 Feb 2026 13:50:57 +0000
Subject: [PATCH 2/6] Limit hero image height to prevent vertical growth

Co-authored-by: maebeale <7607813+maebeale@users.noreply.github.com>
---
 app/views/assets/_display_image.html.erb | 2 +-
 app/views/stories/share_portal.html.erb  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/views/assets/_display_image.html.erb b/app/views/assets/_display_image.html.erb
index bc0dd3196..13ddec0e1 100644
--- a/app/views/assets/_display_image.html.erb
+++ b/app/views/assets/_display_image.html.erb
@@ -48,7 +48,7 @@
   sizes = {
     hero: {
       wrapper: "mb-8",
-      image:   "w-full rounded-lg shadow-sm border border-gray-200",
+      image:   "w-full h-full object-cover rounded-lg shadow-sm border border-gray-200",
       preview: [1200, 1200]
     },
 
diff --git a/app/views/stories/share_portal.html.erb b/app/views/stories/share_portal.html.erb
index 3c73bbd45..5f8f6886c 100644
--- a/app/views/stories/share_portal.html.erb
+++ b/app/views/stories/share_portal.html.erb
@@ -32,7 +32,7 @@
     <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
       <div class="relative rounded-lg overflow-hidden shadow-lg" id="hero-carousel">
         <%= link_to story_path(@featured_story), class: "block relative carousel-item active" do %>
-          <div class="aspect-[16/6] bg-gray-200">
+          <div class="h-96 max-h-96 bg-gray-200 overflow-hidden flex items-center">
             <%= render "assets/display_image",
                        resource: @featured_story,
                        variant: :hero %>

From f0d49ca00799dce1bc54454046f9803cbbc69b92 Mon Sep 17 00:00:00 2001
From: maebeale <maebeale@users.noreply.github.com>
Date: Tue, 10 Feb 2026 09:17:11 -0500
Subject: [PATCH 3/6] Allow extra classes to be sent in

---
 app/views/assets/_display_image.html.erb | 11 ++++++-----
 app/views/stories/share_portal.html.erb  |  1 +
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/app/views/assets/_display_image.html.erb b/app/views/assets/_display_image.html.erb
index 13ddec0e1..d1ab4fdbb 100644
--- a/app/views/assets/_display_image.html.erb
+++ b/app/views/assets/_display_image.html.erb
@@ -9,6 +9,7 @@
 <% display_open_pdf_link ||= false %>
 <% idx ||= 0 %>
 <% item_type ||= "PrimaryAsset" %>
+<% extra_image_classes ||= "" %>
 
 <% width ||= "32" %>
 <% height ||= width %>
@@ -48,20 +49,20 @@
   sizes = {
     hero: {
       wrapper: "mb-8",
-      image:   "w-full h-full object-cover rounded-lg shadow-sm border border-gray-200",
+      image:   "hero-size w-full h-full object-cover rounded-lg shadow-sm border border-gray-200 #{extra_image_classes}",
       preview: [1200, 1200]
     },
 
     gallery: {
       wrapper: "flex grow",
-      image:   "#{width_class} #{height_class} object-cover rounded border border-gray-300
-                shadow-sm hover:opacity-90 transition-opacity",
+      image:   "gallery-size #{width_class} #{height_class} object-cover rounded border border-gray-300
+                shadow-sm hover:opacity-90 transition-opacity #{extra_image_classes}",
       preview: [300, 300]
     },
 
     index: {
-      wrapper: "#{width_class} #{height_class} shrink-0 overflow-hidden rounded border border-gray-300",
-      image:   "w-full h-full object-cover"
+      wrapper: "index-size #{width_class} #{height_class} shrink-0 overflow-hidden rounded border border-gray-300",
+      image:   "w-full h-full object-cover #{extra_image_classes}"
     }
   }.fetch(variant)
 
diff --git a/app/views/stories/share_portal.html.erb b/app/views/stories/share_portal.html.erb
index 5f8f6886c..433fa5949 100644
--- a/app/views/stories/share_portal.html.erb
+++ b/app/views/stories/share_portal.html.erb
@@ -35,6 +35,7 @@
           <div class="h-96 max-h-96 bg-gray-200 overflow-hidden flex items-center">
             <%= render "assets/display_image",
                        resource: @featured_story,
+                       extra_image_classes: "h-full object-cover",
                        variant: :hero %>
           </div>
           <!-- Blue Sector Box on Top Left -->

From 8ea21183ee62d6e10fb5286c539df2eeb7486805 Mon Sep 17 00:00:00 2001
From: maebeale <maebeale@users.noreply.github.com>
Date: Tue, 10 Feb 2026 09:18:07 -0500
Subject: [PATCH 4/6] Don't hard-code the size

---
 app/views/assets/_display_image.html.erb | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/views/assets/_display_image.html.erb b/app/views/assets/_display_image.html.erb
index d1ab4fdbb..840a85684 100644
--- a/app/views/assets/_display_image.html.erb
+++ b/app/views/assets/_display_image.html.erb
@@ -49,7 +49,7 @@
   sizes = {
     hero: {
       wrapper: "mb-8",
-      image:   "hero-size w-full h-full object-cover rounded-lg shadow-sm border border-gray-200 #{extra_image_classes}",
+      image:   "hero-size w-full rounded-lg shadow-sm border border-gray-200 #{extra_image_classes}",
       preview: [1200, 1200]
     },
 

From 858e3b99bd1648e9c34c6259f5350e4d8df9c52f Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Tue, 10 Feb 2026 14:21:15 +0000
Subject: [PATCH 5/6] Stretch hero image to full width horizontally

Co-authored-by: maebeale <7607813+maebeale@users.noreply.github.com>
---
 app/views/stories/share_portal.html.erb | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/views/stories/share_portal.html.erb b/app/views/stories/share_portal.html.erb
index 433fa5949..5cd39b06d 100644
--- a/app/views/stories/share_portal.html.erb
+++ b/app/views/stories/share_portal.html.erb
@@ -32,10 +32,10 @@
     <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
       <div class="relative rounded-lg overflow-hidden shadow-lg" id="hero-carousel">
         <%= link_to story_path(@featured_story), class: "block relative carousel-item active" do %>
-          <div class="h-96 max-h-96 bg-gray-200 overflow-hidden flex items-center">
+          <div class="h-96 max-h-96 bg-gray-200 overflow-hidden">
             <%= render "assets/display_image",
                        resource: @featured_story,
-                       extra_image_classes: "h-full object-cover",
+                       extra_image_classes: "!w-full h-full object-cover",
                        variant: :hero %>
           </div>
           <!-- Blue Sector Box on Top Left -->

From a371a3eea58c9e27af91768abf52407eaf6eeb96 Mon Sep 17 00:00:00 2001
From: maebeale <maebeale@users.noreply.github.com>
Date: Tue, 10 Feb 2026 09:24:25 -0500
Subject: [PATCH 6/6] Hard-code nav item colors

---
 app/views/shared/_share_portal_navbar.html.erb | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/views/shared/_share_portal_navbar.html.erb b/app/views/shared/_share_portal_navbar.html.erb
index f26f8183d..0fc7b28ca 100644
--- a/app/views/shared/_share_portal_navbar.html.erb
+++ b/app/views/shared/_share_portal_navbar.html.erb
@@ -98,12 +98,12 @@
     <!-- Row 2: Focus Area Navigation -->
     <div class="nav-row">
       <div class="hidden lg:flex items-center justify-center py-3 space-x-6">
-        <%= link_to "Home", share_portal_stories_path, class: "font-telefon text-gray-800 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
+        <%= link_to "Home", share_portal_stories_path, class: "font-telefon text-[#5B2C8A] hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
         <%= link_to "Domestic Violence", share_portal_stories_path(focus: "domestic_violence"), class: "font-telefon text-red-700 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
-        <%= link_to "Self-Care & Personal Growth", share_portal_stories_path(focus: "self_care"), class: "font-telefon text-gray-600 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
+        <%= link_to "Self-Care & Personal Growth", share_portal_stories_path(focus: "self_care"), class: "font-telefon text-[#1F6F8B] hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
         <%= link_to "Social Justice", share_portal_stories_path(focus: "social_justice"), class: "font-telefon text-green-700 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
-        <%= link_to "Facilitator Spotlights", share_portal_stories_path(focus: "facilitator_spotlights"), class: "font-telefon text-purple-700 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
-        <%= link_to "Additional Focus Areas", "#", class: "font-telefon text-orange-600 hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
+        <%= link_to "Facilitator Spotlights", share_portal_stories_path(focus: "facilitator_spotlights"), class: "font-telefon text-[#8B004B] hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
+        <%= link_to "Additional Focus Areas", "#", class: "font-telefon text-[#F28C00] hover:bg-gray-100 px-3 py-1 rounded text-sm font-medium transition-all" %>
       </div>
     </div>