Make Roam right sidebar more usable on mobile by making it take the whole screen

roam-mobile-sidebar.js

(function() {
  // Only proceed if the Roam API is available
  if (!window.roamAlphaAPI || !roamAlphaAPI.platform) return;
  
  // Check if we are on mobile
  const isMobile = roamAlphaAPI.platform.isMobile;

  // If we’re not on mobile, there's no need to observe or change style
  if (!isMobile) return;

  // Select the .roam-app element to observe
  const roamApp = document.querySelector('.roam-app');
  if (!roamApp) return;

  // Set up the MutationObserver
  const observer = new MutationObserver((mutationsList) => {
    for (const mutation of mutationsList) {
      if (mutation.type === "childList") {
        // Check if the right sidebar content element exists
        const rightSidebarContent = document.getElementById("roam-right-sidebar-content");
        if (rightSidebarContent) {
          // Apply the desired flex-basis changes
          const roamMain = document.querySelector(".roam-main");
          const rightSidebar = document.getElementById("right-sidebar");
          if (roamMain && rightSidebar) {
            roamMain.style.flexBasis = "0";
            rightSidebar.style.flexBasis = "100%";
          }
          // Once applied, optionally disconnect the observer if only needed once
          // observer.disconnect();
        }
      }
    }
  });

  // Observe changes within .roam-app, 
  // because #roam-right-sidebar-content might be added to the sidebar within this container
  observer.observe(roamApp, { childList: true, subtree: true });
})();