✨ Adding footer

src/front/Components/DesignSystem/Footer/index.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import classes from "./classes.module.scss";
 import Mobile from "./mobile";
 import Desktop from "./desktop";
@@ -9,6 +9,9 @@ type IProps = {
 };
 
 export default function Footer({ className }: IProps) {
+	useEffect(() => {
+		document.documentElement.style.setProperty("--footer-height", `43px`);
+	});
 	return (
 		<footer className={[classes["root"], className].join(" ")}>
 			<Mobile className={classes["mobile"]} />

src/front/Components/LayoutTemplates/DefaultDashboardWithList/classes.module.scss

@@ -7,21 +7,24 @@
 		justify-content: flex-start;
 		height: calc(100vh - var(--header-height));
 
-		@media (max-width: $screen-m) {
-			flex-direction: column;
-		}
 		.right-side {
 			min-width: calc(100% - 336px);
-			overflow-y: auto;
-			padding: var(--spacing-lg, 24px);
-
-			&[data-no-padding] {
-				padding: 0;
+			.right-side-content {
+				overflow-y: auto;
+				padding: var(--spacing-lg, 24px);
+				height: calc(100% - var(--footer-height));
 			}
 
-			@media (max-width: $screen-m) {
-				width: 100%;
+			&[data-no-padding="true"] {
+				.right-side-content {
+					padding: 0;
+				}
 			}
 		}
+
+		@media (max-width: $screen-m) {
+			width: 100%;
+			flex-direction: column;
+		}
 	}
 }

src/front/Components/LayoutTemplates/DefaultDashboardWithList/index.tsx

@@ -5,6 +5,7 @@ import React, { ReactNode } from "react";
 
 import classes from "./classes.module.scss";
 import SearchBlockList, { ISearchBlockListProps } from "@Front/Components/DesignSystem/SearchBlockList";
+import Footer from "@Front/Components/DesignSystem/Footer";
 
 export type IPropsDashboardWithList = {
 	title?: string;
@@ -36,12 +37,15 @@ export default function DefaultDashboardWithList(props: IProps) {
 			<div className={classes["content"]}>
 				<SearchBlockList blocks={blocks} onSelectedBlock={onSelectedBlock} bottomButton={bottomButton} />
 				<div className={classes["right-side"]} data-no-padding={noPadding}>
-					{hasBackArrow && (
-						<div className={classes["back-arrow-desktop"]}>
-							<BackArrow url={backArrowUrl ?? ""} />
-						</div>
-					)}
-					{children}
+					<div className={classes["right-side-content"]}>
+						{hasBackArrow && (
+							<div className={classes["back-arrow-desktop"]}>
+								<BackArrow url={backArrowUrl ?? ""} />
+							</div>
+						)}
+						{children}
+					</div>
+					<Footer />
 				</div>
 			</div>
 			<Version />