const scrobbles = document.getElementById("recent-scrobbles");
const publications = document.getElementById("recent-publications");
const changelog = document.getElementById("recent-now");
const column = document.querySelector(".recent-column");

let userResized = false;
let lastSetHeight = null;

new ResizeObserver(([entry]) => {
  const observedHeight = Math.round(entry.contentRect.height);
  if (lastSetHeight !== null && observedHeight !== lastSetHeight) {
    userResized = true;
    column.style.height = "auto"; // NEW — release the lock so flow can push content down
  }
}).observe(changelog);

function syncHeights() {
  if (userResized) return;

  const gap = parseFloat(getComputedStyle(column).rowGap) || 0;
  const changelogFloor = parseFloat(getComputedStyle(changelog).minHeight) || 0;
  const naturalFloor = publications.offsetHeight + gap + changelogFloor;
  const targetColumnHeight = Math.max(naturalFloor, scrobbles.offsetHeight);
  const changelogHeight = targetColumnHeight - publications.offsetHeight - gap;

  lastSetHeight = Math.round(changelogHeight);
  changelog.style.height = `${changelogHeight}px`;
  column.style.height = `${targetColumnHeight}px`;
}

new ResizeObserver(syncHeights).observe(scrobbles);
new ResizeObserver(syncHeights).observe(publications);