fix(app): fix pageScroll (#474)

* fix(app): fix pageScroll

* Update apps/app/src/utils/pageScroll.ts

Co-authored-by: Michał Miszczyszyn <[email protected]>

* Update apps/app/src/utils/pageScroll.ts

Co-authored-by: Michał Miszczyszyn <[email protected]>

* fix: wysiwyg editor border color

* Update apps/app/src/utils/pageScroll.ts

Co-authored-by: Michał Miszczyszyn <[email protected]>

* Update apps/app/src/utils/pageScroll.ts

Co-authored-by: Michał Miszczyszyn <[email protected]>

* Changes which implement refactored code from 'pageScroll.ts'

* Remove unused custom css class

Co-authored-by: Michał Miszczyszyn <[email protected]>

Author: grzegorzpokorski

apps/app/src/components/BaseModal/BaseModal.tsx

@@ -21,7 +21,7 @@ export const BaseModal = ({ isOpen, onClose, children }: BaseModalProps) => {
 
 	useEffect(() => {
 		if (isOpen) {
-			lockScroll();
+			lockScroll({ mobileOnly: false });
 		}
 	}, [isOpen]);
 
@@ -38,7 +38,7 @@ export const BaseModal = ({ isOpen, onClose, children }: BaseModalProps) => {
 			leaveTo="opacity-0"
 			afterLeave={() => {
 				if (!openedModal) {
-					unlockScroll();
+					unlockScroll({ mobileOnly: false });
 				}
 			}}
 		>

apps/app/src/components/Header/HeaderNavigation.tsx

@@ -14,13 +14,13 @@ export const HeaderNavigation = ({ children }: { children: ReactNode }) => {
 
 	const handleButtonClick = (event: MouseEvent<HTMLButtonElement>) => {
 		event.preventDefault();
-		isOpen ? unlockScroll() : lockScroll();
+		isOpen ? unlockScroll({ mobileOnly: true }) : lockScroll({ mobileOnly: true });
 		setIsOpen((prev) => !prev);
 	};
 
 	const handleClickLink = () => {
 		setIsOpen(false);
-		unlockScroll();
+		unlockScroll({ mobileOnly: true });
 	};
 
 	return (

apps/app/src/components/QuestionsSidebar/QuestionsSidebar.tsx

@@ -14,9 +14,9 @@ export const QuestionsSidebar = () => {
 
 	useEffect(() => {
 		if (isSidebarOpen) {
-			lockScroll();
+			lockScroll({ mobileOnly: true });
 		} else {
-			unlockScroll();
+			unlockScroll({ mobileOnly: true });
 		}
 	}, [isSidebarOpen]);
 

apps/app/src/utils/pageScroll.ts

@@ -1,13 +1,21 @@
 import "client-only";
 
-const classes = ["overflow-hidden"];
-
-export const lockScroll = () => {
+export const lockScroll = ({ mobileOnly }: { mobileOnly: boolean }) => {
 	document.body.style.paddingRight = `${window.innerWidth - document.body.offsetWidth}px`;
-	document.body.classList.add(...classes);
+
+	if (mobileOnly) {
+		document.body.classList.add("overflow-hidden", "sm:overflow-auto");
+	} else {
+		document.body.classList.add("!overflow-hidden");
+	}
 };
 
-export const unlockScroll = () => {
+export const unlockScroll = ({ mobileOnly }: { mobileOnly: boolean }) => {
 	document.body.style.paddingRight = "";
-	document.body.classList.remove(...classes);
+
+	if (mobileOnly) {
+		document.body.classList.remove("overflow-hidden", "sm:overflow-auto");
+	} else {
+		document.body.classList.remove("!overflow-hidden");
+	}
 };