From a73dd5c2d3432de230d444d732610a066f738f3f Mon Sep 17 00:00:00 2001
From: Kateryna Savelieva <krasilnikova.katerina@gmail.com>
Date: Sat, 23 Mar 2024 12:38:43 +0200
Subject: [PATCH 1/2] fix(frontend): fix loader position and header sections
 tm-705

---
 .../src/libs/helpers/has-scroll/has-scroll.helper.ts |  5 +++++
 apps/frontend/src/libs/helpers/helpers.ts            |  1 +
 .../section-comparison/section-comparison.tsx        | 12 ++++++++++--
 .../components/section-comparison/styles.module.css  |  5 +++++
 .../course-progress-comparison/styles.module.css     |  1 +
 5 files changed, 22 insertions(+), 2 deletions(-)
 create mode 100644 apps/frontend/src/libs/helpers/has-scroll/has-scroll.helper.ts

diff --git a/apps/frontend/src/libs/helpers/has-scroll/has-scroll.helper.ts b/apps/frontend/src/libs/helpers/has-scroll/has-scroll.helper.ts
new file mode 100644
index 000000000..75318ea9e
--- /dev/null
+++ b/apps/frontend/src/libs/helpers/has-scroll/has-scroll.helper.ts
@@ -0,0 +1,5 @@
+const hasScroll = (container: HTMLDivElement | null): boolean | null => {
+	return container ? container.scrollHeight > container.clientHeight : null;
+};
+
+export { hasScroll };
diff --git a/apps/frontend/src/libs/helpers/helpers.ts b/apps/frontend/src/libs/helpers/helpers.ts
index 51dbc3705..82d194f89 100644
--- a/apps/frontend/src/libs/helpers/helpers.ts
+++ b/apps/frontend/src/libs/helpers/helpers.ts
@@ -3,6 +3,7 @@ export { checkIfUserHasPermissions } from "./check-if-user-has-permissions/check
 export { findItemById } from "./find-item-by-id/find-item-by-id.helper.js";
 export { getTruncatedContent } from "./get-truncated-content/get-truncated-content.helper.js";
 export { getValidClassNames } from "./get-valid-class-names/get-valid-class-names.helper.js";
+export { hasScroll } from "./has-scroll/has-scroll.helper.js";
 export {
 	checkIsDatePrecedesAnotherByOneDay,
 	checkIsThisYear,
diff --git a/apps/frontend/src/pages/course-progress-comparison/libs/components/section-comparison/section-comparison.tsx b/apps/frontend/src/pages/course-progress-comparison/libs/components/section-comparison/section-comparison.tsx
index 19438b6e5..737832b1e 100644
--- a/apps/frontend/src/pages/course-progress-comparison/libs/components/section-comparison/section-comparison.tsx
+++ b/apps/frontend/src/pages/course-progress-comparison/libs/components/section-comparison/section-comparison.tsx
@@ -1,8 +1,10 @@
 import { SectionStatusCheckbox } from "~/libs/components/components.js";
+import { getValidClassNames, hasScroll } from "~/libs/helpers/helpers.js";
 import {
 	useAppDispatch,
 	useAppSelector,
 	useCallback,
+	useRef,
 } from "~/libs/hooks/hooks.js";
 import { type CourseSectionDto } from "~/modules/course-sections/course-sections.js";
 import {
@@ -64,14 +66,20 @@ const SectionComparison: React.FC<Properties> = ({
 		[dispatch],
 	);
 
+	const contentReference = useRef<HTMLDivElement>(null);
+	const containerClasses = getValidClassNames(
+		styles["container"],
+		hasScroll(contentReference.current) && styles["with-scroll"],
+	);
+
 	return (
-		<div className={styles["container"]}>
+		<div className={containerClasses}>
 			<div className={styles["head"]}>
 				<div className={styles["row-item"]}>Progress</div>
 				<div className={styles["row-item"]}>You</div>
 				<div className={styles["row-item"]}>{friendName}</div>
 			</div>
-			<div className={styles["content"]}>
+			<div className={styles["content"]} ref={contentReference}>
 				{courseSections.map((section) => {
 					const userStatus = getStatusBySectionId(
 						section.id as number,
diff --git a/apps/frontend/src/pages/course-progress-comparison/libs/components/section-comparison/styles.module.css b/apps/frontend/src/pages/course-progress-comparison/libs/components/section-comparison/styles.module.css
index 2e7d9ce63..709d299b2 100644
--- a/apps/frontend/src/pages/course-progress-comparison/libs/components/section-comparison/styles.module.css
+++ b/apps/frontend/src/pages/course-progress-comparison/libs/components/section-comparison/styles.module.css
@@ -28,9 +28,14 @@
 }
 
 .head {
+	padding: 20px 31px;
 	font-size: var(--font-size-400);
 }
 
+.with-scroll .head {
+	padding-right: 37px;
+}
+
 .section {
 	font-size: var(--font-size-300);
 	background-color: var(--main-white);
diff --git a/apps/frontend/src/pages/course-progress-comparison/styles.module.css b/apps/frontend/src/pages/course-progress-comparison/styles.module.css
index 09a739991..d50516865 100644
--- a/apps/frontend/src/pages/course-progress-comparison/styles.module.css
+++ b/apps/frontend/src/pages/course-progress-comparison/styles.module.css
@@ -4,6 +4,7 @@
 	position: relative;
 	display: flex;
 	flex-direction: column;
+	flex-grow: 1;
 	gap: 16px;
 	padding: 16px 40px;
 }

From 51277fbbd44ac5f5ab29b1c7f6975305acd4ac55 Mon Sep 17 00:00:00 2001
From: Kateryna Savelieva <krasilnikova.katerina@gmail.com>
Date: Sat, 23 Mar 2024 12:45:44 +0200
Subject: [PATCH 2/2] fix(frontend): fix padding tm-705

---
 .../libs/components/section-comparison/styles.module.css        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/frontend/src/pages/course-progress-comparison/libs/components/section-comparison/styles.module.css b/apps/frontend/src/pages/course-progress-comparison/libs/components/section-comparison/styles.module.css
index 709d299b2..f04ca4489 100644
--- a/apps/frontend/src/pages/course-progress-comparison/libs/components/section-comparison/styles.module.css
+++ b/apps/frontend/src/pages/course-progress-comparison/libs/components/section-comparison/styles.module.css
@@ -33,7 +33,7 @@
 }
 
 .with-scroll .head {
-	padding-right: 37px;
+	padding-right: 36px;
 }
 
 .section {