Thulasizwe/bug/3557

shesha-reactjs/src/components/formDesigner/components/configurableFormItemLive.tsx

@@ -8,6 +8,7 @@ import { ConfigurableFormItemContext } from './configurableFormItemContext';
 import { ConfigurableFormItemForm } from './configurableFormItemForm';
 import { designerConstants } from '../utils/designerConstants';
 import { addPx } from '@/utils/style';
+import { useStyles } from './styles';
 
 export const ConfigurableFormItemLive: FC<IConfigurableFormItemProps> = ({
   children,
@@ -17,6 +18,7 @@ export const ConfigurableFormItemLive: FC<IConfigurableFormItemProps> = ({
   className,
   labelCol,
   wrapperCol,
+  autoAlignLabel = true,
 }) => {
   const { getPublicFormApi } = useShaFormInstance();
   const getFormData = getPublicFormApi().getFormData;
@@ -25,6 +27,7 @@ export const ConfigurableFormItemLive: FC<IConfigurableFormItemProps> = ({
   const shaForm = useShaFormInstance();
   const isInDesigner = shaForm.formMode === 'designer';
   const allData = useAvailableConstantsData();
+  const { styles } = useStyles({ autoAlignLabel, labelAlign: model.labelAlign });
 
   const layout = useMemo(() => {
     // Make sure the `wrapperCol` and `labelCol` from `FormItemProver` override the ones from the main form
@@ -55,7 +58,7 @@ export const ConfigurableFormItemLive: FC<IConfigurableFormItemProps> = ({
     : model.propertyName;
 
   const formItemProps: FormItemProps = {
-    className: classNames(className),
+    className: classNames(className, styles.formItem),
     label: hideLabel ? null : model.label,
     labelAlign: model.labelAlign,
     hidden: model.hidden,

shesha-reactjs/src/components/formDesigner/components/configurableFormItemSetting.tsx

@@ -12,9 +12,10 @@ export const ConfigurableFormItemSetting: FC<IConfigurableFormItemProps> = ({
   children,
   model,
   valuePropName,
+  autoAlignLabel = true,
 }) => {
   const { formData } = useShaFormInstance();
-  const { styles } = useStyles();
+  const { styles } = useStyles({ autoAlignLabel });
   if (model.hidden) return null;
 
   const { _mode: mode } = getPropertySettingsFromData(formData, model.propertyName);
@@ -56,6 +57,7 @@ export const ConfigurableFormItemSetting: FC<IConfigurableFormItemProps> = ({
       className={classNames(styles.settingsFormItem, "sha-js-label")}
       labelCol={{ span: 24 }}
       wrapperCol={{ span: 24 }}
+      autoAlignLabel={autoAlignLabel}
     >
       {(value, onChange) => {
         return (

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

@@ -18,4 +18,5 @@ export interface IConfigurableFormItemProps {
   wrapperCol?: ColProps;
   labelCol?: ColProps;
   hidden?: boolean;
+  autoAlignLabel?: boolean;
 }

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

@@ -1,11 +1,50 @@
 import { createStyles } from '@/styles';
 
-export const useStyles = createStyles(({ css, cx }) => {
+export const useStyles = createStyles(({ css, cx, token }, { autoAlignLabel = true }) => {
   const settingsFormItem = cx(css`
         margin: 0px !important;
   `);
 
+
+  const formItem = cx(css`
+        width: 100% !important;
+        margin-bottom: 0 !important;
+
+        .ant-row {
+            width: 100% !important;
+        }
+
+        .ant-form-item-row {
+            width: 100% !important;
+
+            > .ant-form-item-label {
+                ${autoAlignLabel ? `
+                  > label {
+                    height: 100%;
+                  }
+                ` : ''};
+            }
+        }
+
+        .ant-form-item-control {
+            width: 100% !important;
+            align-self: center;
+        }
+
+        .ant-form-item-control-input {
+            width: 100% !important;
+        }
+
+        .ant-form-item-control-input-content {
+            width: 100% !important;
+        }
+
+        &: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/mainLayout/styles/indexStyles.ts

@@ -77,10 +77,6 @@ export const GlobalSheshaStyles = createGlobalStyle`
   .${(p) => p.theme.prefixCls}-form-item-label  {
     white-space: normal;
     font-weight: bold;
-
-    > label {
-      height: auto !important; 
-    }
   }
 
   .${(p) => p.theme.prefixCls}-form-item {

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

@@ -237,6 +237,7 @@ export const useMainStyles = createStyles(({ css, cx, token, prefixCls, iconPref
         border-spacing: 0;
         display: inline-block;
         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

@@ -19,6 +19,7 @@ export const useStyles = createStyles(({ css, cx }) => {
             height: 100% !important;
             display: flex;
             flex-direction: column;
+
         }
 
         .jodit-workplace {

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

@@ -20,6 +20,7 @@
   const csDocEditor = 'sha-cs-doc-editor';
 
   const headerHeight = 60;
+  const tabCardHeight = 40;
 
   const configStudio = cx("sha-config-studio", css`
 
@@ -84,24 +85,33 @@
             }
         }
         .${csWorkArea}{
-            height: calc(100vh - ${headerHeight}px);
-            overflow: auto;
-            flex-grow: 1 !important;
-            .${csDocTabs}{
-                height: 100%;
-                >.ant-tabs-content-holder{
-                    height: 100%;
-                    ${sheshaStyles.thinScrollbars}
-                    >.ant-tabs-content{
-                        height: 100%;
-                        overflow: hidden;
-                    }
+             height: calc(100vh - ${headerHeight}px);
+             overflow: auto;
+             flex-grow: 1 !important;
+             .${csDocTabs}{
+                 height: 100%;
+                display: flex;
+                flex-direction: column;
+                >.ant-tabs-nav{
+                    flex: 0 0 auto;
                 }
-            }
-        }
-            .${csDocEditor}{
-                padding: 0;
-            }
+                 >.ant-tabs-content-holder{
+                    flex: 1 1 auto;
+                    min-height: 0;
+                     ${sheshaStyles.thinScrollbars}
+                     >.ant-tabs-content{
+                         height: 100%;
+                         overflow: hidden;
+                     }
+                 }
+             }
+         }
+         .${csDocEditor}{
+             padding: 0;
+             overflow: auto;
+            height: 100%;
+            min-height: 0;
+         }
   `);
 
   return {

shesha-reactjs/src/designer-components/attachmentsEditor/attachmentsEditor.tsx

@@ -201,7 +201,10 @@ const AttachmentsEditor: IToolboxComponent<IAttachmentsEditorProps> = {
     return (
       // Add GHOST_PAYLOAD_KEY to remove field from the payload
       // File list uses propertyName only for support Required feature
-      <ConfigurableFormItem model={{ ...model, propertyName: `${GHOST_PAYLOAD_KEY}_${model.id}` }}>
+      <ConfigurableFormItem
+        model={{ ...model, propertyName: `${GHOST_PAYLOAD_KEY}_${model.id}` }}
+        autoAlignLabel={false}
+      >
         {(value, onChange) => {
           const onFileListChanged = (fileList, isUserAction = false): void => {
             onChange(fileList);

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

@@ -43,7 +43,7 @@ const CheckboxGroupComponent: IToolboxComponent<IEnhancedICheckboxGoupProps, ICh
   }),
   Factory: ({ model, calculatedModel }) => {
     return (
-      <ConfigurableFormItem model={model}>
+      <ConfigurableFormItem model={model} autoAlignLabel={false}>
         {(value, onChange) => {
           const customEvents = calculatedModel.eventHandlers;
           const onChangeInternal = (e: any): void => {

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

@@ -8,6 +8,7 @@ import { ICheckboxGroupProps } from './utils';
 import { executeScriptSync } from '@/providers/form/utils';
 import { IAjaxResponse, isAjaxSuccessResponse } from '@/interfaces/ajaxResponse';
 import { ILabelValue } from '../dropdown/model';
+import { DEFAULT_MARGINS } from '@/components/formDesigner/utils/designerConstants';
 
 type RawOptionsPayload = ILabelValue<unknown>[] | { items: ILabelValue<unknown>[] };
 type FetchResponse = IAjaxResponse<RawOptionsPayload> | RawOptionsPayload;
@@ -79,6 +80,7 @@ const MultiCheckbox: FC<ICheckboxGroupProps> = (model) => {
       tabIndex={0}
       onFocus={(e) => model.onFocus?.({ ...e, target: { value: value, ...e.target } })}
       onBlur={(e) => model.onBlur?.({ ...e, target: { value: value, ...e.target } })}
+      style={{ margin: `${DEFAULT_MARGINS.vertical} ${DEFAULT_MARGINS.horizontal}` }}
     >
       <Checkbox.Group
         className="sha-multi-checkbox"

shesha-reactjs/src/designer-components/dateField/datePickerWrapper.tsx

@@ -39,7 +39,7 @@ export const DatePickerWrapper: FC<IDateFieldProps> = (props) => {
   const dateFormat = props?.dateFormat || getDataProperty(properties, name, 'dataFormat') || DATE_TIME_FORMATS.date;
   const timeFormat = props?.timeFormat || DATE_TIME_FORMATS.time;
   const { styles } = useStyles({ fullStyles: additionalStyles });
-  const finalStyles: CSSProperties = { ...additionalStyles, width: '100%', height: '100%' };
+  const finalStyles: CSSProperties = { ...additionalStyles };
 
   const { formData } = useForm();
 

shesha-reactjs/src/designer-components/link/index.tsx

@@ -16,6 +16,7 @@ const LinkComponent: LinkComponentDefinition = {
   type: 'link',
   isInput: false,
   name: 'link',
+  preserveDimensionsInDesigner: true,
   icon: <LinkOutlined />,
   calculateModel: (model, allData) => ({
     isDesignerMode: allData.form.formMode === 'designer',

shesha-reactjs/src/designer-components/radio/radio.tsx

@@ -32,9 +32,9 @@ const RadioComponent: RadioComponentDefinition = {
     dataSourceUrl: model.dataSourceUrl ? executeScriptSync(model.dataSourceUrl, allData) : model.dataSourceUrl,
     defaultValue: evaluateValue(model.defaultValue, allData.data),
   }),
-  Factory: ({ model, calculatedModel }) => {
+  Factory: ({ model, calculatedModel }) => {
     return (
-      <ConfigurableFormItem model={model}>
+      <ConfigurableFormItem model={model} autoAlignLabel={false}>
         {(value, onChange) => {
           const customEvents = calculatedModel.eventHandlers;
           const onChangeInternal = (e: any): void => {

shesha-reactjs/src/designer-components/richTextEditor/index.tsx

@@ -74,7 +74,7 @@ const RichTextEditorComponent: IToolboxComponent<IRichTextEditorProps> = {
     const rerenderKey = `${model?.placeholder || ''}-${model?.placeholder || false}`;
 
     return (
-      <ConfigurableFormItem model={model} key={rerenderKey}>
+      <ConfigurableFormItem model={model} autoAlignLabel={false} key={rerenderKey}>
         {(value, onChange) => (
           <RichTextEditor
             config={config}

shesha-reactjs/src/designer-components/styleLabel/styles.ts

@@ -25,9 +25,7 @@ export const useStyles = createStyles(({ css, cx, token }) => {
     `);
 
   const formItem = cx("", css`
-      .ant-form-item {
-        margin: 0px !important;
-      }
+
       .sha-js-label {
         margin: 0px !important;
       }

shesha-reactjs/src/designer-components/textArea/textArea.tsx

@@ -99,6 +99,7 @@ const TextAreaComponent: TextAreaComponentDefinition = {
     return (
       <ConfigurableFormItem
         model={model}
+        autoAlignLabel={false}
         initialValue={calculatedModel.defaultValue}
       >
         {(value, onChange) => {