🐛 almost fixing responsive

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

@@ -7,17 +7,18 @@
 	padding: 24px;
 	background-color: var(--grey-soft);
 	width: 100%;
-
+	gap: 32px;
 	.content {
 		width: 100%;
-		display: grid;
+		display: flex;
-		grid-template-columns: 1fr 1fr 1fr 1fr;
+		justify-content: space-between;
 
 		overflow: hidden;
 		white-space: nowrap;
 		text-overflow: ellipsis;
 
 		@media (max-width: $screen-ls) {
+			display: grid;
 			grid-template-columns: 1fr 1fr;
 			gap: 32px;
 		}

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

@@ -56,6 +56,11 @@
 			grid-template-columns: 1fr 1fr;
 			gap: 64px;
 			margin-top: 32px;
+
+			@media(max-width: $screen-s){
+				grid-template-columns: 1fr;
+				gap: 32px;
+			}
 		}
 
 		.button-container {
@@ -63,6 +68,20 @@
 			justify-items: start;
 			gap: 32px;
 			margin-top: 16px;
+
+			.button-desktop{
+				@media(max-width: $screen-s){
+					display: none;
+				}
+			}
+
+			.button-mobile{
+				display: none;
+
+				@media(max-width: $screen-s){
+					display: block;
+				}
+			}
 		}
 	}
 }

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

@@ -114,7 +114,8 @@ export default class UserFolder extends React.Component<IProps, IState> {
 										Demander un autre document{" "}
 									</Button>
 								</Link>
-								{<Button disabled={documentsAsked ? false : true}>Envoyer un mail de demande de documents</Button>}
+								{<Button disabled={documentsAsked ? false : true} className={classes["button-desktop"]}>Envoyer un mail de demande de documents</Button>}
+								{<Button disabled={documentsAsked ? false : true} className={classes["button-mobile"]}>Envoyer un mail de demande</Button>}
 							</div>
 						)}
 					</div>