✨ Responsive & select all optimized

src/front/Components/Layouts/Roles/RolesInformations/classes.module.scss

@@ -18,6 +18,10 @@
 			display: grid;
 			grid-template-columns: repeat(2, 1fr);
 			gap: 32px;
+
+			@media (max-width: $screen-m) {
+				grid-template-columns: 1fr;
+			}
 		}
 
 		.save-container {

src/front/Components/Layouts/Roles/RolesInformations/index.tsx

@@ -21,8 +21,9 @@ export default function RolesInformations(props: IProps) {
 
 	const [roleSelected, setRoleSelected] = useState<Role | null>(null);
 	const [rulesCheckboxes, setRulesCheckboxes] = useState<RuleCheckbox[]>([]);
-
+	const [selectAll, setSelectAll] = useState<boolean>(false);
 	useEffect(() => {
+		setSelectAll(false);
 		async function getUser() {
 			if (!roleUid) return;
 			const role = await Roles.getInstance().getByUid(roleUid as string, {
@@ -44,6 +45,9 @@ export default function RolesInformations(props: IProps) {
 				})
 				.sort((ruleA, ruleB) => (ruleA.name < ruleB.name ? 1 : -1))
 				.sort((rule) => (rule.checked ? -1 : 1));
+
+			const selectAll = rulesCheckboxes.every((rule) => rule.checked);
+			setSelectAll(selectAll);
 			setRulesCheckboxes(rulesCheckboxes);
 		}
 
@@ -52,6 +56,7 @@ export default function RolesInformations(props: IProps) {
 
 	const handleSelectAllChange = useCallback(
 		(e: React.ChangeEvent<HTMLInputElement>) => {
+			setSelectAll(e.target.checked);
 			const checked = e.target.checked;
 			rulesCheckboxes.forEach((rule) => (rule.checked = checked));
 			setRulesCheckboxes([...rulesCheckboxes]);
@@ -95,6 +100,7 @@ export default function RolesInformations(props: IProps) {
 							}}
 							toolTip="Tout sélectionner"
 							onChange={handleSelectAllChange}
+							checked={selectAll}
 						/>
 					</div>
 					<Form onSubmit={onSubmitHandler}>