[KModal] Improve overflow lock handler

[AlexVelezLl]

❌ This issue is not open for contribution. Visit Contributing guidelines to learn about the contributing process and how to find suitable issues.

Observed behavior

While reviewing this fix to fix the double scrollbar. I realized that we use this document.documentElement.style['overflow-y'] = 'hidden'; pattern in many places (e.g. Kolibri's SidePanelModal, KDS's KModal, Studio's SidePanelModal, Studio's StudioImmersiveModal) and, if we open (and close)
A modal on top of another modal (e.g., an "are you sure you want to leave" modal on top of a side panel/immersive modal), the modal unmount handler will remove the overflow, but the background modal will still be present.

Grabacion.de.pantalla.2026-02-24.a.la.s.10.02.04.a.m.mov

Expected behavior

The document element scroll should be locked/unlocked only when the first/last modal (or any other scroll locker component) mounts/unmounts.

Claude suggested a composable like:

// useScrollLock.js
import { ref, watch } from 'vue';

const lockCount = ref(0);

export function useScrollLock() {
  const lock = () => {
    lockCount.value++;
  };

  const unlock = () => {
    lockCount.value = Math.max(0, lockCount.value - 1);
  };

  watch(lockCount, (count) => {
    document.documentElement.style.overflowY = count > 0 ? 'hidden' : 'auto';
  }, { immediate: true });

  return { lock, unlock };
}

Another alternative may be to change how page layouts are handled across our ecosystem so that we never overflow the body container, and overflow specific elements instead (like the main node). In that case, we would never need to set overflow: hidden to the documentElement.

User-facing consequences

It may be a bit confusing to have double scrollbars.

Steps to reproduce

• Have a background with a lot of elements so that they overflow the body element.
• Open a modal.
• Open another modal on top of the current modal
• Close the second modal
• Notice that the page scroll is now visible.