diff --git a/shesha-reactjs/src/components/dataTable/index.tsx b/shesha-reactjs/src/components/dataTable/index.tsx
index 09357e9303..a4b259c636 100644
--- a/shesha-reactjs/src/components/dataTable/index.tsx
+++ b/shesha-reactjs/src/components/dataTable/index.tsx
@@ -54,6 +54,7 @@ import { getCellStyleAccessor } from './utils';
 import { isPropertiesArray } from '@/interfaces/metadata';
 import { IBeforeRowReorderArguments, IAfterRowReorderArguments } from '@/designer-components/dataTable/tableContext/models';
 import { StandaloneTable } from '@/designer-components/dataTable/table/standaloneTable';
+import { IDimensionsValue } from '@/designer-components/_settings/utils/index';
 
 export interface IIndexTableOptions {
   omitClick?: boolean;
@@ -137,6 +138,7 @@ export interface IIndexTableProps extends IShaDataTableProps, TableProps {
 
   // Overall table styling
   boxShadow?: string;
+  dimensions?: IDimensionsValue;
   sortableIndicatorColor?: string;
 }
 
@@ -200,6 +202,7 @@ export const DataTable: FC<Partial<IIndexTableProps>> = ({
   rowBorder,
   rowBorderStyle,
   boxShadow,
+  dimensions,
   sortableIndicatorColor,
   bodyFontFamily,
   bodyFontSize,
@@ -1007,6 +1010,7 @@ export const DataTable: FC<Partial<IIndexTableProps>> = ({
     rowBorder,
     rowBorderStyle,
     boxShadow,
+    dimensions,
     sortableIndicatorColor,
 
     onRowClickAction: onRowClick,
diff --git a/shesha-reactjs/src/components/reactTable/index.tsx b/shesha-reactjs/src/components/reactTable/index.tsx
index d91ff3e910..5b3e89a607 100644
--- a/shesha-reactjs/src/components/reactTable/index.tsx
+++ b/shesha-reactjs/src/components/reactTable/index.tsx
@@ -115,6 +115,7 @@ export const ReactTable: FC<IReactTableProps> = ({
   rowBorder,
   rowBorderStyle,
   boxShadow,
+  dimensions,
   sortableIndicatorColor,
   striped,
   cellBorderColor,
@@ -156,6 +157,7 @@ export const ReactTable: FC<IReactTableProps> = ({
     rowHoverBackgroundColor,
     rowSelectedBackgroundColor,
     border,
+    dimensions,
     backgroundColor,
     headerFontFamily,
     headerFontSize,
diff --git a/shesha-reactjs/src/components/reactTable/interfaces.ts b/shesha-reactjs/src/components/reactTable/interfaces.ts
index d9838de526..7009542949 100644
--- a/shesha-reactjs/src/components/reactTable/interfaces.ts
+++ b/shesha-reactjs/src/components/reactTable/interfaces.ts
@@ -5,7 +5,7 @@ import React, { ReactNode, CSSProperties } from 'react';
 import { Column, ColumnInstance, Row, SortingRule, TableState } from 'react-table';
 import { IBorderValue } from '@/designer-components/_settings/utils/border/interfaces';
 import { TableSelectionMode } from '../dataTable/interfaces';
-import { IShadowValue } from '@/designer-components/_settings/utils/index';
+import { IDimensionsValue, IShadowValue } from '@/designer-components/_settings/utils/index';
 
 export interface IColumnWidth {
   id: React.Key;
@@ -326,6 +326,7 @@ export interface IReactTableProps extends ITableRowDragProps {
   border?: IBorderValue;
   backgroundColor?: string;
   boxShadow?: string;
+  dimensions?: IDimensionsValue;
   sortableIndicatorColor?: string;
   striped?: boolean;
 
diff --git a/shesha-reactjs/src/components/reactTable/styles/styles.ts b/shesha-reactjs/src/components/reactTable/styles/styles.ts
index f7fd239b23..6f9246144b 100644
--- a/shesha-reactjs/src/components/reactTable/styles/styles.ts
+++ b/shesha-reactjs/src/components/reactTable/styles/styles.ts
@@ -3,6 +3,7 @@ import { IBorderValue } from '@/designer-components/_settings/utils/border/inter
 import { IShadowValue } from '@/designer-components/_settings/utils/shadow/interfaces';
 import { getBorderStyle } from '@/designer-components/_settings/utils/border/utils';
 import { getShadowStyle } from '@/designer-components/_settings/utils/shadow/utils';
+import { IDimensionsValue } from '@/designer-components/_settings/utils/index';
 
 const tableClassNames = {
   shaTable: 'sha-table',
@@ -46,6 +47,7 @@ export const useMainStyles = createStyles(({ css, cx, token, prefixCls, iconPref
   rowHoverBackgroundColor,
   rowSelectedBackgroundColor,
   border,
+  dimensions,
   backgroundColor,
   headerFontFamily,
   headerFontSize,
@@ -94,6 +96,7 @@ export const useMainStyles = createStyles(({ css, cx, token, prefixCls, iconPref
   rowBorder?: string;
   rowBorderStyle?: IBorderValue;
   boxShadow?: string;
+  dimensions?: IDimensionsValue;
   sortableIndicatorColor?: string;
   striped?: boolean;
   cellBorderColor?: string;
@@ -215,6 +218,11 @@ export const useMainStyles = createStyles(({ css, cx, token, prefixCls, iconPref
         position: relative;
       ` : ''}
 
+
+      ${dimensions?.height ? `height: ${dimensions.height};` : ''}
+      ${dimensions?.minHeight ? `min-height: ${dimensions.minHeight};` : ''}
+      ${dimensions?.maxHeight ? `max-height: ${dimensions.maxHeight};` : ''}
+
       .${shaSpanCenterVertically} {
         display: flex;
         align-items: center;
@@ -229,7 +237,6 @@ export const useMainStyles = createStyles(({ css, cx, token, prefixCls, iconPref
         border-spacing: 0;
         display: inline-block;
         min-width: 100%;
-        overflow-x: auto;
         
         /* Background applied to table ensures it covers all rows when scrolling with freezeHeaders */
         ${backgroundColor ? `background: ${backgroundColor};` : 'background: white;'}
diff --git a/shesha-reactjs/src/components/sectionSeparator/index.tsx b/shesha-reactjs/src/components/sectionSeparator/index.tsx
index 81f8f55278..04ccb592ea 100644
--- a/shesha-reactjs/src/components/sectionSeparator/index.tsx
+++ b/shesha-reactjs/src/components/sectionSeparator/index.tsx
@@ -116,7 +116,6 @@ export const SectionSeparator: FC<ISectionSeparatorProps> = ({
         ...containerStyle,
         height: 'max-content',
         width: addPx(lineWidth, allData) ?? '100%',
-        marginRight: 1,
       }}
       key={id}
     >
diff --git a/shesha-reactjs/src/configuration-studio/styles.ts b/shesha-reactjs/src/configuration-studio/styles.ts
index 04f7aee4b4..a932b1b764 100644
--- a/shesha-reactjs/src/configuration-studio/styles.ts
+++ b/shesha-reactjs/src/configuration-studio/styles.ts
@@ -20,7 +20,6 @@ export const useStyles = createStyles(({ css, cx, token, prefixCls, iconPrefixCl
   const csDocEditor = 'sha-cs-doc-editor';
 
   const headerHeight = 60;
-  const tabCardHeight = 40;
 
   const configStudio = cx("sha-config-studio", css`
 
@@ -102,8 +101,6 @@ export const useStyles = createStyles(({ css, cx, token, prefixCls, iconPrefixCl
         }
             .${csDocEditor}{
                 padding: 0;
-                overflow: auto;
-                height: calc(100vh - ${headerHeight}px - ${tabCardHeight}px);
             }
   `);
 
diff --git a/shesha-reactjs/src/designer-components/attachmentsEditor/attachmentsEditor.tsx b/shesha-reactjs/src/designer-components/attachmentsEditor/attachmentsEditor.tsx
index a996b9686a..f2de217494 100644
--- a/shesha-reactjs/src/designer-components/attachmentsEditor/attachmentsEditor.tsx
+++ b/shesha-reactjs/src/designer-components/attachmentsEditor/attachmentsEditor.tsx
@@ -164,6 +164,7 @@ const AttachmentsEditor: IToolboxComponent<IAttachmentsEditorProps> = {
   type: 'attachmentsEditor',
   isInput: true,
   name: 'File list',
+  preserveDimensionsInDesigner: true,
   dataTypeSupported: ({ dataType, dataFormat }) => dataType === DataTypes.advanced && dataFormat === AdvancedFormats.fileList,
   icon: <FolderAddOutlined />,
   Factory: ({ model }) => {
diff --git a/shesha-reactjs/src/designer-components/container/settingsForm.ts b/shesha-reactjs/src/designer-components/container/settingsForm.ts
index 977e89a2db..3cb17b2553 100644
--- a/shesha-reactjs/src/designer-components/container/settingsForm.ts
+++ b/shesha-reactjs/src/designer-components/container/settingsForm.ts
@@ -465,7 +465,7 @@ export const getSettings: SettingsFormMarkupFactory = ({ fbf }) => {
                                       propertyName: 'flexWrap',
                                       dropdownOptions: FLEX_WRAP,
                                       hidden: {
-                                        _code: 'return getSettingValue(data[`${contexts.canvasContext?.designerDevice || "desktop"}`]?.flexDirection) !== "row";',
+                                        _code: 'return getSettingValue(data[`${contexts.canvasContext?.designerDevice || "desktop"}`]?.display) !== "flex";',
                                         _mode: 'code',
                                         _value: false,
                                       } as any,
diff --git a/shesha-reactjs/src/designer-components/dataTable/table/styles/styles.ts b/shesha-reactjs/src/designer-components/dataTable/table/styles/styles.ts
index b9d02b91de..6d7c376193 100644
--- a/shesha-reactjs/src/designer-components/dataTable/table/styles/styles.ts
+++ b/shesha-reactjs/src/designer-components/dataTable/table/styles/styles.ts
@@ -59,6 +59,7 @@ export const GlobalTableStyles = createGlobalStyle`
   }
 
   .sha-react-table {
+    overflow: auto;
     .td {
       .${(p) => p.theme.prefixCls}-form-item {
         width: 100%;
diff --git a/shesha-reactjs/src/designer-components/dataTable/table/tableComponent.tsx b/shesha-reactjs/src/designer-components/dataTable/table/tableComponent.tsx
index 83b1bd14cd..1f50ddb475 100644
--- a/shesha-reactjs/src/designer-components/dataTable/table/tableComponent.tsx
+++ b/shesha-reactjs/src/designer-components/dataTable/table/tableComponent.tsx
@@ -148,6 +148,7 @@ const TableComponent: TableComponentDefinition = {
   isInput: true,
   isOutput: true,
   name: 'Data Table',
+  preserveDimensionsInDesigner: true,
   icon: <TableOutlined />,
   Factory: ({ model }) => {
     return <TableComponentFactory model={model} />;
diff --git a/shesha-reactjs/src/designer-components/dataTable/table/tableWrapper.tsx b/shesha-reactjs/src/designer-components/dataTable/table/tableWrapper.tsx
index efe3a47a59..035eedc88e 100644
--- a/shesha-reactjs/src/designer-components/dataTable/table/tableWrapper.tsx
+++ b/shesha-reactjs/src/designer-components/dataTable/table/tableWrapper.tsx
@@ -550,6 +550,7 @@ export const TableWrapper: FC<TableWrapperProps> = (props) => {
             rowBorder={effectiveRowBorder}
             rowBorderStyle={props.rowBorderStyle}
             boxShadow={finalBoxShadow}
+            dimensions={props.dimensions}
             sortableIndicatorColor={props.sortableIndicatorColor}
             cellTextColor={props.cellTextColor}
             cellBackgroundColor={props.cellBackgroundColor}
diff --git a/shesha-reactjs/src/designer-components/dateField/dateField.tsx b/shesha-reactjs/src/designer-components/dateField/dateField.tsx
index 459f788c6c..e0772e8318 100644
--- a/shesha-reactjs/src/designer-components/dateField/dateField.tsx
+++ b/shesha-reactjs/src/designer-components/dateField/dateField.tsx
@@ -32,8 +32,6 @@ const DateField: DateFieldDefinition = {
     const finalStyle = useMemo(() => !model.enableStyleOnReadonly && model.readOnly ? {
       ...model.allStyles.fontStyles,
       ...model.allStyles.dimensionsStyles,
-      width: '100%',
-      height: '100%',
     } : model.allStyles.fullStyle, [model.enableStyleOnReadonly, model.readOnly, model.allStyles]);
 
     return (
diff --git a/shesha-reactjs/src/designer-components/multiColorInput/index.tsx b/shesha-reactjs/src/designer-components/multiColorInput/index.tsx
index 2207983178..e2adb0e71e 100644
--- a/shesha-reactjs/src/designer-components/multiColorInput/index.tsx
+++ b/shesha-reactjs/src/designer-components/multiColorInput/index.tsx
@@ -6,7 +6,6 @@ import { useTheme } from '@/providers';
 import { removeUndefinedProps } from '@/utils/object';
 import { SettingInput } from '../settingsInput/settingsInput';
 import { gradientDirectionOptions } from '../_settings/utils/background/utils';
-import { InputRow } from '../settingsInputRow';
 import { ReactElement } from 'react-markdown/lib/react-markdown';
 
 type MultiColorInputProps = {
@@ -70,18 +69,15 @@ export const MultiColorInput = ({ value = {}, onChange, readOnly, propertyName }
         >
         </Button>
       </Row>
-
-      <InputRow inline={true} readOnly={readOnly}>
-        <SettingInput
-          id={directionInputId}
-          propertyName={propertyName.replace('gradient.colors', 'gradient.direction')}
-          label="Direction"
-          hideLabel={true}
-          width="120px"
-          type="dropdown"
-          dropdownOptions={gradientDirectionOptions}
-        />
-      </InputRow>
+      <SettingInput
+        id={directionInputId}
+        propertyName={propertyName.replace('gradient.colors', 'gradient.direction')}
+        label="Direction"
+        hideLabel={true}
+        width="120px"
+        type="dropdown"
+        dropdownOptions={gradientDirectionOptions}
+      />
     </>
   );
 };
diff --git a/shesha-reactjs/src/designer-components/radio/radioGroup.tsx b/shesha-reactjs/src/designer-components/radio/radioGroup.tsx
index 9ecbe93b2f..f26415fc3e 100644
--- a/shesha-reactjs/src/designer-components/radio/radioGroup.tsx
+++ b/shesha-reactjs/src/designer-components/radio/radioGroup.tsx
@@ -8,6 +8,7 @@ import { isAjaxSuccessResponse } from '@/interfaces/ajaxResponse';
 import { ILabelValue } from '../dropdown/model';
 import { executeScriptSync } from '@/providers/form/utils';
 import { IRadioProps } from './interfaces';
+import { DEFAULT_MARGINS } from '@/components/formDesigner/utils/designerConstants';
 
 type FetchResponse = ILabelValue<any>[] | {
   items?: ILabelValue<any>[];
@@ -58,7 +59,7 @@ const RadioGroup: FC<IRadioProps> = (model) => {
       onChange={onChange}
       style={model.style}
     >
-      <Space direction={model.direction}>
+      <Space direction={model.direction} style={{ margin: `${DEFAULT_MARGINS.vertical} ${DEFAULT_MARGINS.horizontal}` }}>
         {options?.map((checkItem, index) => (
           <Radio key={index} value={`${checkItem.value}`} disabled={model.readOnly}>
             {checkItem.label}
diff --git a/shesha-reactjs/src/designer-components/tabs/styles.ts b/shesha-reactjs/src/designer-components/tabs/styles.ts
index ee35d5a6c9..b961274e41 100644
--- a/shesha-reactjs/src/designer-components/tabs/styles.ts
+++ b/shesha-reactjs/src/designer-components/tabs/styles.ts
@@ -87,7 +87,7 @@ export const useStyles = createStyles(({ css, cx, token }, { styles, cardStyles,
                 --ant-tabs-card-bg: ${backgroundImage || backgroundColor};
                 ${rest};
                 width: 100%;
-                height: 100%;
+                height: auto;
                 border: ${borderMap.default};
                 box-shadow: ${boxShadow} !important;
                 border-left: ${isLeft ? '0px solid transparent' : borderMap.left} !important;