refactor: update styles for consistency and responsiveness

- Enhanced form item styles in formDesigner for better alignment and responsiveness.
- Adjusted default margins in designerConstants for a cleaner layout.
- Updated ReactTable styles to ensure full width and proper box-sizing.
- Removed unnecessary margin from MultiCheckbox component for improved spacing.

Author: czwe-01

shesha-reactjs/src/components/formDesigner/components/styles.ts

@@ -3,35 +3,52 @@ import { createStyles } from '@/styles';
 export interface UseStylesProps {
   autoAlignLabel?: boolean;
 }
-export const useStyles = createStyles(({ css, cx }, { autoAlignLabel = true }) => {
+export const useStyles = createStyles(({ css, cx, token }, { autoAlignLabel = true }) => {
   const settingsFormItem = cx(css`
         margin: 0px !important;
   `);
 
   const formItem = cx(css`
-    --ant-form-item-margin-bottom: 0px !important;
-    position: relative;
-    height: auto;
-    
-    .ant-form-item-row {
-        height: 100%;
-        width: 100%;
 
-      >.ant-form-item-label  {
-        ${autoAlignLabel ? 'margin: auto 0;' : 'margin: unset;'};
-      }
-    }
+        .ant-row {
+            width: 100% !important;
+            height: 100% !important;
+        }
+        .ant-form-item {
+            width: 100% !important;
+            height: 100% !important;
+            margin-bottom: 0 !important;
+           
+            .ant-form-item-row {
+                width: 100% !important;
+                height: 100% !important;
+
+                >.ant-form-item-label  {
+                ${autoAlignLabel ? 'margin: auto 0;' : 'margin: unset;'};
+              }
+            }
+           
+            .ant-form-item-control {
+                width: 100% !important;
+                height: 100% !important;
+            }
+           
+            .ant-form-item-control-input {
+                width: 100% !important;
+                height: 100% !important;
+            }
+           
+            .ant-form-item-control-input-content {
+                width: 100% !important;
+                height: 100% !important;
+            }
+        }
 
-        .ant-form-item-additional {
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            transform: translateY(100%);
-            z-index: 1;
+        :hover {
+            border-color: ${token.colorPrimary} !important;
         }
-    }
-`);
+
+  `);
   return {
     formItem,
     settingsFormItem,

shesha-reactjs/src/components/formDesigner/utils/designerConstants.ts

@@ -36,8 +36,8 @@ export const designerConstants = {
   DEFAULT_FORM_ITEM_MARGINS: {
     top: '5px',
     bottom: '5px',
-    left: '3px',
-    right: '3px',
+    left: '0px',
+    right: '0px',
   } as const,
 
   /**
@@ -48,7 +48,7 @@ export const designerConstants = {
    */
   DEFAULT_MARGINS: {
     vertical: '5px',
-    horizontal: '3px',
+    horizontal: '0px',
   } as const,
 
   /**

shesha-reactjs/src/components/reactTable/styles/styles.ts

@@ -236,7 +236,8 @@ export const useMainStyles = createStyles(({ css, cx, token, prefixCls, iconPref
       .${shaTable} {
         border-spacing: 0;
         display: inline-block;
-        min-width: calc(100% - 2px);
+        min-width: 100%;
+        box-sizing: border-box;
         
         /* Background applied to table ensures it covers all rows when scrolling with freezeHeaders */
         ${backgroundColor ? `background: ${backgroundColor};` : 'background: white;'}

shesha-reactjs/src/components/richTextEditor/styles/styles.ts

@@ -20,9 +20,6 @@ export const useStyles = createStyles(({ css, cx }) => {
             display: flex;
             flex-direction: column;
 
-            .jodit-toolbar__box {
-             z-index: 2;
-            }
         }
 
         .jodit-workplace {

shesha-reactjs/src/configuration-studio/styles.ts

@@ -100,11 +100,11 @@ export const useStyles = createStyles(({ css, cx, token, prefixCls, iconPrefixCl
                 }
             }
         }
-            .${csDocEditor}{
-                padding: 0;
-                overflow: auto;
-                height: calc(100vh - ${headerHeight}px - ${tabCardHeight}px);
-            }
+        .${csDocEditor}{
+            padding: 0;
+            overflow: auto;
+            height: calc(100vh - ${headerHeight}px - ${tabCardHeight}px);
+        }
   `);
 
   return {

shesha-reactjs/src/designer-components/checkboxGroup/multiCheckbox.tsx

@@ -72,7 +72,6 @@ const MultiCheckbox: FC<ICheckboxGroupProps> = (model) => {
     flexDirection: direction === 'vertical' ? 'column' : 'row',
     flexWrap: direction === 'vertical' ? 'nowrap' : 'wrap',
     gap: '8px',
-    marginTop: '5px',
   };
 
   return (