Ensure when TopicDetail is open document.body stops scrolling (#6285)

* fix: ensure TopicDetail locks the body when open

* chore: ensure 'overflow-hidden' is always available via safelist

* revert: prettier changes

src/components/TopicDetail/TopicDetail.tsx

@@ -30,6 +30,7 @@ import { GitHubIcon } from '../ReactIcons/GitHubIcon.tsx';
 import { GoogleIcon } from '../ReactIcons/GoogleIcon.tsx';
 import { YouTubeIcon } from '../ReactIcons/YouTubeIcon.tsx';
 import { resourceTitleFromId } from '../../lib/roadmap.ts';
+import { lockBodyScroll } from '../../lib/dom.ts';
 
 type TopicDetailProps = {
   resourceTitle?: string;
@@ -262,6 +263,8 @@ export function TopicDetail(props: TopicDetailProps) {
 
   useEffect(() => {
     if (isActive) topicRef?.current?.focus();
+
+    lockBodyScroll(isActive);
   }, [isActive]);
 
   if (!isActive) {
@@ -525,4 +528,4 @@ export function TopicDetail(props: TopicDetailProps) {
       <div className="fixed inset-0 z-30 bg-gray-900 bg-opacity-50 dark:bg-opacity-80"></div>
     </div>
   );
-}
+}

src/lib/dom.ts

@@ -6,3 +6,14 @@ export function replaceChildren(parentNode: Element, newChild: Element) {
   parentNode.innerHTML = '';
   parentNode.append(newChild);
 }
+
+export function lockBodyScroll(shouldLock: boolean) {
+  const isClient = document && 'body' in document;
+  if (!isClient) return;
+
+  if (shouldLock) {
+    document.body.classList.add('overflow-hidden');
+  } else {
+    document.body.classList.remove('overflow-hidden');
+  }
+}

tailwind.config.cjs

@@ -7,6 +7,7 @@ module.exports = {
   future: {
     hoverOnlyWhenSupported: true,
   },
+  safelist: ['overflow-hidden'],
   theme: {
     extend: {
       typography: {