css and checkbox veiw only fix

src/Components/PatientForm/PainAnalysisSection4.tsx

@@ -138,6 +138,7 @@ export default function PainAnalysisSection4({
     }));
   };
 
+  console.log("hsabdyhsx",patientDataDiplay)
   return (
     <>
       <Grid item xs={12} className='collapsable-form-style '>
@@ -182,35 +183,35 @@ export default function PainAnalysisSection4({
             <FormGroup sx={{ display: 'flex', flexDirection: 'row' }}>
               <FormControlLabel
                 control={
-                  <Checkbox onChange={handlePainWorseChange} name='Bending' />
+                  <Checkbox onChange={handlePainWorseChange} name='Bending' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorse.includes('Bending')}/>
                 }
                 label='Bending'
                 disabled={type == 'display'}
               />
               <FormControlLabel
                 control={
-                  <Checkbox onChange={handlePainWorseChange} name='Standing' />
+                  <Checkbox onChange={handlePainWorseChange} name='Standing' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorse.includes('Standing')}/>
                 }
                 label='Standing'
                 disabled={type == 'display'}
               />
               <FormControlLabel
                 control={
-                  <Checkbox onChange={handlePainWorseChange} name='Sitting' />
+                  <Checkbox onChange={handlePainWorseChange} name='Sitting' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorse.includes('Sitting')}/>
                 }
                 label='Sitting'
                 disabled={type == 'display'}
               />
               <FormControlLabel
                 control={
-                  <Checkbox onChange={handlePainWorseChange} name='Walking' />
+                  <Checkbox onChange={handlePainWorseChange} name='Walking' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorse.includes('Walking')}/>
                 }
                 label='Walking'
                 disabled={type == 'display'}
               />
               <FormControlLabel
                 control={
-                  <Checkbox onChange={handlePainWorseChange} name='Others' />
+                  <Checkbox onChange={handlePainWorseChange} name='Others' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorse.includes('Others')}/>
                 }
                 label='Others'
                 disabled={type == 'display'}
@@ -232,6 +233,7 @@ export default function PainAnalysisSection4({
                   <Checkbox
                     onChange={handlePainBetterChange}
                     name='laying down'
+                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painBetter.includes('laying down')}
                   />
                 }
                 label='laying down'
@@ -239,28 +241,28 @@ export default function PainAnalysisSection4({
               />
               <FormControlLabel
                 control={
-                  <Checkbox onChange={handlePainBetterChange} name='Standing' />
+                  <Checkbox onChange={handlePainBetterChange} name='Standing' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painBetter.includes('Standing')}/>
                 }
                 label='Standing'
                 disabled={type == 'display'}
               />
               <FormControlLabel
                 control={
-                  <Checkbox onChange={handlePainBetterChange} name='Sitting' />
+                  <Checkbox onChange={handlePainBetterChange} name='Sitting' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painBetter.includes('Sitting')}/>
                 }
                 label='Sitting'
                 disabled={type == 'display'}
               />
               <FormControlLabel
                 control={
-                  <Checkbox onChange={handlePainBetterChange} name='Walking' />
+                  <Checkbox onChange={handlePainBetterChange} name='Walking' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painBetter.includes('Walking')}/>
                 }
                 label='Walking'
                 disabled={type == 'display'}
               />
               <FormControlLabel
                 control={
-                  <Checkbox onChange={handlePainBetterChange} name='Others' />
+                  <Checkbox onChange={handlePainBetterChange} name='Others' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painBetter.includes('Others')}/>
                 }
                 label='Others'
                 disabled={type == 'display'}
@@ -279,17 +281,14 @@ export default function PainAnalysisSection4({
             <FormGroup sx={{ display: 'flex', flexDirection: 'row' }}>
               <FormControlLabel
                 control={
-                  <Checkbox onChange={handlePainQualityChange} name='sharp' />
+                  <Checkbox onChange={handlePainQualityChange} name='sharp' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painQuality.includes('Sharp')}/>
                 }
                 label='Sharp'
                 disabled={type == 'display'}
               />
               <FormControlLabel
                 control={
-                  <Checkbox
-                    onChange={handlePainQualityChange}
-                    name='Dull/Ache'
-                  />
+                  <Checkbox onChange={handlePainQualityChange} name='Dull/Ache' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painQuality.includes('Dull/Ache')}/>
                 }
                 label='Dull/Ache'
                 disabled={type == 'display'}
@@ -299,6 +298,7 @@ export default function PainAnalysisSection4({
                   <Checkbox
                     onChange={handlePainQualityChange}
                     name='Throbbing'
+                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painQuality.includes('Throbbing')}
                   />
                 }
                 label='Throbbing'
@@ -309,6 +309,7 @@ export default function PainAnalysisSection4({
                   <Checkbox
                     onChange={handlePainQualityChange}
                     name='Tingling/Numbness/Burning'
+                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painQuality.includes('Tingling/Numbness/Burning')}
                   />
                 }
                 label='Tingling/Numbness/Burning'
@@ -316,7 +317,7 @@ export default function PainAnalysisSection4({
               />
               <FormControlLabel
                 control={
-                  <Checkbox onChange={handlePainQualityChange} name='Others' />
+                  <Checkbox onChange={handlePainQualityChange} name='Others' defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painQuality.includes('Others')}/>
                 }
                 label='Others'
                 disabled={type == 'display'}
@@ -338,6 +339,7 @@ export default function PainAnalysisSection4({
                   <Checkbox
                     onChange={handlePainWorstTimeChange}
                     name='Morning'
+                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorstTime.includes('Morning')}
                   />
                 }
                 label='Morning'
@@ -348,6 +350,7 @@ export default function PainAnalysisSection4({
                   <Checkbox
                     onChange={handlePainWorstTimeChange}
                     name='During day'
+                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorstTime.includes('During day')}
                   />
                 }
                 label='During day'
@@ -358,6 +361,7 @@ export default function PainAnalysisSection4({
                   <Checkbox
                     onChange={handlePainWorstTimeChange}
                     name='Evening'
+                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorstTime.includes('Evening')}
                   />
                 }
                 label='Evening'
@@ -368,6 +372,7 @@ export default function PainAnalysisSection4({
                   <Checkbox
                     onChange={handlePainWorstTimeChange}
                     name='Lying in bed'
+                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorstTime.includes('Lying in bed')}
                   />
                 }
                 label='Lying in bed'
@@ -378,6 +383,7 @@ export default function PainAnalysisSection4({
                   <Checkbox
                     onChange={handlePainWorstTimeChange}
                     name='Others'
+                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.painWorstTime.includes('Others')}
                   />
                 }
                 label='Others'
@@ -454,6 +460,7 @@ export default function PainAnalysisSection4({
                   <Checkbox
                     onChange={handleCurrentComplaintIssuesTimeChange}
                     name='Muscle weakness'
+                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.currentComplaintIssues.includes('Muscle weakness')}
                   />
                 }
                 label='Muscle weakness'
@@ -464,6 +471,7 @@ export default function PainAnalysisSection4({
                   <Checkbox
                     onChange={handleCurrentComplaintIssuesTimeChange}
                     name='Bowel/Bladder problem'
+                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.currentComplaintIssues.includes('Bowel/Bladder problem')}
                   />
                 }
                 label='Bowel/Bladder problem'
@@ -474,6 +482,7 @@ export default function PainAnalysisSection4({
                   <Checkbox
                     onChange={handleCurrentComplaintIssuesTimeChange}
                     name='Digestion'
+                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.currentComplaintIssues.includes('Digestion')}
                   />
                 }
                 label='Digestion'
@@ -484,6 +493,7 @@ export default function PainAnalysisSection4({
                   <Checkbox
                     onChange={handleCurrentComplaintIssuesTimeChange}
                     name='Cardiac/Respiratory'
+                    defaultChecked={type=='display' && patientDataDiplay && patientDataDiplay.currentComplaintIssues.includes('Cardiac/Respiratory')}
                   />
                 }
                 label='Cardiac/Respiratory'

src/Components/PatientForm/PatientForm.tsx

@@ -426,7 +426,7 @@ export default function PatientForm({ type }: Props) {
       )}
       <Paper elevation={0} className='app-screen-constants'>
         <Header />
-        <Paper elevation={0} sx={{ margin: 4, minHeight: 550 }}>
+        <Paper elevation={0} sx={{ margin: '2%', minHeight: 550 }}>
           {/* <form onSubmit={handleSubmit}> */}
           <Typography sx={{ fontSize: 20 }} gutterBottom>
             Confidential Patient Information