Same experience.
Fewer moving parts.

const resize = (field) => {
  field.style.height = "auto";
  field.style.height = `${field.scrollHeight}px`;
};

field.addEventListener("input", () => resize(field));
window.addEventListener("resize", () => resize(field));

.comment-field {
  field-sizing: content;
  min-block-size: 3lh;
  max-block-size: 12lh;
}

/* Wrong in the sidebar: the viewport is wide, the card is not. */
@media (min-width: 640px) {
  .resource-card {
    grid-template-columns: 96px 1fr;
  }
}

.card-slot {
  container-type: inline-size;
}

@container (min-width: 320px) {
  .resource-card {
    grid-template-columns: 96px 1fr;
  }
}

group.addEventListener("change", () => {
  for (const option of group.querySelectorAll(".option")) {
    const input = option.querySelector("input");
    option.classList.toggle("is-selected", input.checked);
  }
});

.option:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-surface);
}

overlay.hidden = false;
document.body.style.overflow = "hidden";
document.addEventListener("keydown", closeOnEscape);
trapFocus(overlay);
// ...then undo all four on close, and put focus back on the trigger

dialog.showModal();

dialog.addEventListener("close", () => {
  save(dialog.returnValue);
});

:root {
  --surface: #fff;
  --text: #16202e;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: #10182a;
    --text: #e8eefb;
  }
}

:root {
  color-scheme: light dark;
  --surface: light-dark(#fff, #10182a);
  --text: light-dark(#16202e, #e8eefb);
}

let latest = 0;

const search = async (term) => {
  const id = ++latest;
  const response = await fetch(`/search?q=${encodeURIComponent(term)}`);
  // The superseded request still ran, and still resolved.
  if (id === latest) render(await response.json());
};

let inFlight;

const search = async (term) => {
  inFlight?.abort();
  inFlight = new AbortController();
  try {
    const response = await fetch(`/search?q=${encodeURIComponent(term)}`, {
      signal: inFlight.signal,
    });
    render(await response.json());
  } catch (error) {
    if (error.name !== "AbortError") throw error;
  }
};

const urlPattern = /^(https?:\/\/)?[\w.-]+\.[a-z]{2,}(\/.*)?$/i;

const isValid = (value) => urlPattern.test(value);

const isValid = (value, base = location.href) =>
  URL.canParse?.(value, base) ?? canConstructUrl(value, base);