From 74f2d996ba3e975362acf208bb35a358e1fc1ddd Mon Sep 17 00:00:00 2001
From: Marco Pedone <m.pedone98@gmail.com>
Date: Tue, 16 Dec 2025 11:22:56 +0100
Subject: [PATCH] refactor: improve layout of document upload section in
 DocCheckpoint component

---
 .../components/servizio/modale_contatti.tsx   | 64 ++++++++++---------
 1 file changed, 33 insertions(+), 31 deletions(-)

diff --git a/apps/infoalloggi/src/components/servizio/modale_contatti.tsx b/apps/infoalloggi/src/components/servizio/modale_contatti.tsx
index 430173a..61d8dca 100644
--- a/apps/infoalloggi/src/components/servizio/modale_contatti.tsx
+++ b/apps/infoalloggi/src/components/servizio/modale_contatti.tsx
@@ -117,7 +117,7 @@ const DocCheckpoint = ({ setStep }: { setStep: (value: boolean) => void }) => {
 	return (
 		<>
 			<CredenzaBody className="max-h-[80vh] overflow-auto pb-5">
-				<div className="flex flex-col gap-4">
+				<div className="flex flex-col flex-wrap gap-4">
 					<div>
 						<p className="font-semibold">Carica i tuoi documenti</p>
 						<p>
@@ -126,37 +126,39 @@ const DocCheckpoint = ({ setStep }: { setStep: (value: boolean) => void }) => {
 						</p>
 					</div>
 
-					<DocumentiUploadSection
-						caricatoNote
-						document={servizio.doc_personale_fronte}
-						isAdmin={isAdmin}
-						isPending={isPending}
-						onRemove={() =>
-							mutate({
-								userId,
-								data: { doc_personale_fronte_ref: null },
-							})
-						}
-						onUpload={(id) => handleUpload("doc_personale_fronte_ref", id)}
-						title="Documento d'identità - Fronte"
-						userId={userId}
-					/>
+					<div className="flex flex-col flex-wrap justify-around gap-x-10 gap-y-4 sm:flex-row">
+						<DocumentiUploadSection
+							caricatoNote
+							document={servizio.doc_personale_fronte}
+							isAdmin={isAdmin}
+							isPending={isPending}
+							onRemove={() =>
+								mutate({
+									userId,
+									data: { doc_personale_fronte_ref: null },
+								})
+							}
+							onUpload={(id) => handleUpload("doc_personale_fronte_ref", id)}
+							title="Documento d'identità - Fronte"
+							userId={userId}
+						/>
 
-					<DocumentiUploadSection
-						caricatoNote
-						document={servizio.doc_personale_retro}
-						isAdmin={isAdmin}
-						isPending={isPending}
-						onRemove={() =>
-							mutate({
-								userId,
-								data: { doc_personale_retro_ref: null },
-							})
-						}
-						onUpload={(id) => handleUpload("doc_personale_retro_ref", id)}
-						title="Documento d'identità - Retro"
-						userId={userId}
-					/>
+						<DocumentiUploadSection
+							caricatoNote
+							document={servizio.doc_personale_retro}
+							isAdmin={isAdmin}
+							isPending={isPending}
+							onRemove={() =>
+								mutate({
+									userId,
+									data: { doc_personale_retro_ref: null },
+								})
+							}
+							onUpload={(id) => handleUpload("doc_personale_retro_ref", id)}
+							title="Documento d'identità - Retro"
+							userId={userId}
+						/>
+					</div>
 
 					<p className="text-muted-foreground text-sm">
 						I tuoi dati saranno conservati solamente per la durata del servizio,