✨ 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);
+			.right-side-content {
 				overflow-y: auto;
 				padding: var(--spacing-lg, 24px);
+				height: calc(100% - var(--footer-height));
+			}
 
-			&[data-no-padding] {
+			&[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,6 +37,7 @@ 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}>
+					<div className={classes["right-side-content"]}>
 						{hasBackArrow && (
 							<div className={classes["back-arrow-desktop"]}>
 								<BackArrow url={backArrowUrl ?? ""} />
@@ -43,6 +45,8 @@ export default function DefaultDashboardWithList(props: IProps) {
 						)}
 						{children}
 					</div>
+					<Footer />
+				</div>
 			</div>
 			<Version />
 		</div>