From 7f23f71191d6311758bccb9a3425c5514d4dfcfb Mon Sep 17 00:00:00 2001
From: Sarah Donvito <sarah.donvito@pagopa.it>
Date: Fri, 22 Mar 2024 15:37:37 +0100
Subject: [PATCH 01/11] fix(PN-9620): wip on padding and margin on modals

---
 .../src/components/CodeModal/CodeModal.tsx      |  4 +++-
 .../src/components/PnDialog/PnDialog.tsx        | 11 +++--------
 .../src/components/PnDialog/PnDialogActions.tsx | 17 +++++++----------
 .../src/components/PnDialog/PnDialogContent.tsx |  8 ++------
 4 files changed, 15 insertions(+), 25 deletions(-)

diff --git a/packages/pn-commons/src/components/CodeModal/CodeModal.tsx b/packages/pn-commons/src/components/CodeModal/CodeModal.tsx
index f1594f8083..fca2ac4c5c 100644
--- a/packages/pn-commons/src/components/CodeModal/CodeModal.tsx
+++ b/packages/pn-commons/src/components/CodeModal/CodeModal.tsx
@@ -90,7 +90,9 @@ const CodeModal = memo(
         data-testid="codeDialog"
         disableEscapeKeyDown
       >
-        <DialogTitle id="dialog-title">{title}</DialogTitle>
+        <DialogTitle sx={{ pb: { xs: 2, sm: 2 } }} id="dialog-title">
+          {title}
+        </DialogTitle>
         <PnDialogContent>
           <DialogContentText id="dialog-description">{subtitle}</DialogContentText>
           <Divider sx={{ my: 2 }} />
diff --git a/packages/pn-commons/src/components/PnDialog/PnDialog.tsx b/packages/pn-commons/src/components/PnDialog/PnDialog.tsx
index eb0530ae0d..2e0805baff 100644
--- a/packages/pn-commons/src/components/PnDialog/PnDialog.tsx
+++ b/packages/pn-commons/src/components/PnDialog/PnDialog.tsx
@@ -1,16 +1,12 @@
-import { Children, cloneElement, isValidElement, useMemo } from 'react';
+import { Children, cloneElement, isValidElement } from 'react';
 
 import { Dialog, DialogProps, DialogTitle } from '@mui/material';
 
-import { useIsMobile } from '../../hooks';
 import { ReactComponent } from '../../models/PnDialog';
 import PnDialogActions from './PnDialogActions';
 import PnDialogContent from './PnDialogContent';
 
 const PnDialog: React.FC<DialogProps> = (props) => {
-  const isMobile = useIsMobile();
-  const paddingSize = useMemo(() => (isMobile ? 3 : 4), [isMobile]);
-
   const title: ReactComponent = Children.toArray(props.children).find(
     (child) => isValidElement(child) && child.type === DialogTitle
   );
@@ -18,7 +14,7 @@ const PnDialog: React.FC<DialogProps> = (props) => {
   const enrichedTitle = isValidElement(title)
     ? cloneElement(title, {
         ...title.props,
-        sx: { p: paddingSize, pb: 2, ...title.props.sx },
+        sx: { p: { xs: 3, sm: 4 }, pb: 2, ...title.props.sx },
       })
     : title;
 
@@ -26,11 +22,10 @@ const PnDialog: React.FC<DialogProps> = (props) => {
     (child) => isValidElement(child) && child.type === PnDialogContent
   );
 
-  const paddingTop = isMobile ? 3 : 4;
   const enrichedContent = isValidElement(content)
     ? cloneElement(content, {
         ...content.props,
-        sx: { pt: title ? 0 : paddingTop, ...content.props.sx },
+        sx: { pt: title ? 0 : { xs: 3, sm: 4 }, ...content.props.sx },
       })
     : content;
 
diff --git a/packages/pn-commons/src/components/PnDialog/PnDialogActions.tsx b/packages/pn-commons/src/components/PnDialog/PnDialogActions.tsx
index b8588a82e4..84533d5acd 100644
--- a/packages/pn-commons/src/components/PnDialog/PnDialogActions.tsx
+++ b/packages/pn-commons/src/components/PnDialog/PnDialogActions.tsx
@@ -1,4 +1,4 @@
-import { Children, cloneElement, isValidElement, useMemo } from 'react';
+import { Children, cloneElement, isValidElement } from 'react';
 
 import { Button, DialogActions, DialogActionsProps } from '@mui/material';
 
@@ -7,19 +7,16 @@ import { ReactComponent } from '../../models/PnDialog';
 
 const PnDialogActions: React.FC<DialogActionsProps> = (props) => {
   const isMobile = useIsMobile();
-  const paddingSize = useMemo(() => (isMobile ? 3 : 4), [isMobile]);
-  const gapSize = useMemo(() => (isMobile ? 0 : 1), [isMobile]);
 
   const buttons: Array<ReactComponent> | undefined = Children.toArray(props.children).filter(
     (child) => isValidElement(child) && child.type === Button
   );
 
-  const enrichedButtons = buttons.map((button, index) =>
+  const enrichedButtons = buttons.map((button) =>
     isValidElement(button)
       ? cloneElement(button, {
           ...button.props,
-          fullWidth: isMobile,
-          sx: { marginBottom: isMobile && index > 0 ? 2 : 0, ...button.props.sx },
+          sx: { marginBottom: { xs: 2, sm: 0 }, width: { xs: 1, sm: 'auto' }, ...button.props.sx },
         })
       : button
   );
@@ -30,10 +27,10 @@ const PnDialogActions: React.FC<DialogActionsProps> = (props) => {
       disableSpacing={isMobile}
       {...props}
       sx={{
-        flexDirection: isMobile ? 'column-reverse' : 'row',
-        p: paddingSize,
-        pt: 0,
-        gap: gapSize,
+        flexDirection: { xs: 'column-reverse', sm: 'row' },
+        p: { xs: 3, sm: 4 },
+        pt: { xs: 0, sm: 0 },
+        gap: { xs: 0, sm: 1 },
         ...props.sx,
       }}
     >
diff --git a/packages/pn-commons/src/components/PnDialog/PnDialogContent.tsx b/packages/pn-commons/src/components/PnDialog/PnDialogContent.tsx
index bfe82036ae..d62df09d4f 100644
--- a/packages/pn-commons/src/components/PnDialog/PnDialogContent.tsx
+++ b/packages/pn-commons/src/components/PnDialog/PnDialogContent.tsx
@@ -1,14 +1,10 @@
-import { Children, cloneElement, isValidElement, useMemo } from 'react';
+import { Children, cloneElement, isValidElement } from 'react';
 
 import { DialogContent, DialogContentProps, DialogContentText } from '@mui/material';
 
-import { useIsMobile } from '../../hooks';
 import { ReactComponent } from '../../models/PnDialog';
 
 const PnDialogContent: React.FC<DialogContentProps> = (props) => {
-  const isMobile = useIsMobile();
-  const paddingSize = useMemo(() => (isMobile ? 3 : 4), [isMobile]);
-
   const subtitle: ReactComponent = Children.toArray(props.children).find(
     (child) => isValidElement(child) && child.type === DialogContentText
   );
@@ -28,7 +24,7 @@ const PnDialogContent: React.FC<DialogContentProps> = (props) => {
     <DialogContent
       data-testid="dialog-content"
       {...props}
-      sx={{ p: paddingSize, pt: 0, ...props.sx }}
+      sx={{ p: { xs: 3, sm: 4 }, pt: 0, ...props.sx }}
     >
       {subtitle && enrichedSubTitle}
       {othersChildren}

From dd21291ff42f8fd0cf91a7c5be253be2dc4874f6 Mon Sep 17 00:00:00 2001
From: Sarah Donvito <sarah.donvito@pagopa.it>
Date: Fri, 22 Mar 2024 16:17:59 +0100
Subject: [PATCH 02/11] fix(PN-9620) wip on padding and margin of modals PF

---
 packages/pn-commons/src/components/SessionModal.tsx        | 2 +-
 .../components/Notifications/ConfirmCancellationDialog.tsx | 4 +++-
 .../components/Notifications/NotificationPaymentF24.tsx    | 4 +++-
 .../Notifications/NotificationRecipientsDetail.tsx         | 7 +++++--
 .../src/components/Contacts/CancelVerificationModal.tsx    | 2 +-
 .../src/components/Contacts/DigitalContactElem.tsx         | 4 +++-
 .../Contacts/DigitalContactsCodeVerification.context.tsx   | 4 ++--
 .../src/components/Contacts/CancelVerificationModal.tsx    | 2 +-
 .../src/components/Contacts/DigitalContactElem.tsx         | 4 +++-
 .../Contacts/DigitalContactsCodeVerification.context.tsx   | 4 ++--
 .../src/components/Deleghe/AcceptDelegationModal.tsx       | 2 +-
 .../src/components/Deleghe/ConfirmationModal.tsx           | 4 +++-
 12 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/packages/pn-commons/src/components/SessionModal.tsx b/packages/pn-commons/src/components/SessionModal.tsx
index c2c67ee2d2..8d396d2de6 100644
--- a/packages/pn-commons/src/components/SessionModal.tsx
+++ b/packages/pn-commons/src/components/SessionModal.tsx
@@ -66,7 +66,7 @@ const SessionModal: React.FC<Props> = ({
       aria-labelledby="session-dialog-title"
       data-testid="session-modal"
     >
-      <DialogTitle sx={{ textAlign: 'center' }}>{title}</DialogTitle>
+      <DialogTitle sx={{ textAlign: 'center', pb: { xs: 2, sm: 2 } }}>{title}</DialogTitle>
       <PnDialogContent>
         <DialogContentText id="session-dialog-description">{message}</DialogContentText>
       </PnDialogContent>
diff --git a/packages/pn-pa-webapp/src/components/Notifications/ConfirmCancellationDialog.tsx b/packages/pn-pa-webapp/src/components/Notifications/ConfirmCancellationDialog.tsx
index 1c17e8dd00..c677657afe 100644
--- a/packages/pn-pa-webapp/src/components/Notifications/ConfirmCancellationDialog.tsx
+++ b/packages/pn-pa-webapp/src/components/Notifications/ConfirmCancellationDialog.tsx
@@ -35,7 +35,9 @@ const ConfirmCancellationDialog: React.FC<Props> = ({ showModal, onClose, onConf
 
   return (
     <PnDialog open={showModal} data-testid="cancel-notification-modal">
-      <DialogTitle id="dialog-title">{t('detail.cancel-notification-modal.title')}</DialogTitle>
+      <DialogTitle sx={{ pb: { xs: 2, sm: 2 } }} id="dialog-title">
+        {t('detail.cancel-notification-modal.title')}
+      </DialogTitle>
       <PnDialogContent>
         <Typography data-testid="dialogText" component="p">
           {payment
diff --git a/packages/pn-pa-webapp/src/components/Notifications/NotificationPaymentF24.tsx b/packages/pn-pa-webapp/src/components/Notifications/NotificationPaymentF24.tsx
index 973d1a4236..0fac9cf252 100644
--- a/packages/pn-pa-webapp/src/components/Notifications/NotificationPaymentF24.tsx
+++ b/packages/pn-pa-webapp/src/components/Notifications/NotificationPaymentF24.tsx
@@ -28,7 +28,9 @@ const NotificationPaymentF24: React.FC<Props> = ({ iun, payments }) => {
         aria-labelledby="dialog-title"
         maxWidth="lg"
       >
-        <DialogTitle id="dialog-title">{t('payment.f24-dialog-title', { iun })}</DialogTitle>
+        <DialogTitle sx={{ pb: { xs: 2, sm: 2 } }} id="dialog-title">
+          {t('payment.f24-dialog-title', { iun })}
+        </DialogTitle>
         <PnDialogContent>
           {payments.map((payment, index) => (
             <Fragment key={`${payment.recIndex} - ${payment.attachmentIdx}`}>
diff --git a/packages/pn-pa-webapp/src/components/Notifications/NotificationRecipientsDetail.tsx b/packages/pn-pa-webapp/src/components/Notifications/NotificationRecipientsDetail.tsx
index 29b3ec76c3..48c9574a20 100644
--- a/packages/pn-pa-webapp/src/components/Notifications/NotificationRecipientsDetail.tsx
+++ b/packages/pn-pa-webapp/src/components/Notifications/NotificationRecipientsDetail.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react';
-import { Box, Button, DialogTitle, Grid, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
+
+import { Box, Button, DialogTitle, Grid, Typography } from '@mui/material';
 import {
   CollapsedList,
   NotificationDetailRecipient,
@@ -28,7 +29,9 @@ const NotificationRecipientsDetail: React.FC<Props> = ({ recipients, iun }) => {
         aria-labelledby="dialog-title"
         maxWidth="lg"
       >
-        <DialogTitle id="dialog-title">{t('detail.recipients-dialog-title', { iun })}</DialogTitle>
+        <DialogTitle sx={{ pb: { xs: 2, sm: 2 } }} id="dialog-title">
+          {t('detail.recipients-dialog-title', { iun })}
+        </DialogTitle>
         <PnDialogContent>
           {recipients.map((recipient) => (
             <Grid
diff --git a/packages/pn-personafisica-webapp/src/components/Contacts/CancelVerificationModal.tsx b/packages/pn-personafisica-webapp/src/components/Contacts/CancelVerificationModal.tsx
index 0fb6b19df4..e2ed488696 100644
--- a/packages/pn-personafisica-webapp/src/components/Contacts/CancelVerificationModal.tsx
+++ b/packages/pn-personafisica-webapp/src/components/Contacts/CancelVerificationModal.tsx
@@ -24,7 +24,7 @@ const CancelVerificationModal = ({ open, handleClose }: Props) => {
 
   return (
     <PnDialog open={open} onClose={handleClose} data-testid="cancelVerificationModal">
-      <DialogTitle id="dialog-title">
+      <DialogTitle sx={{ pb: { xs: 2, sm: 2 } }} id="dialog-title">
         {t('legal-contacts.validation-cancel-title', { ns: 'recapiti' })}
       </DialogTitle>
       <PnDialogContent>
diff --git a/packages/pn-personafisica-webapp/src/components/Contacts/DigitalContactElem.tsx b/packages/pn-personafisica-webapp/src/components/Contacts/DigitalContactElem.tsx
index 4498786e5f..75680aa92e 100644
--- a/packages/pn-personafisica-webapp/src/components/Contacts/DigitalContactElem.tsx
+++ b/packages/pn-personafisica-webapp/src/components/Contacts/DigitalContactElem.tsx
@@ -85,7 +85,9 @@ const DeleteDialog: React.FC<DialogProps> = ({
       aria-labelledby="dialog-title"
       aria-describedby="dialog-description"
     >
-      <DialogTitle id="dialog-title">{removeModalTitle}</DialogTitle>
+      <DialogTitle sx={{ pb: { xs: 2, sm: 2 } }} id="dialog-title">
+        {removeModalTitle}
+      </DialogTitle>
       <PnDialogContent>
         <DialogContentText id="dialog-description">{removeModalBody}</DialogContentText>
       </PnDialogContent>
diff --git a/packages/pn-personafisica-webapp/src/components/Contacts/DigitalContactsCodeVerification.context.tsx b/packages/pn-personafisica-webapp/src/components/Contacts/DigitalContactsCodeVerification.context.tsx
index fda51d20d5..3067a8b5fd 100644
--- a/packages/pn-personafisica-webapp/src/components/Contacts/DigitalContactsCodeVerification.context.tsx
+++ b/packages/pn-personafisica-webapp/src/components/Contacts/DigitalContactsCodeVerification.context.tsx
@@ -379,7 +379,7 @@ const DigitalContactsCodeVerificationProvider: FC<{ children?: ReactNode }> = ({
         aria-describedby="dialog-description"
         data-testid="duplicateDialog"
       >
-        <DialogTitle id="dialog-title">
+        <DialogTitle sx={{ pb: { xs: 2, sm: 2 } }} id="dialog-title">
           {t(`common.duplicate-contact-title`, { value: modalProps.value, ns: 'recapiti' })}
         </DialogTitle>
         <PnDialogContent>
@@ -401,7 +401,7 @@ const DigitalContactsCodeVerificationProvider: FC<{ children?: ReactNode }> = ({
         data-testid="validationDialog"
         aria-labelledby="dialog-title"
       >
-        <DialogTitle id="dialog-title">
+        <DialogTitle sx={{ pb: { xs: 2, sm: 2 } }} id="dialog-title">
           {t('legal-contacts.validation-progress-title', { ns: 'recapiti' })}
         </DialogTitle>
         <PnDialogContent>
diff --git a/packages/pn-personagiuridica-webapp/src/components/Contacts/CancelVerificationModal.tsx b/packages/pn-personagiuridica-webapp/src/components/Contacts/CancelVerificationModal.tsx
index 0fb6b19df4..e2ed488696 100644
--- a/packages/pn-personagiuridica-webapp/src/components/Contacts/CancelVerificationModal.tsx
+++ b/packages/pn-personagiuridica-webapp/src/components/Contacts/CancelVerificationModal.tsx
@@ -24,7 +24,7 @@ const CancelVerificationModal = ({ open, handleClose }: Props) => {
 
   return (
     <PnDialog open={open} onClose={handleClose} data-testid="cancelVerificationModal">
-      <DialogTitle id="dialog-title">
+      <DialogTitle sx={{ pb: { xs: 2, sm: 2 } }} id="dialog-title">
         {t('legal-contacts.validation-cancel-title', { ns: 'recapiti' })}
       </DialogTitle>
       <PnDialogContent>
diff --git a/packages/pn-personagiuridica-webapp/src/components/Contacts/DigitalContactElem.tsx b/packages/pn-personagiuridica-webapp/src/components/Contacts/DigitalContactElem.tsx
index 05d294a252..74c33693bc 100644
--- a/packages/pn-personagiuridica-webapp/src/components/Contacts/DigitalContactElem.tsx
+++ b/packages/pn-personagiuridica-webapp/src/components/Contacts/DigitalContactElem.tsx
@@ -87,7 +87,9 @@ const DeleteDialog: React.FC<DialogProps> = ({
       aria-labelledby="dialog-title"
       aria-describedby="dialog-description"
     >
-      <DialogTitle id="dialog-title">{removeModalTitle}</DialogTitle>
+      <DialogTitle sx={{ pb: { xs: 2, sm: 2 } }} id="dialog-title">
+        {removeModalTitle}
+      </DialogTitle>
       <PnDialogContent>
         <DialogContentText id="dialog-description">{removeModalBody}</DialogContentText>
       </PnDialogContent>
diff --git a/packages/pn-personagiuridica-webapp/src/components/Contacts/DigitalContactsCodeVerification.context.tsx b/packages/pn-personagiuridica-webapp/src/components/Contacts/DigitalContactsCodeVerification.context.tsx
index ab8782dbd1..699520fd95 100644
--- a/packages/pn-personagiuridica-webapp/src/components/Contacts/DigitalContactsCodeVerification.context.tsx
+++ b/packages/pn-personagiuridica-webapp/src/components/Contacts/DigitalContactsCodeVerification.context.tsx
@@ -326,7 +326,7 @@ const DigitalContactsCodeVerificationProvider: FC<{ children?: ReactNode }> = ({
         aria-describedby="dialog-description"
         data-testid="duplicateDialog"
       >
-        <DialogTitle id="dialog-title">
+        <DialogTitle sx={{ pb: { xs: 2, sm: 2 } }} id="dialog-title">
           {t(`common.duplicate-contact-title`, { value: modalProps.value, ns: 'recapiti' })}
         </DialogTitle>
         <PnDialogContent>
@@ -344,7 +344,7 @@ const DigitalContactsCodeVerificationProvider: FC<{ children?: ReactNode }> = ({
         </PnDialogActions>
       </PnDialog>
       <PnDialog open={pecValidationOpen} data-testid="validationDialog">
-        <DialogTitle id="dialog-title">
+        <DialogTitle sx={{ pb: { xs: 2, sm: 2 } }} id="dialog-title">
           {t('legal-contacts.validation-progress-title', { ns: 'recapiti' })}
         </DialogTitle>
         <PnDialogContent>
diff --git a/packages/pn-personagiuridica-webapp/src/components/Deleghe/AcceptDelegationModal.tsx b/packages/pn-personagiuridica-webapp/src/components/Deleghe/AcceptDelegationModal.tsx
index 2b1781d499..7bc929aede 100644
--- a/packages/pn-personagiuridica-webapp/src/components/Deleghe/AcceptDelegationModal.tsx
+++ b/packages/pn-personagiuridica-webapp/src/components/Deleghe/AcceptDelegationModal.tsx
@@ -147,7 +147,7 @@ const AcceptDelegationModal: React.FC<Props> = ({
       aria-describedby="dialog-description"
       data-testid="groupDialog"
     >
-      <DialogTitle id="dialog-title">
+      <DialogTitle sx={{ pb: { xs: 2, sm: 2 } }} id="dialog-title">
         {isEditMode ? t('deleghe.edit-groups-title') : t('deleghe.associate-groups-title')}
       </DialogTitle>
       <PnDialogContent>
diff --git a/packages/pn-personagiuridica-webapp/src/components/Deleghe/ConfirmationModal.tsx b/packages/pn-personagiuridica-webapp/src/components/Deleghe/ConfirmationModal.tsx
index 3a0141c226..ec0b62513c 100644
--- a/packages/pn-personagiuridica-webapp/src/components/Deleghe/ConfirmationModal.tsx
+++ b/packages/pn-personagiuridica-webapp/src/components/Deleghe/ConfirmationModal.tsx
@@ -31,7 +31,9 @@ export default function ConfirmationModal({
       aria-labelledby="responsive-dialog-title"
       data-testid="confirmationDialog"
     >
-      <DialogTitle id="dialog-title">{title}</DialogTitle>
+      <DialogTitle sx={{ pb: { xs: 2, sm: 2 } }} id="dialog-title">
+        {title}
+      </DialogTitle>
       <PnDialogContent>
         <DialogContentText id="dialog-description">{subtitle}</DialogContentText>
       </PnDialogContent>

From c99c175867ceb4733f98ecefa4b1737e2b2f269e Mon Sep 17 00:00:00 2001
From: Sarah Donvito <sarah.donvito@pagopa.it>
Date: Fri, 22 Mar 2024 16:47:07 +0100
Subject: [PATCH 03/11] fix(PN-9620): wip on padding and margin refactoring on
 modal

---
 packages/pn-commons/src/components/Prompt.tsx                | 2 +-
 packages/pn-pa-webapp/src/components/ApiKeys/ApiKeyModal.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/pn-commons/src/components/Prompt.tsx b/packages/pn-commons/src/components/Prompt.tsx
index 869f619b05..e9377b947e 100644
--- a/packages/pn-commons/src/components/Prompt.tsx
+++ b/packages/pn-commons/src/components/Prompt.tsx
@@ -40,7 +40,7 @@ const Prompt: React.FC<Props> = ({
   return (
     <>
       <PnDialog onClose={cancelNavigation} open={showPrompt} data-testid="promptDialog">
-        <DialogTitle>{title}</DialogTitle>
+        <DialogTitle sx={{ pb: { xs: 2, sm: 2 } }}>{title}</DialogTitle>
         <PnDialogContent>
           <DialogContentText>{message}</DialogContentText>
         </PnDialogContent>
diff --git a/packages/pn-pa-webapp/src/components/ApiKeys/ApiKeyModal.tsx b/packages/pn-pa-webapp/src/components/ApiKeys/ApiKeyModal.tsx
index 49b1cd6e8a..8dce71f136 100644
--- a/packages/pn-pa-webapp/src/components/ApiKeys/ApiKeyModal.tsx
+++ b/packages/pn-pa-webapp/src/components/ApiKeys/ApiKeyModal.tsx
@@ -25,7 +25,7 @@ const ApiKeyModal = ({
   actionHandler,
 }: ApiKeyModalProps) => (
   <PnDialog open onClose={closeModalHandler}>
-    {title && <DialogTitle>{title}</DialogTitle>}
+    {title && <DialogTitle sx={{ pb: { xs: 2, sm: 2 } }}>{title}</DialogTitle>}
     <PnDialogContent>
       {subTitle && !subTitleAtBottom && (
         <Typography

From 482639f25dae7bcd2ab4ed52aca4eeb29c2a3f12 Mon Sep 17 00:00:00 2001
From: Sarah Donvito <sarah.donvito@pagopa.it>
Date: Fri, 22 Mar 2024 18:29:56 +0100
Subject: [PATCH 04/11] fix(PN-9620): fix tests

---
 .../PnDialog/__test__/PnDialog.test.tsx       | 12 ++++++---
 .../__test__/PnDialogActions.test.tsx         | 27 +++++++++++++++----
 2 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/packages/pn-commons/src/components/PnDialog/__test__/PnDialog.test.tsx b/packages/pn-commons/src/components/PnDialog/__test__/PnDialog.test.tsx
index b43fc40e81..5e6ba6606e 100644
--- a/packages/pn-commons/src/components/PnDialog/__test__/PnDialog.test.tsx
+++ b/packages/pn-commons/src/components/PnDialog/__test__/PnDialog.test.tsx
@@ -9,8 +9,10 @@ describe('PnDialog Component', () => {
     window.matchMedia = createMatchMedia(2000);
     const { queryByTestId } = render(
       <PnDialog open>
-        <DialogTitle data-testid="dialog-title">Title</DialogTitle>
-        <PnDialogContent>
+        <DialogTitle sx={{ p: 4, pb: 2 }} data-testid="dialog-title">
+          Title
+        </DialogTitle>
+        <PnDialogContent sx={{ p: 4 }}>
           <div data-testid="dialog-other-content">Other content</div>
         </PnDialogContent>
       </PnDialog>
@@ -29,8 +31,10 @@ describe('PnDialog Component', () => {
     window.matchMedia = createMatchMedia(800);
     const { queryByTestId } = render(
       <PnDialog open>
-        <DialogTitle data-testid="dialog-title">Title</DialogTitle>
-        <PnDialogContent>
+        <DialogTitle sx={{ p: 3, pb: 2 }} data-testid="dialog-title">
+          Title
+        </DialogTitle>
+        <PnDialogContent sx={{ p: 3 }}>
           <div data-testid="dialog-other-content">Other content</div>
         </PnDialogContent>
       </PnDialog>
diff --git a/packages/pn-commons/src/components/PnDialog/__test__/PnDialogActions.test.tsx b/packages/pn-commons/src/components/PnDialog/__test__/PnDialogActions.test.tsx
index 7b4536bcd6..b737d9d38a 100644
--- a/packages/pn-commons/src/components/PnDialog/__test__/PnDialogActions.test.tsx
+++ b/packages/pn-commons/src/components/PnDialog/__test__/PnDialogActions.test.tsx
@@ -7,7 +7,14 @@ describe('PnDialogActions Component', () => {
   it('renders component - desktop', () => {
     window.matchMedia = createMatchMedia(2000);
     const { queryByTestId, queryAllByTestId } = render(
-      <PnDialogActions>
+      <PnDialogActions
+        sx={{
+          flexDirection: 'row',
+          p: 4,
+          pt: 0,
+          gap: 1,
+        }}
+      >
         <Button data-testid="button">Test confirm button</Button>
         <Button data-testid="button">Test cancel button</Button>
       </PnDialogActions>
@@ -28,9 +35,18 @@ describe('PnDialogActions Component', () => {
   it('renders component - mobile', () => {
     window.matchMedia = createMatchMedia(800);
     const { queryByTestId, queryAllByTestId } = render(
-      <PnDialogActions>
+      <PnDialogActions
+        sx={{
+          flexDirection: 'column-reverse',
+          p: 3,
+          pt: 0,
+          gap: 0,
+        }}
+      >
         <Button data-testid="button">Test confirm button</Button>
-        <Button data-testid="button">Test cancel button</Button>
+        <Button sx={{ marginBottom: 2, width: 1 }} data-testid="button">
+          Test cancel button
+        </Button>
       </PnDialogActions>
     );
 
@@ -41,8 +57,9 @@ describe('PnDialogActions Component', () => {
     const buttons = queryAllByTestId('button');
     expect(buttons).toHaveLength(2);
     buttons.forEach((button, index) => {
-      expect(button).toHaveClass('MuiButton-fullWidth');
-      expect(button).toHaveStyle(index === 0 ? 'margin-bottom: 0' : 'margin-bottom: 16px');
+      expect(button).toHaveStyle(
+        index === 0 ? 'margin-bottom: 0' : 'margin-bottom: 16px; width: 100%'
+      );
     });
   });
 });

From 136d55ba40de56bf4184f083ef2345a95cab3c77 Mon Sep 17 00:00:00 2001
From: Sarah Donvito <sarah.donvito@pagopa.it>
Date: Mon, 25 Mar 2024 11:19:48 +0100
Subject: [PATCH 05/11] fix(PN-9620): change request on components

---
 .../pn-commons/src/components/CodeModal/CodeModal.tsx     | 4 +---
 packages/pn-commons/src/components/PnDialog/PnDialog.tsx  | 2 +-
 .../src/components/PnDialog/PnDialogActions.tsx           | 8 ++++++--
 packages/pn-commons/src/components/Prompt.tsx             | 2 +-
 packages/pn-commons/src/components/SessionModal.tsx       | 2 +-
 .../pn-pa-webapp/src/components/ApiKeys/ApiKeyModal.tsx   | 2 +-
 .../Notifications/ConfirmCancellationDialog.tsx           | 4 +---
 .../components/Notifications/NotificationPaymentF24.tsx   | 4 +---
 .../Notifications/NotificationRecipientsDetail.tsx        | 4 +---
 .../src/components/Contacts/CancelVerificationModal.tsx   | 2 +-
 .../src/components/Contacts/DigitalContactElem.tsx        | 4 +---
 .../Contacts/DigitalContactsCodeVerification.context.tsx  | 4 ++--
 .../src/components/Contacts/CancelVerificationModal.tsx   | 2 +-
 .../src/components/Contacts/DigitalContactElem.tsx        | 4 +---
 .../Contacts/DigitalContactsCodeVerification.context.tsx  | 4 ++--
 .../src/components/Deleghe/AcceptDelegationModal.tsx      | 2 +-
 .../src/components/Deleghe/ConfirmationModal.tsx          | 4 +---
 17 files changed, 24 insertions(+), 34 deletions(-)

diff --git a/packages/pn-commons/src/components/CodeModal/CodeModal.tsx b/packages/pn-commons/src/components/CodeModal/CodeModal.tsx
index fca2ac4c5c..f1594f8083 100644
--- a/packages/pn-commons/src/components/CodeModal/CodeModal.tsx
+++ b/packages/pn-commons/src/components/CodeModal/CodeModal.tsx
@@ -90,9 +90,7 @@ const CodeModal = memo(
         data-testid="codeDialog"
         disableEscapeKeyDown
       >
-        <DialogTitle sx={{ pb: { xs: 2, sm: 2 } }} id="dialog-title">
-          {title}
-        </DialogTitle>
+        <DialogTitle id="dialog-title">{title}</DialogTitle>
         <PnDialogContent>
           <DialogContentText id="dialog-description">{subtitle}</DialogContentText>
           <Divider sx={{ my: 2 }} />
diff --git a/packages/pn-commons/src/components/PnDialog/PnDialog.tsx b/packages/pn-commons/src/components/PnDialog/PnDialog.tsx
index 2e0805baff..0b9292e1a2 100644
--- a/packages/pn-commons/src/components/PnDialog/PnDialog.tsx
+++ b/packages/pn-commons/src/components/PnDialog/PnDialog.tsx
@@ -14,7 +14,7 @@ const PnDialog: React.FC<DialogProps> = (props) => {
   const enrichedTitle = isValidElement(title)
     ? cloneElement(title, {
         ...title.props,
-        sx: { p: { xs: 3, sm: 4 }, pb: 2, ...title.props.sx },
+        sx: { p: { xs: 3, sm: 4 }, pb: { xs: 2, sm: 2 }, ...title.props.sx },
       })
     : title;
 
diff --git a/packages/pn-commons/src/components/PnDialog/PnDialogActions.tsx b/packages/pn-commons/src/components/PnDialog/PnDialogActions.tsx
index 84533d5acd..9877d88045 100644
--- a/packages/pn-commons/src/components/PnDialog/PnDialogActions.tsx
+++ b/packages/pn-commons/src/components/PnDialog/PnDialogActions.tsx
@@ -12,11 +12,15 @@ const PnDialogActions: React.FC<DialogActionsProps> = (props) => {
     (child) => isValidElement(child) && child.type === Button
   );
 
-  const enrichedButtons = buttons.map((button) =>
+  const enrichedButtons = buttons.map((button, index) =>
     isValidElement(button)
       ? cloneElement(button, {
           ...button.props,
-          sx: { marginBottom: { xs: 2, sm: 0 }, width: { xs: 1, sm: 'auto' }, ...button.props.sx },
+          sx: {
+            marginBottom: { xs: index > 0 ? 2 : 0, sm: 0 },
+            width: { xs: 1, sm: 'auto' },
+            ...button.props.sx,
+          },
         })
       : button
   );
diff --git a/packages/pn-commons/src/components/Prompt.tsx b/packages/pn-commons/src/components/Prompt.tsx
index e9377b947e..869f619b05 100644
--- a/packages/pn-commons/src/components/Prompt.tsx
+++ b/packages/pn-commons/src/components/Prompt.tsx
@@ -40,7 +40,7 @@ const Prompt: React.FC<Props> = ({
   return (
     <>
       <PnDialog onClose={cancelNavigation} open={showPrompt} data-testid="promptDialog">
-        <DialogTitle sx={{ pb: { xs: 2, sm: 2 } }}>{title}</DialogTitle>
+        <DialogTitle>{title}</DialogTitle>
         <PnDialogContent>
           <DialogContentText>{message}</DialogContentText>
         </PnDialogContent>
diff --git a/packages/pn-commons/src/components/SessionModal.tsx b/packages/pn-commons/src/components/SessionModal.tsx
index 8d396d2de6..c2c67ee2d2 100644
--- a/packages/pn-commons/src/components/SessionModal.tsx
+++ b/packages/pn-commons/src/components/SessionModal.tsx
@@ -66,7 +66,7 @@ const SessionModal: React.FC<Props> = ({
       aria-labelledby="session-dialog-title"
       data-testid="session-modal"
     >
-      <DialogTitle sx={{ textAlign: 'center', pb: { xs: 2, sm: 2 } }}>{title}</DialogTitle>
+      <DialogTitle sx={{ textAlign: 'center' }}>{title}</DialogTitle>
       <PnDialogContent>
         <DialogContentText id="session-dialog-description">{message}</DialogContentText>
       </PnDialogContent>
diff --git a/packages/pn-pa-webapp/src/components/ApiKeys/ApiKeyModal.tsx b/packages/pn-pa-webapp/src/components/ApiKeys/ApiKeyModal.tsx
index 8dce71f136..49b1cd6e8a 100644
--- a/packages/pn-pa-webapp/src/components/ApiKeys/ApiKeyModal.tsx
+++ b/packages/pn-pa-webapp/src/components/ApiKeys/ApiKeyModal.tsx
@@ -25,7 +25,7 @@ const ApiKeyModal = ({
   actionHandler,
 }: ApiKeyModalProps) => (
   <PnDialog open onClose={closeModalHandler}>
-    {title && <DialogTitle sx={{ pb: { xs: 2, sm: 2 } }}>{title}</DialogTitle>}
+    {title && <DialogTitle>{title}</DialogTitle>}
     <PnDialogContent>
       {subTitle && !subTitleAtBottom && (
         <Typography
diff --git a/packages/pn-pa-webapp/src/components/Notifications/ConfirmCancellationDialog.tsx b/packages/pn-pa-webapp/src/components/Notifications/ConfirmCancellationDialog.tsx
index c677657afe..1c17e8dd00 100644
--- a/packages/pn-pa-webapp/src/components/Notifications/ConfirmCancellationDialog.tsx
+++ b/packages/pn-pa-webapp/src/components/Notifications/ConfirmCancellationDialog.tsx
@@ -35,9 +35,7 @@ const ConfirmCancellationDialog: React.FC<Props> = ({ showModal, onClose, onConf
 
   return (
     <PnDialog open={showModal} data-testid="cancel-notification-modal">
-      <DialogTitle sx={{ pb: { xs: 2, sm: 2 } }} id="dialog-title">
-        {t('detail.cancel-notification-modal.title')}
-      </DialogTitle>
+      <DialogTitle id="dialog-title">{t('detail.cancel-notification-modal.title')}</DialogTitle>
       <PnDialogContent>
         <Typography data-testid="dialogText" component="p">
           {payment
diff --git a/packages/pn-pa-webapp/src/components/Notifications/NotificationPaymentF24.tsx b/packages/pn-pa-webapp/src/components/Notifications/NotificationPaymentF24.tsx
index 0fac9cf252..973d1a4236 100644
--- a/packages/pn-pa-webapp/src/components/Notifications/NotificationPaymentF24.tsx
+++ b/packages/pn-pa-webapp/src/components/Notifications/NotificationPaymentF24.tsx
@@ -28,9 +28,7 @@ const NotificationPaymentF24: React.FC<Props> = ({ iun, payments }) => {
         aria-labelledby="dialog-title"
         maxWidth="lg"
       >
-        <DialogTitle sx={{ pb: { xs: 2, sm: 2 } }} id="dialog-title">
-          {t('payment.f24-dialog-title', { iun })}
-        </DialogTitle>
+        <DialogTitle id="dialog-title">{t('payment.f24-dialog-title', { iun })}</DialogTitle>
         <PnDialogContent>
           {payments.map((payment, index) => (
             <Fragment key={`${payment.recIndex} - ${payment.attachmentIdx}`}>
diff --git a/packages/pn-pa-webapp/src/components/Notifications/NotificationRecipientsDetail.tsx b/packages/pn-pa-webapp/src/components/Notifications/NotificationRecipientsDetail.tsx
index 48c9574a20..f2284d9e51 100644
--- a/packages/pn-pa-webapp/src/components/Notifications/NotificationRecipientsDetail.tsx
+++ b/packages/pn-pa-webapp/src/components/Notifications/NotificationRecipientsDetail.tsx
@@ -29,9 +29,7 @@ const NotificationRecipientsDetail: React.FC<Props> = ({ recipients, iun }) => {
         aria-labelledby="dialog-title"
         maxWidth="lg"
       >
-        <DialogTitle sx={{ pb: { xs: 2, sm: 2 } }} id="dialog-title">
-          {t('detail.recipients-dialog-title', { iun })}
-        </DialogTitle>
+        <DialogTitle id="dialog-title">{t('detail.recipients-dialog-title', { iun })}</DialogTitle>
         <PnDialogContent>
           {recipients.map((recipient) => (
             <Grid
diff --git a/packages/pn-personafisica-webapp/src/components/Contacts/CancelVerificationModal.tsx b/packages/pn-personafisica-webapp/src/components/Contacts/CancelVerificationModal.tsx
index e2ed488696..0fb6b19df4 100644
--- a/packages/pn-personafisica-webapp/src/components/Contacts/CancelVerificationModal.tsx
+++ b/packages/pn-personafisica-webapp/src/components/Contacts/CancelVerificationModal.tsx
@@ -24,7 +24,7 @@ const CancelVerificationModal = ({ open, handleClose }: Props) => {
 
   return (
     <PnDialog open={open} onClose={handleClose} data-testid="cancelVerificationModal">
-      <DialogTitle sx={{ pb: { xs: 2, sm: 2 } }} id="dialog-title">
+      <DialogTitle id="dialog-title">
         {t('legal-contacts.validation-cancel-title', { ns: 'recapiti' })}
       </DialogTitle>
       <PnDialogContent>
diff --git a/packages/pn-personafisica-webapp/src/components/Contacts/DigitalContactElem.tsx b/packages/pn-personafisica-webapp/src/components/Contacts/DigitalContactElem.tsx
index 75680aa92e..4498786e5f 100644
--- a/packages/pn-personafisica-webapp/src/components/Contacts/DigitalContactElem.tsx
+++ b/packages/pn-personafisica-webapp/src/components/Contacts/DigitalContactElem.tsx
@@ -85,9 +85,7 @@ const DeleteDialog: React.FC<DialogProps> = ({
       aria-labelledby="dialog-title"
       aria-describedby="dialog-description"
     >
-      <DialogTitle sx={{ pb: { xs: 2, sm: 2 } }} id="dialog-title">
-        {removeModalTitle}
-      </DialogTitle>
+      <DialogTitle id="dialog-title">{removeModalTitle}</DialogTitle>
       <PnDialogContent>
         <DialogContentText id="dialog-description">{removeModalBody}</DialogContentText>
       </PnDialogContent>
diff --git a/packages/pn-personafisica-webapp/src/components/Contacts/DigitalContactsCodeVerification.context.tsx b/packages/pn-personafisica-webapp/src/components/Contacts/DigitalContactsCodeVerification.context.tsx
index 3067a8b5fd..fda51d20d5 100644
--- a/packages/pn-personafisica-webapp/src/components/Contacts/DigitalContactsCodeVerification.context.tsx
+++ b/packages/pn-personafisica-webapp/src/components/Contacts/DigitalContactsCodeVerification.context.tsx
@@ -379,7 +379,7 @@ const DigitalContactsCodeVerificationProvider: FC<{ children?: ReactNode }> = ({
         aria-describedby="dialog-description"
         data-testid="duplicateDialog"
       >
-        <DialogTitle sx={{ pb: { xs: 2, sm: 2 } }} id="dialog-title">
+        <DialogTitle id="dialog-title">
           {t(`common.duplicate-contact-title`, { value: modalProps.value, ns: 'recapiti' })}
         </DialogTitle>
         <PnDialogContent>
@@ -401,7 +401,7 @@ const DigitalContactsCodeVerificationProvider: FC<{ children?: ReactNode }> = ({
         data-testid="validationDialog"
         aria-labelledby="dialog-title"
       >
-        <DialogTitle sx={{ pb: { xs: 2, sm: 2 } }} id="dialog-title">
+        <DialogTitle id="dialog-title">
           {t('legal-contacts.validation-progress-title', { ns: 'recapiti' })}
         </DialogTitle>
         <PnDialogContent>
diff --git a/packages/pn-personagiuridica-webapp/src/components/Contacts/CancelVerificationModal.tsx b/packages/pn-personagiuridica-webapp/src/components/Contacts/CancelVerificationModal.tsx
index e2ed488696..0fb6b19df4 100644
--- a/packages/pn-personagiuridica-webapp/src/components/Contacts/CancelVerificationModal.tsx
+++ b/packages/pn-personagiuridica-webapp/src/components/Contacts/CancelVerificationModal.tsx
@@ -24,7 +24,7 @@ const CancelVerificationModal = ({ open, handleClose }: Props) => {
 
   return (
     <PnDialog open={open} onClose={handleClose} data-testid="cancelVerificationModal">
-      <DialogTitle sx={{ pb: { xs: 2, sm: 2 } }} id="dialog-title">
+      <DialogTitle id="dialog-title">
         {t('legal-contacts.validation-cancel-title', { ns: 'recapiti' })}
       </DialogTitle>
       <PnDialogContent>
diff --git a/packages/pn-personagiuridica-webapp/src/components/Contacts/DigitalContactElem.tsx b/packages/pn-personagiuridica-webapp/src/components/Contacts/DigitalContactElem.tsx
index 74c33693bc..05d294a252 100644
--- a/packages/pn-personagiuridica-webapp/src/components/Contacts/DigitalContactElem.tsx
+++ b/packages/pn-personagiuridica-webapp/src/components/Contacts/DigitalContactElem.tsx
@@ -87,9 +87,7 @@ const DeleteDialog: React.FC<DialogProps> = ({
       aria-labelledby="dialog-title"
       aria-describedby="dialog-description"
     >
-      <DialogTitle sx={{ pb: { xs: 2, sm: 2 } }} id="dialog-title">
-        {removeModalTitle}
-      </DialogTitle>
+      <DialogTitle id="dialog-title">{removeModalTitle}</DialogTitle>
       <PnDialogContent>
         <DialogContentText id="dialog-description">{removeModalBody}</DialogContentText>
       </PnDialogContent>
diff --git a/packages/pn-personagiuridica-webapp/src/components/Contacts/DigitalContactsCodeVerification.context.tsx b/packages/pn-personagiuridica-webapp/src/components/Contacts/DigitalContactsCodeVerification.context.tsx
index 699520fd95..ab8782dbd1 100644
--- a/packages/pn-personagiuridica-webapp/src/components/Contacts/DigitalContactsCodeVerification.context.tsx
+++ b/packages/pn-personagiuridica-webapp/src/components/Contacts/DigitalContactsCodeVerification.context.tsx
@@ -326,7 +326,7 @@ const DigitalContactsCodeVerificationProvider: FC<{ children?: ReactNode }> = ({
         aria-describedby="dialog-description"
         data-testid="duplicateDialog"
       >
-        <DialogTitle sx={{ pb: { xs: 2, sm: 2 } }} id="dialog-title">
+        <DialogTitle id="dialog-title">
           {t(`common.duplicate-contact-title`, { value: modalProps.value, ns: 'recapiti' })}
         </DialogTitle>
         <PnDialogContent>
@@ -344,7 +344,7 @@ const DigitalContactsCodeVerificationProvider: FC<{ children?: ReactNode }> = ({
         </PnDialogActions>
       </PnDialog>
       <PnDialog open={pecValidationOpen} data-testid="validationDialog">
-        <DialogTitle sx={{ pb: { xs: 2, sm: 2 } }} id="dialog-title">
+        <DialogTitle id="dialog-title">
           {t('legal-contacts.validation-progress-title', { ns: 'recapiti' })}
         </DialogTitle>
         <PnDialogContent>
diff --git a/packages/pn-personagiuridica-webapp/src/components/Deleghe/AcceptDelegationModal.tsx b/packages/pn-personagiuridica-webapp/src/components/Deleghe/AcceptDelegationModal.tsx
index 7bc929aede..2b1781d499 100644
--- a/packages/pn-personagiuridica-webapp/src/components/Deleghe/AcceptDelegationModal.tsx
+++ b/packages/pn-personagiuridica-webapp/src/components/Deleghe/AcceptDelegationModal.tsx
@@ -147,7 +147,7 @@ const AcceptDelegationModal: React.FC<Props> = ({
       aria-describedby="dialog-description"
       data-testid="groupDialog"
     >
-      <DialogTitle sx={{ pb: { xs: 2, sm: 2 } }} id="dialog-title">
+      <DialogTitle id="dialog-title">
         {isEditMode ? t('deleghe.edit-groups-title') : t('deleghe.associate-groups-title')}
       </DialogTitle>
       <PnDialogContent>
diff --git a/packages/pn-personagiuridica-webapp/src/components/Deleghe/ConfirmationModal.tsx b/packages/pn-personagiuridica-webapp/src/components/Deleghe/ConfirmationModal.tsx
index ec0b62513c..3a0141c226 100644
--- a/packages/pn-personagiuridica-webapp/src/components/Deleghe/ConfirmationModal.tsx
+++ b/packages/pn-personagiuridica-webapp/src/components/Deleghe/ConfirmationModal.tsx
@@ -31,9 +31,7 @@ export default function ConfirmationModal({
       aria-labelledby="responsive-dialog-title"
       data-testid="confirmationDialog"
     >
-      <DialogTitle sx={{ pb: { xs: 2, sm: 2 } }} id="dialog-title">
-        {title}
-      </DialogTitle>
+      <DialogTitle id="dialog-title">{title}</DialogTitle>
       <PnDialogContent>
         <DialogContentText id="dialog-description">{subtitle}</DialogContentText>
       </PnDialogContent>

From 1bbbe362970e1ebe42f1bd465277a66cf9ba163b Mon Sep 17 00:00:00 2001
From: Sarah Donvito <sarah.donvito@pagopa.it>
Date: Wed, 27 Mar 2024 17:35:26 +0100
Subject: [PATCH 06/11] fix(PN-9620): restore isMobile hook using parameter
 when needed

---
 .../src/components/PnDialog/PnDialog.tsx          |  7 +++++--
 .../src/components/PnDialog/PnDialogActions.tsx   | 15 +++++++--------
 .../src/components/PnDialog/PnDialogContent.tsx   |  4 +++-
 packages/pn-commons/src/hooks/useIsMobile.ts      |  6 +++---
 4 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/packages/pn-commons/src/components/PnDialog/PnDialog.tsx b/packages/pn-commons/src/components/PnDialog/PnDialog.tsx
index 0b9292e1a2..ecb1df33f7 100644
--- a/packages/pn-commons/src/components/PnDialog/PnDialog.tsx
+++ b/packages/pn-commons/src/components/PnDialog/PnDialog.tsx
@@ -2,11 +2,14 @@ import { Children, cloneElement, isValidElement } from 'react';
 
 import { Dialog, DialogProps, DialogTitle } from '@mui/material';
 
+import { useIsMobile } from '../../hooks';
 import { ReactComponent } from '../../models/PnDialog';
 import PnDialogActions from './PnDialogActions';
 import PnDialogContent from './PnDialogContent';
 
 const PnDialog: React.FC<DialogProps> = (props) => {
+  const isMobile = useIsMobile('sm');
+  const paddingSize = isMobile ? 3 : 4;
   const title: ReactComponent = Children.toArray(props.children).find(
     (child) => isValidElement(child) && child.type === DialogTitle
   );
@@ -14,7 +17,7 @@ const PnDialog: React.FC<DialogProps> = (props) => {
   const enrichedTitle = isValidElement(title)
     ? cloneElement(title, {
         ...title.props,
-        sx: { p: { xs: 3, sm: 4 }, pb: { xs: 2, sm: 2 }, ...title.props.sx },
+        sx: { p: paddingSize, pb: 2, ...title.props.sx },
       })
     : title;
 
@@ -25,7 +28,7 @@ const PnDialog: React.FC<DialogProps> = (props) => {
   const enrichedContent = isValidElement(content)
     ? cloneElement(content, {
         ...content.props,
-        sx: { pt: title ? 0 : { xs: 3, sm: 4 }, ...content.props.sx },
+        sx: { pt: title ? 0 : paddingSize, ...content.props.sx },
       })
     : content;
 
diff --git a/packages/pn-commons/src/components/PnDialog/PnDialogActions.tsx b/packages/pn-commons/src/components/PnDialog/PnDialogActions.tsx
index 9877d88045..713412cf95 100644
--- a/packages/pn-commons/src/components/PnDialog/PnDialogActions.tsx
+++ b/packages/pn-commons/src/components/PnDialog/PnDialogActions.tsx
@@ -6,8 +6,7 @@ import { useIsMobile } from '../../hooks';
 import { ReactComponent } from '../../models/PnDialog';
 
 const PnDialogActions: React.FC<DialogActionsProps> = (props) => {
-  const isMobile = useIsMobile();
-
+  const isMobile = useIsMobile('sm');
   const buttons: Array<ReactComponent> | undefined = Children.toArray(props.children).filter(
     (child) => isValidElement(child) && child.type === Button
   );
@@ -16,9 +15,9 @@ const PnDialogActions: React.FC<DialogActionsProps> = (props) => {
     isValidElement(button)
       ? cloneElement(button, {
           ...button.props,
+          fullWidth: isMobile,
           sx: {
-            marginBottom: { xs: index > 0 ? 2 : 0, sm: 0 },
-            width: { xs: 1, sm: 'auto' },
+            marginBottom: index > 0 && isMobile ? 2 : 0,
             ...button.props.sx,
           },
         })
@@ -31,10 +30,10 @@ const PnDialogActions: React.FC<DialogActionsProps> = (props) => {
       disableSpacing={isMobile}
       {...props}
       sx={{
-        flexDirection: { xs: 'column-reverse', sm: 'row' },
-        p: { xs: 3, sm: 4 },
-        pt: { xs: 0, sm: 0 },
-        gap: { xs: 0, sm: 1 },
+        flexDirection: isMobile ? 'column-reverse' : 'row',
+        p: isMobile ? 3 : 4,
+        pt: 0,
+        gap: isMobile ? 0 : 1,
         ...props.sx,
       }}
     >
diff --git a/packages/pn-commons/src/components/PnDialog/PnDialogContent.tsx b/packages/pn-commons/src/components/PnDialog/PnDialogContent.tsx
index d62df09d4f..4708956809 100644
--- a/packages/pn-commons/src/components/PnDialog/PnDialogContent.tsx
+++ b/packages/pn-commons/src/components/PnDialog/PnDialogContent.tsx
@@ -2,9 +2,11 @@ import { Children, cloneElement, isValidElement } from 'react';
 
 import { DialogContent, DialogContentProps, DialogContentText } from '@mui/material';
 
+import { useIsMobile } from '../../hooks';
 import { ReactComponent } from '../../models/PnDialog';
 
 const PnDialogContent: React.FC<DialogContentProps> = (props) => {
+  const isMobile = useIsMobile('sm');
   const subtitle: ReactComponent = Children.toArray(props.children).find(
     (child) => isValidElement(child) && child.type === DialogContentText
   );
@@ -24,7 +26,7 @@ const PnDialogContent: React.FC<DialogContentProps> = (props) => {
     <DialogContent
       data-testid="dialog-content"
       {...props}
-      sx={{ p: { xs: 3, sm: 4 }, pt: 0, ...props.sx }}
+      sx={{ p: isMobile ? 3 : 4, pt: 0, ...props.sx }}
     >
       {subtitle && enrichedSubTitle}
       {othersChildren}
diff --git a/packages/pn-commons/src/hooks/useIsMobile.ts b/packages/pn-commons/src/hooks/useIsMobile.ts
index 87f96bde76..da4b4e49fc 100644
--- a/packages/pn-commons/src/hooks/useIsMobile.ts
+++ b/packages/pn-commons/src/hooks/useIsMobile.ts
@@ -1,10 +1,10 @@
-import { useTheme } from '@mui/material';
+import { Breakpoint, useTheme } from '@mui/material';
 import useMediaQuery from '@mui/material/useMediaQuery';
 
 /**
  * Checks if we are on a mobile device
  */
-export const useIsMobile = () => {
+export const useIsMobile = (breakpoint: Breakpoint | number = 'lg') => {
   const theme = useTheme();
-  return useMediaQuery(theme.breakpoints.down('lg'));
+  return useMediaQuery(theme.breakpoints.down(breakpoint));
 };

From 56b0bb20b215fe0fa3612b0d37fc667f703e1abd Mon Sep 17 00:00:00 2001
From: Sarah Donvito <sarah.donvito@pagopa.it>
Date: Wed, 27 Mar 2024 17:37:24 +0100
Subject: [PATCH 07/11] fix(PN-9620): update tests

---
 .../components/PnDialog/__test__/PnDialog.test.tsx   | 12 ++++--------
 .../PnDialog/__test__/PnDialogActions.test.tsx       |  4 +---
 2 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/packages/pn-commons/src/components/PnDialog/__test__/PnDialog.test.tsx b/packages/pn-commons/src/components/PnDialog/__test__/PnDialog.test.tsx
index 5e6ba6606e..b43fc40e81 100644
--- a/packages/pn-commons/src/components/PnDialog/__test__/PnDialog.test.tsx
+++ b/packages/pn-commons/src/components/PnDialog/__test__/PnDialog.test.tsx
@@ -9,10 +9,8 @@ describe('PnDialog Component', () => {
     window.matchMedia = createMatchMedia(2000);
     const { queryByTestId } = render(
       <PnDialog open>
-        <DialogTitle sx={{ p: 4, pb: 2 }} data-testid="dialog-title">
-          Title
-        </DialogTitle>
-        <PnDialogContent sx={{ p: 4 }}>
+        <DialogTitle data-testid="dialog-title">Title</DialogTitle>
+        <PnDialogContent>
           <div data-testid="dialog-other-content">Other content</div>
         </PnDialogContent>
       </PnDialog>
@@ -31,10 +29,8 @@ describe('PnDialog Component', () => {
     window.matchMedia = createMatchMedia(800);
     const { queryByTestId } = render(
       <PnDialog open>
-        <DialogTitle sx={{ p: 3, pb: 2 }} data-testid="dialog-title">
-          Title
-        </DialogTitle>
-        <PnDialogContent sx={{ p: 3 }}>
+        <DialogTitle data-testid="dialog-title">Title</DialogTitle>
+        <PnDialogContent>
           <div data-testid="dialog-other-content">Other content</div>
         </PnDialogContent>
       </PnDialog>
diff --git a/packages/pn-commons/src/components/PnDialog/__test__/PnDialogActions.test.tsx b/packages/pn-commons/src/components/PnDialog/__test__/PnDialogActions.test.tsx
index b737d9d38a..f22065f80f 100644
--- a/packages/pn-commons/src/components/PnDialog/__test__/PnDialogActions.test.tsx
+++ b/packages/pn-commons/src/components/PnDialog/__test__/PnDialogActions.test.tsx
@@ -44,9 +44,7 @@ describe('PnDialogActions Component', () => {
         }}
       >
         <Button data-testid="button">Test confirm button</Button>
-        <Button sx={{ marginBottom: 2, width: 1 }} data-testid="button">
-          Test cancel button
-        </Button>
+        <Button data-testid="button">Test cancel button</Button>
       </PnDialogActions>
     );
 

From 7b46467640684d8cafb98746965d893d41bf1319 Mon Sep 17 00:00:00 2001
From: Sarah Donvito <sarah.donvito@pagopa.it>
Date: Wed, 27 Mar 2024 18:02:20 +0100
Subject: [PATCH 08/11] fix(PN-9620): fix tests

---
 .../src/components/CodeModal/__test__/CodeInput.test.tsx        | 2 +-
 .../src/components/PnDialog/__test__/PnDialog.test.tsx          | 2 +-
 .../src/components/PnDialog/__test__/PnDialogActions.test.tsx   | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/pn-commons/src/components/CodeModal/__test__/CodeInput.test.tsx b/packages/pn-commons/src/components/CodeModal/__test__/CodeInput.test.tsx
index 22b2a185e8..f59f4413af 100644
--- a/packages/pn-commons/src/components/CodeModal/__test__/CodeInput.test.tsx
+++ b/packages/pn-commons/src/components/CodeModal/__test__/CodeInput.test.tsx
@@ -105,7 +105,7 @@ describe('CodeInput Component', () => {
     act(() => (codeInputs[2] as HTMLInputElement).focus());
     await userEvent.keyboard('{Backspace}');
     await waitFor(() => {
-      expect(codeInputs[2]).toHaveValue('');
+      expect(codeInputs[2]).toBeEmptyDOMElement();
     });
   });
 
diff --git a/packages/pn-commons/src/components/PnDialog/__test__/PnDialog.test.tsx b/packages/pn-commons/src/components/PnDialog/__test__/PnDialog.test.tsx
index b43fc40e81..190e409d7c 100644
--- a/packages/pn-commons/src/components/PnDialog/__test__/PnDialog.test.tsx
+++ b/packages/pn-commons/src/components/PnDialog/__test__/PnDialog.test.tsx
@@ -26,7 +26,7 @@ describe('PnDialog Component', () => {
   });
 
   it('renders component - mobile', () => {
-    window.matchMedia = createMatchMedia(800);
+    window.matchMedia = createMatchMedia(500);
     const { queryByTestId } = render(
       <PnDialog open>
         <DialogTitle data-testid="dialog-title">Title</DialogTitle>
diff --git a/packages/pn-commons/src/components/PnDialog/__test__/PnDialogActions.test.tsx b/packages/pn-commons/src/components/PnDialog/__test__/PnDialogActions.test.tsx
index f22065f80f..2b1d7f19b5 100644
--- a/packages/pn-commons/src/components/PnDialog/__test__/PnDialogActions.test.tsx
+++ b/packages/pn-commons/src/components/PnDialog/__test__/PnDialogActions.test.tsx
@@ -33,7 +33,7 @@ describe('PnDialogActions Component', () => {
   });
 
   it('renders component - mobile', () => {
-    window.matchMedia = createMatchMedia(800);
+    window.matchMedia = createMatchMedia(500);
     const { queryByTestId, queryAllByTestId } = render(
       <PnDialogActions
         sx={{

From 7b234e63d090001a1969a88c0ca9d0476bfe7e69 Mon Sep 17 00:00:00 2001
From: Sarah Donvito <sarah.donvito@pagopa.it>
Date: Thu, 28 Mar 2024 09:22:19 +0100
Subject: [PATCH 09/11] fix(PN-9620): fix tests

---
 .../PnDialog/__test__/PnDialogActions.test.tsx | 18 ++----------------
 1 file changed, 2 insertions(+), 16 deletions(-)

diff --git a/packages/pn-commons/src/components/PnDialog/__test__/PnDialogActions.test.tsx b/packages/pn-commons/src/components/PnDialog/__test__/PnDialogActions.test.tsx
index 2b1d7f19b5..cefb46a00b 100644
--- a/packages/pn-commons/src/components/PnDialog/__test__/PnDialogActions.test.tsx
+++ b/packages/pn-commons/src/components/PnDialog/__test__/PnDialogActions.test.tsx
@@ -7,14 +7,7 @@ describe('PnDialogActions Component', () => {
   it('renders component - desktop', () => {
     window.matchMedia = createMatchMedia(2000);
     const { queryByTestId, queryAllByTestId } = render(
-      <PnDialogActions
-        sx={{
-          flexDirection: 'row',
-          p: 4,
-          pt: 0,
-          gap: 1,
-        }}
-      >
+      <PnDialogActions>
         <Button data-testid="button">Test confirm button</Button>
         <Button data-testid="button">Test cancel button</Button>
       </PnDialogActions>
@@ -35,14 +28,7 @@ describe('PnDialogActions Component', () => {
   it('renders component - mobile', () => {
     window.matchMedia = createMatchMedia(500);
     const { queryByTestId, queryAllByTestId } = render(
-      <PnDialogActions
-        sx={{
-          flexDirection: 'column-reverse',
-          p: 3,
-          pt: 0,
-          gap: 0,
-        }}
-      >
+      <PnDialogActions>
         <Button data-testid="button">Test confirm button</Button>
         <Button data-testid="button">Test cancel button</Button>
       </PnDialogActions>

From 986d3cdbbfd0e5cb0621d96a89b5f03973bce154 Mon Sep 17 00:00:00 2001
From: Sarah Donvito <sarah.donvito@pagopa.it>
Date: Thu, 28 Mar 2024 11:08:47 +0100
Subject: [PATCH 10/11] fix(PN-9620): restore toHaveValue('') in test

---
 .../src/components/CodeModal/__test__/CodeInput.test.tsx        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/pn-commons/src/components/CodeModal/__test__/CodeInput.test.tsx b/packages/pn-commons/src/components/CodeModal/__test__/CodeInput.test.tsx
index f59f4413af..22b2a185e8 100644
--- a/packages/pn-commons/src/components/CodeModal/__test__/CodeInput.test.tsx
+++ b/packages/pn-commons/src/components/CodeModal/__test__/CodeInput.test.tsx
@@ -105,7 +105,7 @@ describe('CodeInput Component', () => {
     act(() => (codeInputs[2] as HTMLInputElement).focus());
     await userEvent.keyboard('{Backspace}');
     await waitFor(() => {
-      expect(codeInputs[2]).toBeEmptyDOMElement();
+      expect(codeInputs[2]).toHaveValue('');
     });
   });
 

From 46e8a3d9b731d4d760c9e1df215e3f5fff5aebec Mon Sep 17 00:00:00 2001
From: Andrea Cimini <andrea.cimini@pagopa.it>
Date: Thu, 28 Mar 2024 15:16:35 +0100
Subject: [PATCH 11/11] fixed failing test

---
 .../__test__/ApiErrorWrapper.test.tsx         |  5 ++-
 .../CodeModal/__test__/CodeInput.test.tsx     | 40 +++++++++++++------
 2 files changed, 30 insertions(+), 15 deletions(-)

diff --git a/packages/pn-commons/src/components/ApiError/__test__/ApiErrorWrapper.test.tsx b/packages/pn-commons/src/components/ApiError/__test__/ApiErrorWrapper.test.tsx
index 1a79755dec..29c085db3c 100644
--- a/packages/pn-commons/src/components/ApiError/__test__/ApiErrorWrapper.test.tsx
+++ b/packages/pn-commons/src/components/ApiError/__test__/ApiErrorWrapper.test.tsx
@@ -16,6 +16,7 @@ vi.mock('../../../hooks', () => ({
 describe('ApiErrorWrapper', () => {
   const original = window.location;
   const reloadText = 'Ricarica';
+  const user = userEvent.setup();
 
   beforeAll(() => {
     Object.defineProperty(window, 'location', {
@@ -67,7 +68,7 @@ describe('ApiErrorWrapper', () => {
 
     const reloadItemComponent = screen.getByText(reloadText);
     expect(reloadItemComponent).toBeInTheDocument();
-    await userEvent.click(reloadItemComponent);
+    await user.click(reloadItemComponent);
 
     await waitFor(() => {
       expect(reloadActionMock).toHaveBeenCalled();
@@ -83,7 +84,7 @@ describe('ApiErrorWrapper', () => {
 
     const reloadItemComponent = screen.getByText(reloadText);
     expect(reloadItemComponent).toBeInTheDocument();
-    await userEvent.click(reloadItemComponent);
+    await user.click(reloadItemComponent);
 
     await waitFor(() => {
       expect(window.location.reload).toHaveBeenCalled();
diff --git a/packages/pn-commons/src/components/CodeModal/__test__/CodeInput.test.tsx b/packages/pn-commons/src/components/CodeModal/__test__/CodeInput.test.tsx
index 22b2a185e8..fe58883811 100644
--- a/packages/pn-commons/src/components/CodeModal/__test__/CodeInput.test.tsx
+++ b/packages/pn-commons/src/components/CodeModal/__test__/CodeInput.test.tsx
@@ -8,6 +8,8 @@ import CodeInput from '../CodeInput';
 const handleChangeMock = vi.fn();
 
 describe('CodeInput Component', () => {
+  const user = userEvent.setup();
+
   afterEach(() => {
     vi.clearAllMocks();
   });
@@ -82,7 +84,7 @@ describe('CodeInput Component', () => {
     await waitFor(() => {
       expect(handleChangeMock).toBeCalledTimes(2);
       // check focus on next elem
-      expect(codeInputs[3]).toBe(document.activeElement);
+      expect(codeInputs[3]).toHaveFocus();
     });
     // change the value of the input and check that it is updated correctly
     // set the cursor position to the end
@@ -90,20 +92,32 @@ describe('CodeInput Component', () => {
     (codeInputs[2] as HTMLInputElement).setSelectionRange(1, 1);
     // when we try to edit an input, we insert a second value and after, based on cursor position, we change the value
     // we must use userEvent because the keyboard event must trigger also the change event (fireEvent doesn't do that)
-    await userEvent.keyboard('4');
+    await user.keyboard('4');
+    // next element will be focused
+    await waitFor(() => {
+      expect(codeInputs[3]).toHaveFocus();
+    });
     await waitFor(() => {
       expect(codeInputs[2]).toHaveValue('4');
     });
     // move the cursor at the start of the input and try to edit again
     act(() => (codeInputs[2] as HTMLInputElement).focus());
     (codeInputs[2] as HTMLInputElement).setSelectionRange(0, 0);
-    await userEvent.keyboard('3');
+    await user.keyboard('3');
+    // next element will be focused
+    await waitFor(() => {
+      expect(codeInputs[3]).toHaveFocus();
+    });
     await waitFor(() => {
       expect(codeInputs[2]).toHaveValue('3');
     });
     // delete the value
     act(() => (codeInputs[2] as HTMLInputElement).focus());
-    await userEvent.keyboard('{Backspace}');
+    await user.keyboard('{Backspace}');
+    // previous element will be focused
+    await waitFor(() => {
+      expect(codeInputs[1]).toHaveFocus();
+    });
     await waitFor(() => {
       expect(codeInputs[2]).toHaveValue('');
     });
@@ -120,52 +134,52 @@ describe('CodeInput Component', () => {
     // press enter
     fireEvent.keyDown(codeInputs[0], { key: 'Enter', code: 'Enter' });
     await waitFor(() => {
-      expect(codeInputs[1]).toBe(document.activeElement);
+      expect(codeInputs[1]).toHaveFocus();
     });
     // press tab
     fireEvent.keyDown(codeInputs[1], { key: 'Tab', code: 'Tab' });
     await waitFor(() => {
-      expect(codeInputs[2]).toBe(document.activeElement);
+      expect(codeInputs[2]).toHaveFocus();
     });
     // press arrow right
     fireEvent.keyDown(codeInputs[2], { key: 'ArrowRight', code: 'ArrowRight' });
     await waitFor(() => {
-      expect(codeInputs[3]).toBe(document.activeElement);
+      expect(codeInputs[3]).toHaveFocus();
     });
     // press delete
     fireEvent.keyDown(codeInputs[3], { key: 'Delete', code: 'Delete' });
     await waitFor(() => {
-      expect(codeInputs[4]).toBe(document.activeElement);
+      expect(codeInputs[4]).toHaveFocus();
     });
     // press the same value of the input
     // we reach the end, so we have to lost the focus
     fireEvent.keyDown(codeInputs[4], { key: '1', code: 'Digit1' });
     await waitFor(() => {
-      expect(document.body).toBe(document.activeElement);
+      expect(document.body).toHaveFocus();
     });
     // focus on last input and moove back
     act(() => (codeInputs[4] as HTMLInputElement).focus());
     // press backspace
     fireEvent.keyDown(codeInputs[4], { key: 'Backspace', code: 'Backspace' });
     await waitFor(() => {
-      expect(codeInputs[3]).toBe(document.activeElement);
+      expect(codeInputs[3]).toHaveFocus();
     });
     // press arrow left
     fireEvent.keyDown(codeInputs[3], { key: 'ArrowLeft', code: 'ArrowLeft' });
     await waitFor(() => {
-      expect(codeInputs[2]).toBe(document.activeElement);
+      expect(codeInputs[2]).toHaveFocus();
     });
     // press tab and shift key
     fireEvent.keyDown(codeInputs[2], { key: 'Tab', code: 'Tab', shiftKey: true });
     await waitFor(() => {
-      expect(codeInputs[1]).toBe(document.activeElement);
+      expect(codeInputs[1]).toHaveFocus();
     });
     // focus on first element and try to go back
     act(() => (codeInputs[0] as HTMLInputElement).focus());
     fireEvent.keyDown(codeInputs[0], { key: 'Backspace', code: 'Backspace' });
     // nothing happens
     await waitFor(() => {
-      expect(codeInputs[0]).toBe(document.activeElement);
+      expect(codeInputs[0]).toHaveFocus();
     });
   });
 });