fixed resolution

ipi-survey-platform/src/pages/Admin/configuration/CompanyProfile.jsx

@@ -983,99 +983,96 @@ const CompanyProfile = () => {
         );
       case 1:
     return (
-  <div className="space-y-4">
-    <div className="space-y-2">
-      <h4 className="text-[16px] font-semibold text-[#232528]">
-        Details
-      </h4>
+ <div className="space-y-4">
+  <div className="space-y-2">
 
-<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4 items-start">
+    <h4 className="text-[16px] font-semibold text-[#232528]">Details</h4>
 
+    {/* Responsive grid */}
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-2 w-full overflow-x-hidden" style={{
+      msOverflowStyle: 'none',  /* IE and Edge */
+      scrollbarWidth: 'none',   /* Firefox */
+    }}>
+      <div>
         <TextField
           label="Permanent Factory Code"
           value={form.permanentFactoryCode}
           onChange={handleFormChange('permanentFactoryCode')}
           placeholder="Enter Factory Code"
-          width="100%"
+          className="w-full"
           readOnly={modalMode === 'view'}
         />
+      </div>
 
+      <div>
         <TextField
           label="Unique License Number"
           value={form.uniqueLicenseNumber}
           onChange={handleFormChange('uniqueLicenseNumber')}
           placeholder="Enter License Number"
-          width="100%"
+          className="w-full"
           required
           error={fieldErrors.uniqueLicenseNumber}
           readOnly={modalMode === 'view'}
         />
+      </div>
 
+      <div>
         <TextField
-          label="Industry Code (Business Register)"
+          label="Industry Code(Business Register)"
           value={form.industryCodeBusiness}
           onChange={handleFormChange('industryCodeBusiness')}
           placeholder="Enter Code"
-          width="100%"
-          // required
+          className="w-full"
           error={fieldErrors.industryCodeBusiness}
           readOnly={modalMode === 'view'}
         />
+      </div>
 
+      <div>
         <TextField
-          label="Industry Code (Current Production)"
+          label="Industry Code(Current Production)"
           value={form.industryCodeProduction}
           onChange={handleFormChange('industryCodeProduction')}
           placeholder="Enter Code"
-          width="100%"
+          className="w-full"
           required
           error={fieldErrors.industryCodeProduction}
           readOnly={modalMode === 'view'}
         />
       </div>
+    </div>
 
-      {/* Description Field */}
-      <div className="mt-4">
+    <div className="mt-4 w-full" style={{ width: 'calc(100% - 1px)' }}>
+      <TextField
+        label="Description"
+        value={form.industryDescription}
+        onChange={handleFormChange('industryDescription')}
+        placeholder="Enter Description"
+        className="w-full"
+        readOnly={modalMode === 'view'}
+      />
+    </div>
+
+    {form.industryCodeProduction && form.industryCodeBusiness != null && form.industryCodeBusiness !== form.industryCodeProduction && (
+      <div className="mt-4 w-full" style={{ width: 'calc(100% - 1px)' }}>
         <TextField
-          label="Description"
-          value={form.industryDescription}
-          onChange={handleFormChange('industryDescription')}
-          placeholder="Enter Description"
-          width="100%"
-          style={{ height: '72px' }}
+          label="Remarks"
+          value={form.industryCodeMismatchRemarks}
+          onChange={handleFormChange('industryCodeMismatchRemarks')}
+          placeholder="Enter remarks for industry code mismatch"
+          className="w-full"
+          multiline
+          rows={3}
           readOnly={modalMode === 'view'}
         />
       </div>
+    )}
 
-      {/* Show Remarks ONLY IF Current Production code is filled AND different from Business Register */}
-      {form.industryCodeProduction && form.industryCodeBusiness !== form.industryCodeProduction && (
-        <div className="mt-4">
-          <TextField
-            label="Remarks"
-            value={form.industryCodeMismatchRemarks}
-            onChange={handleFormChange('industryCodeMismatchRemarks')}
-            placeholder="Enter remarks for industry code mismatch"
-            width="100%"
-            multiline
-            rows={3}
-            readOnly={modalMode === 'view'}
-          />
-          {/* <div className="mt-2">
-            <TextField
-              label="Industry Description"
-              value={form.industryDescription}
-              onChange={handleFormChange('industryDescription')}
-              placeholder="Enter industry description"
-              width="100%"
-              multiline
-              rows={2}
-            />
-          </div> */}
-        </div>
-      )}
-
-    </div>
   </div>
+</div>
+
+
 );
       case 2:
         return (