🐛 Fixing responsive in an opened folder

src/front/Components/DesignSystem/UserFolder/DocumentList/index.tsx

@@ -3,6 +3,7 @@ import classes from "./classes.module.scss";
 import { Document } from "le-coffre-resources/dist/Customer";
 import Typography, { ITypo } from "../../Typography";
 import DocumentNotary from "../../Document/DocumentNotary";
+import classNames from "classnames";
 
 type IProps = {
 	title: string;
@@ -17,13 +18,15 @@ type IProps = {
 		| null;
 	openDeletionModal: (uid: Document["uid"]) => void;
 	folderUid: string;
+	className?: string;
 };
 type IState = {};
 
 export default class DocumentList extends React.Component<IProps, IState> {
 	public override render(): JSX.Element {
+		const classNameToAdd = this.props.className ? classNames(classes["root"], this.props.className) : classes["root"];
 		return (
-			<div className={classes["root"]}>
+			<div className={classNameToAdd}>
 				<div className={classes["title"]}>
 					<Typography typo={ITypo.P_SB_18}>{this.props.title}</Typography>
 				</div>
@@ -32,7 +35,12 @@ export default class DocumentList extends React.Component<IProps, IState> {
 					{this.props.documents &&
 						this.props.documents.map((document) => {
 							return (
-								<DocumentNotary folderUid={this.props.folderUid} document={document} key={document.uid} openDeletionModal={this.props.openDeletionModal} />
+								<DocumentNotary
+									folderUid={this.props.folderUid}
+									document={document}
+									key={document.uid}
+									openDeletionModal={this.props.openDeletionModal}
+								/>
 							);
 						})}
 				</div>

src/front/Components/DesignSystem/UserFolder/classes.module.scss

@@ -58,9 +58,13 @@
 			margin-top: 32px;
 
 			@media (max-width: $screen-s) {
-				grid-template-columns: 1fr;
 				gap: 32px;
+				display: flex;
+				flex-direction: column;
 			}
+
+			.documents-asked{
+				order: -1;
 			}
 
 			.button-container {
@@ -69,17 +73,8 @@
 				gap: 32px;
 				margin-top: 16px;
 
-			.button-desktop{
 				@media(max-width: $screen-s){
-					display: none;
+					order: -1;
-				}
-			}
-
-			.button-mobile{
-				display: none;
-
-				@media(max-width: $screen-s){
-					display: block;
 				}
 			}
 		}

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

@@ -1,9 +1,11 @@
 import ChevronIcon from "@Assets/Icons/chevron.svg";
 import PlusIcon from "@Assets/Icons/plus.svg";
+import Documents from "@Front/Api/LeCoffreApi/SuperAdmin/Documents/Documents";
 import { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
 import Module from "@Front/Config/Module";
 import classNames from "classnames";
 import Customer, { Document } from "le-coffre-resources/dist/Customer";
+import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
 import Image from "next/image";
 import Link from "next/link";
 import React from "react";
@@ -14,8 +16,6 @@ import QuantityProgressBar from "../QuantityProgressBar";
 import classes from "./classes.module.scss";
 import DocumentList from "./DocumentList";
 import UserFolderHeader from "./UserFolderHeader";
-import { EDocumentStatus } from "le-coffre-resources/dist/Customer/Document";
-import Documents from "@Front/Api/LeCoffreApi/SuperAdmin/Documents/Documents";
 
 type IProps = {
 	customer: Customer;
@@ -53,7 +53,8 @@ export default class UserFolder extends React.Component<IProps, IState> {
 		const otherDocuments: Document[] | null = this.getValidatedAndPendindDocuments();
 		const redirectPath = Module.getInstance()
 			.get()
-			.modules.pages.Folder.pages.AskDocument.props.path.replace("[folderUid]", this.props.folder.uid ?? "").replace("[customerUid]", this.props.customer.uid ?? "");
+			.modules.pages.Folder.pages.AskDocument.props.path.replace("[folderUid]", this.props.folder.uid ?? "")
+			.replace("[customerUid]", this.props.customer.uid ?? "");
 		return (
 			<div className={classes["root"]} data-opened={this.props.isOpened.toString()}>
 				<Confirm
@@ -68,11 +69,7 @@ export default class UserFolder extends React.Component<IProps, IState> {
 				</Confirm>
 
 				<div className={classes["header"]} onClick={this.changeUserFolder}>
-					<UserFolderHeader
+					<UserFolderHeader customer={this.props.customer} folder={this.props.folder} isArchived={this.props.isArchived} />
-						customer={this.props.customer}
-						folder={this.props.folder}
-						isArchived={this.props.isArchived}
-					/>
 					<Image
 						src={ChevronIcon}
 						alt="chevron open close"
@@ -94,6 +91,7 @@ export default class UserFolder extends React.Component<IProps, IState> {
 								title="Documents demandés"
 								openDeletionModal={this.openDeletionModal}
 								folderUid={this.props.folder.uid!}
+								className={classes["documents-asked"]}
 							/>
 							<DocumentList
 								documents={otherDocuments}
@@ -106,7 +104,6 @@ export default class UserFolder extends React.Component<IProps, IState> {
 								openDeletionModal={this.openDeletionModal}
 								folderUid={this.props.folder.uid!}
 							/>
-						</div>
 							{!this.props.isArchived && (
 								<div className={classes["button-container"]}>
 									<Link href={redirectPath}>
@@ -114,11 +111,13 @@ export default class UserFolder extends React.Component<IProps, IState> {
 											Demander un autre document{" "}
 										</Button>
 									</Link>
-								{<Button disabled={documentsAsked ? false : true} className={classes["button-desktop"]}>Envoyer un mail de demande de documents</Button>}
+									<Button disabled={documentsAsked ? false : true}>
-								{<Button disabled={documentsAsked ? false : true} className={classes["button-mobile"]}>Envoyer un mail de demande</Button>}
+										Envoyer un mail de demande
+									</Button>
 								</div>
 							)}
 						</div>
+					</div>
 				)}
 			</div>
 		);
@@ -172,7 +171,6 @@ export default class UserFolder extends React.Component<IProps, IState> {
 	// 	return this.props.customer.documents.filter((document) => !documentToExclude.includes(document));
 	// }
 
-
 	private changeUserFolder() {
 		this.props.onChange(this.props.customer.uid!);
 	}