diff --git a/app/assets/stylesheets/card-columns.css b/app/assets/stylesheets/card-columns.css
index 77718633a..945700f35 100644
--- a/app/assets/stylesheets/card-columns.css
+++ b/app/assets/stylesheets/card-columns.css
@@ -80,9 +80,8 @@
       --dnd-bg-color: transparent;
       --dnd-border-color: transparent;
 
-      &.show-column-name-on-hover {
+      &.is-off-screen {
         &:after {
-          color: var(--card-color);
           content: attr(data-column-name);
           font-size: var(--text-x-small);
           font-weight: 500;
@@ -92,7 +91,6 @@
           text-transform: uppercase;
           top: 0;
           translate: -50%;
-          border-radius: 99rem;
         }
 
         &.is-collapsed {
@@ -100,6 +98,13 @@
             writing-mode: vertical-rl;
           }
         }
+
+        &:not(.is-collapsed) {
+          &:after {
+            background-color: var(--column-color);
+            inline-size: calc(var(--column-width-expanded) - 4px); /* make room for the dnd border */
+          }
+        }
       }
     }
 
diff --git a/app/javascript/controllers/collapsible_columns_controller.js b/app/javascript/controllers/collapsible_columns_controller.js
index 0a87e47d5..3d9c8f412 100644
--- a/app/javascript/controllers/collapsible_columns_controller.js
+++ b/app/javascript/controllers/collapsible_columns_controller.js
@@ -2,8 +2,8 @@ import { Controller } from "@hotwired/stimulus"
 import { nextFrame, debounce } from "helpers/timing_helpers";
 
 export default class extends Controller {
-  static classes = [ "collapsed", "noTransitions" ]
-  static targets = [ "column", "button" ]
+  static classes = [ "collapsed", "noTransitions", "titleNotVisible" ]
+  static targets = [ "column", "button", "title" ]
   static values = {
     collection: String
   }
@@ -14,6 +14,14 @@ export default class extends Controller {
 
   async connect() {
     await this.#restoreColumnsDisablingTransitions()
+    this.#setupIntersectionObserver()
+  }
+
+  disconnect() {
+    if (this._intersectionObserver) {
+      this._intersectionObserver.disconnect()
+      this._intersectionObserver = null
+    }
   }
 
   toggle({ target }) {
@@ -106,4 +114,23 @@ export default class extends Controller {
   #localStorageKeyFor(column) {
     return `expand-${this.collectionValue}-${column.getAttribute("id")}`
   }
+
+  #setupIntersectionObserver() {
+    if (typeof IntersectionObserver === "undefined") return
+    if (this._intersectionObserver) this._intersectionObserver.disconnect()
+
+    this._intersectionObserver = new IntersectionObserver(entries => {
+      entries.forEach(entry => {
+        const title = entry.target
+        const column = title.closest('[data-collapsible-columns-target="column"]')
+        
+        if (!column) return
+
+        const offscreen = entry.intersectionRatio === 0
+        column.classList.toggle(this.titleNotVisibleClass, offscreen)
+      })
+    }, { threshold: [0] })
+
+    this.titleTargets.forEach(title => this._intersectionObserver.observe(title))
+  }
 }
diff --git a/app/views/collections/show/_columns.html.erb b/app/views/collections/show/_columns.html.erb
index 27912c09d..a52a308dd 100644
--- a/app/views/collections/show/_columns.html.erb
+++ b/app/views/collections/show/_columns.html.erb
@@ -8,7 +8,13 @@
         dragenter->drag-and-strum#dragEnter
         drop->drag-and-drop#drop
         dragend->drag-and-drop#dragEnd" } do %>
-  <div class="card-columns" data-controller="collapsible-columns" data-collapsible-columns-collection-value="<%= collection.id %>" data-collapsible-columns-collapsed-class="is-collapsed" data-collapsible-columns-no-transitions-class="no-transitions">
+  <div
+    class="card-columns"
+    data-controller="collapsible-columns"
+    data-collapsible-columns-collection-value="<%= collection.id %>"
+    data-collapsible-columns-collapsed-class="is-collapsed"
+    data-collapsible-columns-title-not-visible-class="is-off-screen"
+    data-collapsible-columns-no-transitions-class="no-transitions">
     <div class="card-columns__left">
       <%= render "collections/show/not_now", collection: collection %>
     </div>
diff --git a/app/views/collections/show/_expander.html.erb b/app/views/collections/show/_expander.html.erb
index 91e6466da..ea58f061f 100644
--- a/app/views/collections/show/_expander.html.erb
+++ b/app/views/collections/show/_expander.html.erb
@@ -1,6 +1,6 @@
 <button class="cards__expander btn btn--plain" data-collapsible-columns-target="button" data-action="click->collapsible-columns#toggle"
   style="--card-count: <%= [ count, 20 ].min %>" aria-controls="<%= column_id %>" aria-expanded="false">
   <span class="cards__expander-count" data-drag-and-drop-counter="true"><%= count > 99 ? "99+" : count %></span>
-  <h2 class="cards__expander-title"><%= title %></h2>
+  <h2 class="cards__expander-title" data-collapsible-columns-target="title"><%= title %></h2>
 </button>
 <%= yield if block_given? %>
diff --git a/app/views/collections/show/_stream.html.erb b/app/views/collections/show/_stream.html.erb
index 93980b991..6e19774f2 100644
--- a/app/views/collections/show/_stream.html.erb
+++ b/app/views/collections/show/_stream.html.erb
@@ -6,7 +6,7 @@
   <div>
     <header class="cards__header">
       <div class="cards__expander">
-        <h2 class="cards__expander-title position-relative">Maybe?</h2>
+        <h2 class="cards__expander-title position-relative" data-collapsible-columns-target="title">Maybe?</h2>
         <%= link_to collection_columns_stream_path(collection), class: "cards__expander-button btn btn--circle txt-x-small borderless", data: { turbo_frame: "_top" } do %>
           <%= icon_tag "expand", class: "translucent" %>
           <span class="for-screen-reader">Expand column</span>
diff --git a/app/views/public/collections/show/_stream.html.erb b/app/views/public/collections/show/_stream.html.erb
index fc0d532a8..4fc065e78 100644
--- a/app/views/public/collections/show/_stream.html.erb
+++ b/app/views/public/collections/show/_stream.html.erb
@@ -1,7 +1,7 @@
 <section id="the-stream" class="cards cards--considering"
   data-action="turbo:before-morph-attribute->collapsible-columns#preventToggle">
   <header class="cards__expander">
-    <h2 class="cards__expander-title position-relative"">Maybe?</h2>
+    <h2 class="cards__expander-title position-relative" data-collapsible-columns-target="title">Maybe?</h2>
   </header>
 
   <% if page.used? %>