Add intersection observer to only show when title isn't visible

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))
+  }
 }