From a53c176e36f23f9925376a63861cc6820136913f Mon Sep 17 00:00:00 2001
From: vargajoe <varga.yosh@gmail.com>
Date: Mon, 24 Jul 2023 16:41:47 +0200
Subject: [PATCH 01/15] single column mui

---
 packages/sn-controls-react/src/viewcontrols/browse-view.tsx | 6 +++---
 packages/sn-controls-react/src/viewcontrols/edit-view.tsx   | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/sn-controls-react/src/viewcontrols/browse-view.tsx b/packages/sn-controls-react/src/viewcontrols/browse-view.tsx
index 5b336c69d..3c9f31899 100644
--- a/packages/sn-controls-react/src/viewcontrols/browse-view.tsx
+++ b/packages/sn-controls-react/src/viewcontrols/browse-view.tsx
@@ -81,9 +81,9 @@ export const BrowseView: React.FC<BrowseViewProps> = (props) => {
                 item={true}
                 xs={12}
                 sm={12}
-                md={isFullWidth ? 12 : 6}
-                lg={isFullWidth ? 12 : 6}
-                xl={isFullWidth ? 12 : 6}
+                md={12}
+                lg={12}
+                xl={12}
                 key={field.fieldSettings.Name}
                 className={classes.fieldWrapper}>
                 <div className={isFullWidth ? classes.fieldFullWidth : classes.field}>
diff --git a/packages/sn-controls-react/src/viewcontrols/edit-view.tsx b/packages/sn-controls-react/src/viewcontrols/edit-view.tsx
index 77fa6fdc7..945ee5917 100644
--- a/packages/sn-controls-react/src/viewcontrols/edit-view.tsx
+++ b/packages/sn-controls-react/src/viewcontrols/edit-view.tsx
@@ -153,9 +153,9 @@ export const EditView: React.FC<EditViewProps> = (props) => {
                 item={true}
                 xs={12}
                 sm={12}
-                md={isFullWidth ? 12 : 6}
-                lg={isFullWidth ? 12 : 6}
-                xl={isFullWidth ? 12 : 6}
+                md={12}
+                lg={12}
+                xl={12}
                 key={field.fieldSettings.Name}
                 className={classes.fieldWrapper}>
                 <div className={isFullWidth ? classes.fieldFullWidth : classes.field}>{fieldControl}</div>

From 37198ea7f5128bbfbaf048c4988431b72d23d7cb Mon Sep 17 00:00:00 2001
From: vargajoe <varga.yosh@gmail.com>
Date: Thu, 28 Sep 2023 14:34:52 +0200
Subject: [PATCH 02/15] set field full width everywhere

---
 apps/sensenet/src/components/view-controls/common/styles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/sensenet/src/components/view-controls/common/styles.ts b/apps/sensenet/src/components/view-controls/common/styles.ts
index c00915f4e..cbb9f6f46 100644
--- a/apps/sensenet/src/components/view-controls/common/styles.ts
+++ b/apps/sensenet/src/components/view-controls/common/styles.ts
@@ -18,7 +18,7 @@ const useStyles = makeStyles(() => {
       position: 'relative',
     },
     field: {
-      width: '75%',
+      width: '88%',
       position: 'relative',
     },
     fieldFullWidth: {

From cde78c75f652bf8f25b91c49f003e52f07d7bb62 Mon Sep 17 00:00:00 2001
From: vargajoe <varga.yosh@gmail.com>
Date: Fri, 29 Sep 2023 11:50:56 +0200
Subject: [PATCH 03/15] fix reference width

---
 .../src/fieldcontrols/reference-grid/reference-grid.tsx       | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/sn-controls-react/src/fieldcontrols/reference-grid/reference-grid.tsx b/packages/sn-controls-react/src/fieldcontrols/reference-grid/reference-grid.tsx
index e021236e2..c02c33f44 100644
--- a/packages/sn-controls-react/src/fieldcontrols/reference-grid/reference-grid.tsx
+++ b/packages/sn-controls-react/src/fieldcontrols/reference-grid/reference-grid.tsx
@@ -22,10 +22,12 @@ const styles = {
   root: {
     display: 'flex',
     flexWrap: 'wrap',
+    alignItems: 'flex-start',
   },
   listContainer: {
-    display: 'block',
+    display: 'inline-block',
     marginTop: 10,
+    minWidth: 250,
   },
 }
 

From d3859efd745999ea94fd68a0a5c62fb06ae8490c Mon Sep 17 00:00:00 2001
From: vargajoe <varga.yosh@gmail.com>
Date: Fri, 29 Sep 2023 14:20:55 +0200
Subject: [PATCH 04/15] set datetime width

---
 packages/sn-controls-react/src/fieldcontrols/date-picker.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/sn-controls-react/src/fieldcontrols/date-picker.tsx b/packages/sn-controls-react/src/fieldcontrols/date-picker.tsx
index 8b8ff3924..ece38f31e 100644
--- a/packages/sn-controls-react/src/fieldcontrols/date-picker.tsx
+++ b/packages/sn-controls-react/src/fieldcontrols/date-picker.tsx
@@ -99,6 +99,7 @@ export const DatePicker: React.FC<ReactClientFieldSetting<DateTimeFieldSetting>>
                 required={settings.Compulsory}
                 fullWidth={true}
                 format="yyyy MMMM dd"
+                style={{ width: 220 }}
               />
             ) : (
               <DateTimePicker
@@ -113,6 +114,7 @@ export const DatePicker: React.FC<ReactClientFieldSetting<DateTimeFieldSetting>>
                 required={settings.Compulsory}
                 fullWidth={true}
                 format="yyyy MMMM dd hh:mm aaaa"
+                style={{ width: 220 }}
               />
             )}
             {!hideDescription && <FormHelperText>{settings.Description}</FormHelperText>}

From 832b2d48794a54272fcc5d3b02a59a4350b32c66 Mon Sep 17 00:00:00 2001
From: vargajoe <varga.yosh@gmail.com>
Date: Fri, 29 Sep 2023 14:53:07 +0200
Subject: [PATCH 05/15] date field auto width

---
 .../src/fieldcontrols/date-picker.tsx                  | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/sn-controls-react/src/fieldcontrols/date-picker.tsx b/packages/sn-controls-react/src/fieldcontrols/date-picker.tsx
index ece38f31e..790a24593 100644
--- a/packages/sn-controls-react/src/fieldcontrols/date-picker.tsx
+++ b/packages/sn-controls-react/src/fieldcontrols/date-picker.tsx
@@ -95,11 +95,10 @@ export const DatePicker: React.FC<ReactClientFieldSetting<DateTimeFieldSetting>>
                 label={settings.DisplayName}
                 id={settings.Name}
                 disabled={settings.ReadOnly}
-                placeholder={settings.DisplayName}
+                // placeholder={settings.DisplayName}
+                InputLabelProps={{ shrink: true }}
                 required={settings.Compulsory}
-                fullWidth={true}
                 format="yyyy MMMM dd"
-                style={{ width: 220 }}
               />
             ) : (
               <DateTimePicker
@@ -110,11 +109,10 @@ export const DatePicker: React.FC<ReactClientFieldSetting<DateTimeFieldSetting>>
                 name={settings.Name}
                 id={settings.Name}
                 disabled={settings.ReadOnly}
-                placeholder={settings.DisplayName}
+                // placeholder={settings.DisplayName}
+                InputLabelProps={{ shrink: true }}
                 required={settings.Compulsory}
-                fullWidth={true}
                 format="yyyy MMMM dd hh:mm aaaa"
-                style={{ width: 220 }}
               />
             )}
             {!hideDescription && <FormHelperText>{settings.Description}</FormHelperText>}

From 2d2e56d1bcfecb1b18b38b3915e7bdefe8dc3947 Mon Sep 17 00:00:00 2001
From: vargajoe <varga.yosh@gmail.com>
Date: Fri, 29 Sep 2023 15:05:35 +0200
Subject: [PATCH 06/15] set switcher auto width

---
 packages/sn-controls-react/src/fieldcontrols/switcher.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/sn-controls-react/src/fieldcontrols/switcher.tsx b/packages/sn-controls-react/src/fieldcontrols/switcher.tsx
index 00c841fb9..93fcdb48e 100644
--- a/packages/sn-controls-react/src/fieldcontrols/switcher.tsx
+++ b/packages/sn-controls-react/src/fieldcontrols/switcher.tsx
@@ -89,7 +89,7 @@ const useStyles = makeStyles(() =>
       alignItems: 'flex-start',
     },
     alignedCenter: {
-      alignItems: 'center',
+      alignItems: 'flex-start',
     },
   }),
 )

From ba4c49e5b65e582bc38d85bbeeb6e5851cd074c8 Mon Sep 17 00:00:00 2001
From: vargajoe <varga.yosh@gmail.com>
Date: Fri, 29 Sep 2023 15:09:27 +0200
Subject: [PATCH 07/15] set number auto width

---
 packages/sn-controls-react/src/fieldcontrols/number.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/sn-controls-react/src/fieldcontrols/number.tsx b/packages/sn-controls-react/src/fieldcontrols/number.tsx
index 885887ccc..9a3ebf34f 100644
--- a/packages/sn-controls-react/src/fieldcontrols/number.tsx
+++ b/packages/sn-controls-react/src/fieldcontrols/number.tsx
@@ -65,7 +65,8 @@ export const NumberField: React.FC<ReactClientFieldSetting<NumberFieldSetting |
             value={value}
             required={props.settings.Compulsory}
             disabled={props.settings.ReadOnly}
-            placeholder={props.settings.DisplayName}
+            placeholder="0" //{props.settings.DisplayName}
+            InputLabelProps={{ shrink: true }}
             InputProps={{
               startAdornment: defineCurrency(),
               endAdornment: props.settings.ShowAsPercentage ? <InputAdornment position="end">%</InputAdornment> : null,
@@ -76,7 +77,6 @@ export const NumberField: React.FC<ReactClientFieldSetting<NumberFieldSetting |
               min: props.settings.MinValue,
             }}
             id={props.settings.Name}
-            fullWidth={true}
             onChange={handleChange}
           />
           {!props.hideDescription && <FormHelperText>{props.settings.Description}</FormHelperText>}

From 7a2eb992f08745722a6d3a2976adc3d65876a145 Mon Sep 17 00:00:00 2001
From: vargajoe <varga.yosh@gmail.com>
Date: Fri, 29 Sep 2023 15:31:18 +0200
Subject: [PATCH 08/15] set dropdown auto width

---
 .../sn-controls-react/src/fieldcontrols/dropdown-list.tsx    | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/sn-controls-react/src/fieldcontrols/dropdown-list.tsx b/packages/sn-controls-react/src/fieldcontrols/dropdown-list.tsx
index 9b5c51e4b..abf23f442 100644
--- a/packages/sn-controls-react/src/fieldcontrols/dropdown-list.tsx
+++ b/packages/sn-controls-react/src/fieldcontrols/dropdown-list.tsx
@@ -56,7 +56,10 @@ export const DropDownList: React.FC<ReactClientFieldSetting<ChoiceFieldSetting>>
     case 'edit':
     case 'new':
       return (
-        <FormControl fullWidth={true} required={props.settings.Compulsory} disabled={props.settings.ReadOnly}>
+        <FormControl
+          style={{ minWidth: '220px' }}
+          required={props.settings.Compulsory}
+          disabled={props.settings.ReadOnly}>
           <InputLabel htmlFor={props.settings.Name}>{props.settings.DisplayName}</InputLabel>
           <Select
             onChange={handleChange}

From 410a79eae8b60b8d88bacee5456a8d3f7217e3be Mon Sep 17 00:00:00 2001
From: vargajoe <varga.yosh@gmail.com>
Date: Fri, 29 Sep 2023 15:34:18 +0200
Subject: [PATCH 09/15] set allowed child types auto width

---
 .../src/fieldcontrols/allowed-child-types.tsx                  | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/sn-controls-react/src/fieldcontrols/allowed-child-types.tsx b/packages/sn-controls-react/src/fieldcontrols/allowed-child-types.tsx
index f130c5d95..2e879f5c6 100644
--- a/packages/sn-controls-react/src/fieldcontrols/allowed-child-types.tsx
+++ b/packages/sn-controls-react/src/fieldcontrols/allowed-child-types.tsx
@@ -230,7 +230,7 @@ export const AllowedChildTypes: React.FC<ReactClientFieldSetting & { classes?: A
     case 'new':
       return (
         <ClickAwayListener onClickAway={handleClickAway}>
-          <div>
+          <div style={{ display: 'inline-block', minWidth: '350px' }}>
             <InputLabel shrink htmlFor={props.settings.Name} required={props.settings.Compulsory}>
               {props.settings.DisplayName}
             </InputLabel>
@@ -264,7 +264,6 @@ export const AllowedChildTypes: React.FC<ReactClientFieldSetting & { classes?: A
                   onClick={handleOnClick}
                   onChange={handleInputChange}
                   placeholder={INPUT_PLACEHOLDER}
-                  fullWidth={true}
                   value={inputValue}
                   className={classes.input}
                 />

From 18d4760f1c1500a5c9b48b32bd79011baf0c05f6 Mon Sep 17 00:00:00 2001
From: vargajoe <varga.yosh@gmail.com>
Date: Fri, 29 Sep 2023 15:34:58 +0200
Subject: [PATCH 10/15] short text label instead of placeholder

---
 packages/sn-controls-react/src/fieldcontrols/short-text.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/sn-controls-react/src/fieldcontrols/short-text.tsx b/packages/sn-controls-react/src/fieldcontrols/short-text.tsx
index b1c408f75..0278b78c3 100644
--- a/packages/sn-controls-react/src/fieldcontrols/short-text.tsx
+++ b/packages/sn-controls-react/src/fieldcontrols/short-text.tsx
@@ -35,7 +35,8 @@ export const ShortText: React.FC<ReactClientFieldSetting<ShortTextFieldSetting>>
             name={props.settings.Name}
             id={props.settings.Name}
             label={props.settings.DisplayName}
-            placeholder={props.settings.DisplayName}
+            // placeholder={props.settings.DisplayName}
+            InputLabelProps={{ shrink: true }}
             value={value}
             required={props.settings.Compulsory}
             disabled={props.settings.ReadOnly}

From 5a3cbd929f5bdf2871c87b99048fd8d1251bbf31 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81d=C3=A1m=20Hassan?= <hassana@sensenet.com>
Date: Mon, 2 Oct 2023 10:46:41 +0200
Subject: [PATCH 11/15] align fixes

---
 .../fieldcontrols/reference-grid/default-item-template.tsx | 7 ++-----
 .../src/fieldcontrols/reference-grid/reference-grid.tsx    | 6 +++---
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/packages/sn-controls-react/src/fieldcontrols/reference-grid/default-item-template.tsx b/packages/sn-controls-react/src/fieldcontrols/reference-grid/default-item-template.tsx
index 59ea6241f..170bff9f5 100644
--- a/packages/sn-controls-react/src/fieldcontrols/reference-grid/default-item-template.tsx
+++ b/packages/sn-controls-react/src/fieldcontrols/reference-grid/default-item-template.tsx
@@ -105,12 +105,9 @@ export const DefaultItemTemplate: React.FC<DefaultItemTemplateProps> = (props) =
   }
 
   return (
-    <ListItem key={content.Id} button={false}>
+    <ListItem style={props.actionName === 'browse' ? { padding: 0 } : undefined} key={content.Id} button={false}>
       {content.Type ? renderIcon(content) : null}
-      <ListItemText
-        primary={content.DisplayName}
-        style={content.Id < 0 ? { textAlign: 'right', paddingRight: 16 } : { textAlign: 'left' }}
-      />
+      <ListItemText primary={content.DisplayName} style={{ textAlign: 'left', paddingRight: 15 }} />
       {props.actionName && props.actionName !== 'browse' && !props.readOnly ? (
         <ListItemSecondaryAction>
           {content.Id > 0 ? (
diff --git a/packages/sn-controls-react/src/fieldcontrols/reference-grid/reference-grid.tsx b/packages/sn-controls-react/src/fieldcontrols/reference-grid/reference-grid.tsx
index c02c33f44..415a36168 100644
--- a/packages/sn-controls-react/src/fieldcontrols/reference-grid/reference-grid.tsx
+++ b/packages/sn-controls-react/src/fieldcontrols/reference-grid/reference-grid.tsx
@@ -26,8 +26,8 @@ const styles = {
   },
   listContainer: {
     display: 'inline-block',
-    marginTop: 10,
     minWidth: 250,
+    padding: 0,
   },
 }
 
@@ -234,9 +234,9 @@ export const ReferenceGrid: React.FC<ReferenceGridProps> = (props) => {
     default: {
       return (
         <FormControl style={styles.root as any}>
-          <InputLabel shrink={true} htmlFor={props.settings.Name}>
+          <Typography variant="caption" gutterBottom={true}>
             {props.settings.DisplayName}
-          </InputLabel>
+          </Typography>
           <FormGroup>
             {fieldValue ? (
               <List dense={true} style={styles.listContainer}>

From 970eb1d75165a68e3f07b492ec033fd67d7eed22 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81d=C3=A1m=20Hassan?= <hassana@sensenet.com>
Date: Mon, 2 Oct 2023 12:07:51 +0200
Subject: [PATCH 12/15] unit test adjusts

---
 .../src/fieldcontrols/date-picker.tsx              |  1 -
 .../test/__snapshots__/date-picker.test.tsx.snap   | 14 ++++++++++----
 .../test/__snapshots__/dropdown-list.test.tsx.snap |  6 +++++-
 .../test/__snapshots__/number.test.tsx.snap        |  8 ++++++--
 .../test/__snapshots__/short-text.test.tsx.snap    |  6 +++++-
 .../sn-controls-react/test/date-picker.test.tsx    |  2 --
 packages/sn-controls-react/test/number.test.tsx    |  2 +-
 .../sn-controls-react/test/reference-grid.test.tsx | 10 +++++++---
 .../sn-controls-react/test/short-text.test.tsx     |  1 -
 9 files changed, 34 insertions(+), 16 deletions(-)

diff --git a/packages/sn-controls-react/src/fieldcontrols/date-picker.tsx b/packages/sn-controls-react/src/fieldcontrols/date-picker.tsx
index 790a24593..26dee7038 100644
--- a/packages/sn-controls-react/src/fieldcontrols/date-picker.tsx
+++ b/packages/sn-controls-react/src/fieldcontrols/date-picker.tsx
@@ -95,7 +95,6 @@ export const DatePicker: React.FC<ReactClientFieldSetting<DateTimeFieldSetting>>
                 label={settings.DisplayName}
                 id={settings.Name}
                 disabled={settings.ReadOnly}
-                // placeholder={settings.DisplayName}
                 InputLabelProps={{ shrink: true }}
                 required={settings.Compulsory}
                 format="yyyy MMMM dd"
diff --git a/packages/sn-controls-react/test/__snapshots__/date-picker.test.tsx.snap b/packages/sn-controls-react/test/__snapshots__/date-picker.test.tsx.snap
index e025e8724..52bb97b91 100644
--- a/packages/sn-controls-react/test/__snapshots__/date-picker.test.tsx.snap
+++ b/packages/sn-controls-react/test/__snapshots__/date-picker.test.tsx.snap
@@ -26,11 +26,15 @@ exports[`Date/Date time field control in edit/new view should set all the props
   utils={[Function]}
 >
   <PickerWithState
+    InputLabelProps={
+      Object {
+        "shrink": true,
+      }
+    }
     allowKeyboardControl={true}
     ampm={true}
     disabled={true}
     format="yyyy MMMM dd hh:mm aaaa"
-    fullWidth={true}
     id="ModificationDate"
     invalidDateMessage="Invalid Date Format"
     label="Modification Date"
@@ -42,7 +46,6 @@ exports[`Date/Date time field control in edit/new view should set all the props
     onChange={[Function]}
     openTo="date"
     orientation="portrait"
-    placeholder="Modification Date"
     required={true}
     showTabs={true}
     value="1912-04-15T02:10:00.000Z"
@@ -67,10 +70,14 @@ exports[`Date/Date time field control in edit/new view should set all the props
   utils={[Function]}
 >
   <PickerWithState
+    InputLabelProps={
+      Object {
+        "shrink": true,
+      }
+    }
     allowKeyboardControl={true}
     disabled={true}
     format="yyyy MMMM dd"
-    fullWidth={true}
     id="ModificationDate"
     invalidDateMessage="Invalid Date Format"
     label="Modification Date"
@@ -81,7 +88,6 @@ exports[`Date/Date time field control in edit/new view should set all the props
     name="ModificationDate"
     onChange={[Function]}
     openTo="date"
-    placeholder="Modification Date"
     required={true}
     value="1912-04-15T02:10:00.000Z"
     views={
diff --git a/packages/sn-controls-react/test/__snapshots__/dropdown-list.test.tsx.snap b/packages/sn-controls-react/test/__snapshots__/dropdown-list.test.tsx.snap
index 85c32d792..726e68549 100644
--- a/packages/sn-controls-react/test/__snapshots__/dropdown-list.test.tsx.snap
+++ b/packages/sn-controls-react/test/__snapshots__/dropdown-list.test.tsx.snap
@@ -3,8 +3,12 @@
 exports[`Drop down list field control in edit/new view should set all the props 1`] = `
 <WithStyles(ForwardRef(FormControl))
   disabled={true}
-  fullWidth={true}
   required={true}
+  style={
+    Object {
+      "minWidth": "220px",
+    }
+  }
 >
   <WithStyles(ForwardRef(InputLabel))
     htmlFor="VersioningMode"
diff --git a/packages/sn-controls-react/test/__snapshots__/number.test.tsx.snap b/packages/sn-controls-react/test/__snapshots__/number.test.tsx.snap
index 2655c48b2..704371c51 100644
--- a/packages/sn-controls-react/test/__snapshots__/number.test.tsx.snap
+++ b/packages/sn-controls-react/test/__snapshots__/number.test.tsx.snap
@@ -20,6 +20,11 @@ exports[`Number field control in browse view should show the displayname and fie
 exports[`Number field control in edit/new view should set all the props 1`] = `
 <Fragment>
   <WithStyles(ForwardRef(TextField))
+    InputLabelProps={
+      Object {
+        "shrink": true,
+      }
+    }
     InputProps={
       Object {
         "endAdornment": <WithStyles(ForwardRef(InputAdornment))
@@ -35,7 +40,6 @@ exports[`Number field control in edit/new view should set all the props 1`] = `
       }
     }
     disabled={true}
-    fullWidth={true}
     id="Index"
     inputProps={
       Object {
@@ -47,7 +51,7 @@ exports[`Number field control in edit/new view should set all the props 1`] = `
     label="Index"
     name="Index"
     onChange={[Function]}
-    placeholder="Index"
+    placeholder="0"
     required={true}
     type="number"
     value={7}
diff --git a/packages/sn-controls-react/test/__snapshots__/short-text.test.tsx.snap b/packages/sn-controls-react/test/__snapshots__/short-text.test.tsx.snap
index 7f385201b..496e32157 100644
--- a/packages/sn-controls-react/test/__snapshots__/short-text.test.tsx.snap
+++ b/packages/sn-controls-react/test/__snapshots__/short-text.test.tsx.snap
@@ -20,6 +20,11 @@ exports[`Short text field control in browse view should show the displayname and
 exports[`Short text field control in edit/new view should set all the props 1`] = `
 <Fragment>
   <WithStyles(ForwardRef(TextField))
+    InputLabelProps={
+      Object {
+        "shrink": true,
+      }
+    }
     autoComplete="off"
     disabled={true}
     fullWidth={true}
@@ -34,7 +39,6 @@ exports[`Short text field control in edit/new view should set all the props 1`]
     label="Display name"
     name="DisplayName"
     onChange={[Function]}
-    placeholder="Display name"
     required={true}
     value="Hello World"
   />
diff --git a/packages/sn-controls-react/test/date-picker.test.tsx b/packages/sn-controls-react/test/date-picker.test.tsx
index 49dad0f6c..babb5b074 100644
--- a/packages/sn-controls-react/test/date-picker.test.tsx
+++ b/packages/sn-controls-react/test/date-picker.test.tsx
@@ -71,7 +71,6 @@ describe('Date/Date time field control', () => {
       expect(wrapper.find(DateTimePicker).prop('name')).toBe(defaultSettings.Name)
       expect(wrapper.find(DateTimePicker).prop('id')).toBe(defaultSettings.Name)
       expect(wrapper.find(DateTimePicker).prop('label')).toBe(defaultSettings.DisplayName)
-      expect(wrapper.find(DateTimePicker).prop('placeholder')).toBe(defaultSettings.DisplayName)
       expect(wrapper.find(DateTimePicker).prop('required')).toBeTruthy()
       expect(wrapper.find(DateTimePicker).prop('disabled')).toBeTruthy()
       expect(wrapper).toMatchSnapshot()
@@ -109,7 +108,6 @@ describe('Date/Date time field control', () => {
       expect(wrapper.find(MUIDatePicker).prop('name')).toBe(defaultSettings.Name)
       expect(wrapper.find(MUIDatePicker).prop('id')).toBe(defaultSettings.Name)
       expect(wrapper.find(MUIDatePicker).prop('label')).toBe(defaultSettings.DisplayName)
-      expect(wrapper.find(MUIDatePicker).prop('placeholder')).toBe(defaultSettings.DisplayName)
       expect(wrapper.find(MUIDatePicker).prop('required')).toBeTruthy()
       expect(wrapper.find(MUIDatePicker).prop('disabled')).toBeTruthy()
       expect(wrapper).toMatchSnapshot()
diff --git a/packages/sn-controls-react/test/number.test.tsx b/packages/sn-controls-react/test/number.test.tsx
index dacd8a111..7f8d35ccf 100644
--- a/packages/sn-controls-react/test/number.test.tsx
+++ b/packages/sn-controls-react/test/number.test.tsx
@@ -75,7 +75,7 @@ describe('Number field control', () => {
       expect(wrapper.find(TextField).prop('name')).toBe(defaultSettings.Name)
       expect(wrapper.find(TextField).prop('id')).toBe(defaultSettings.Name)
       expect(wrapper.find(TextField).prop('label')).toBe(defaultSettings.DisplayName)
-      expect(wrapper.find(TextField).prop('placeholder')).toBe(defaultSettings.DisplayName)
+      expect(wrapper.find(TextField).prop('placeholder')).toBe('0')
       expect(wrapper.find(TextField).prop('required')).toBeTruthy()
       expect(wrapper.find(TextField).prop('disabled')).toBeTruthy()
       expect(wrapper.find(FormHelperText).text()).toBe(defaultSettings.Description)
diff --git a/packages/sn-controls-react/test/reference-grid.test.tsx b/packages/sn-controls-react/test/reference-grid.test.tsx
index 2b5f12725..e7068ed77 100644
--- a/packages/sn-controls-react/test/reference-grid.test.tsx
+++ b/packages/sn-controls-react/test/reference-grid.test.tsx
@@ -83,12 +83,16 @@ describe('Reference grid field control', () => {
   describe('in browse view', () => {
     it('should show no value message when field value is not provided', () => {
       const wrapper = shallow(<ReferenceGrid actionName="browse" settings={defaultSettings} />)
-      expect(wrapper.find(Typography).text()).toBe(defaultLocalization.referenceGrid.noValue)
+      expect(wrapper.find(Typography).filter({ variant: 'body1' }).text()).toBe(
+        defaultLocalization.referenceGrid.noValue,
+      )
     })
 
     it('should show no value message when field value is empty array', () => {
       const wrapper = shallow(<ReferenceGrid actionName="browse" settings={defaultSettings} fieldValue={[] as any} />)
-      expect(wrapper.find(Typography).text()).toBe(defaultLocalization.referenceGrid.noValue)
+      expect(wrapper.find(Typography).filter({ variant: 'body1' }).text()).toBe(
+        defaultLocalization.referenceGrid.noValue,
+      )
     })
 
     it('should render the default item template when there is a field value', async () => {
@@ -102,7 +106,7 @@ describe('Reference grid field control', () => {
       })
 
       expect(wrapper.find(DefaultItemTemplate)).toHaveLength(1)
-      expect(wrapper.find(InputLabel).text()).toBe(defaultSettings.DisplayName)
+      expect(wrapper.find(Typography).filter({ variant: 'caption' }).text()).toBe(defaultSettings.DisplayName)
     })
 
     it('should create an allowed type list filter', async () => {
diff --git a/packages/sn-controls-react/test/short-text.test.tsx b/packages/sn-controls-react/test/short-text.test.tsx
index 32a7f8138..cbed3068a 100644
--- a/packages/sn-controls-react/test/short-text.test.tsx
+++ b/packages/sn-controls-react/test/short-text.test.tsx
@@ -53,7 +53,6 @@ describe('Short text field control', () => {
       expect(wrapper.find(TextField).prop('name')).toBe(defaultSettings.Name)
       expect(wrapper.find(TextField).prop('id')).toBe(defaultSettings.Name)
       expect(wrapper.find(TextField).prop('label')).toBe(defaultSettings.DisplayName)
-      expect(wrapper.find(TextField).prop('placeholder')).toBe(defaultSettings.DisplayName)
       expect(wrapper.find(TextField).prop('required')).toBeTruthy()
       expect(wrapper.find(TextField).prop('disabled')).toBeTruthy()
       expect(wrapper.find(FormHelperText).text()).toEqual('description')

From 1497cb79a3edfe2564faa382b9a35dead04fc59e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81d=C3=A1m=20Hassan?= <hassana@sensenet.com>
Date: Mon, 2 Oct 2023 12:55:32 +0200
Subject: [PATCH 13/15] reference picker layout

---
 .../src/fieldcontrols/reference-grid/reference-grid.tsx          | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/sn-controls-react/src/fieldcontrols/reference-grid/reference-grid.tsx b/packages/sn-controls-react/src/fieldcontrols/reference-grid/reference-grid.tsx
index 415a36168..1f0c2514f 100644
--- a/packages/sn-controls-react/src/fieldcontrols/reference-grid/reference-grid.tsx
+++ b/packages/sn-controls-react/src/fieldcontrols/reference-grid/reference-grid.tsx
@@ -28,6 +28,7 @@ const styles = {
     display: 'inline-block',
     minWidth: 250,
     padding: 0,
+    marginTop: 15,
   },
 }
 

From fae25a443c28a2b322d11ccf60846518193969c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81d=C3=A1m=20Hassan?= <hassana@sensenet.com>
Date: Mon, 2 Oct 2023 12:57:56 +0200
Subject: [PATCH 14/15] remove comments

---
 packages/sn-controls-react/src/fieldcontrols/date-picker.tsx | 1 -
 packages/sn-controls-react/src/fieldcontrols/number.tsx      | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/sn-controls-react/src/fieldcontrols/date-picker.tsx b/packages/sn-controls-react/src/fieldcontrols/date-picker.tsx
index 26dee7038..be702fec3 100644
--- a/packages/sn-controls-react/src/fieldcontrols/date-picker.tsx
+++ b/packages/sn-controls-react/src/fieldcontrols/date-picker.tsx
@@ -108,7 +108,6 @@ export const DatePicker: React.FC<ReactClientFieldSetting<DateTimeFieldSetting>>
                 name={settings.Name}
                 id={settings.Name}
                 disabled={settings.ReadOnly}
-                // placeholder={settings.DisplayName}
                 InputLabelProps={{ shrink: true }}
                 required={settings.Compulsory}
                 format="yyyy MMMM dd hh:mm aaaa"
diff --git a/packages/sn-controls-react/src/fieldcontrols/number.tsx b/packages/sn-controls-react/src/fieldcontrols/number.tsx
index 9a3ebf34f..e642d2162 100644
--- a/packages/sn-controls-react/src/fieldcontrols/number.tsx
+++ b/packages/sn-controls-react/src/fieldcontrols/number.tsx
@@ -65,7 +65,7 @@ export const NumberField: React.FC<ReactClientFieldSetting<NumberFieldSetting |
             value={value}
             required={props.settings.Compulsory}
             disabled={props.settings.ReadOnly}
-            placeholder="0" //{props.settings.DisplayName}
+            placeholder="0"
             InputLabelProps={{ shrink: true }}
             InputProps={{
               startAdornment: defineCurrency(),

From d9c362ccc8eb951ead6e027a166052219eb1ecc5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81d=C3=A1m=20Hassan?= <hassana@sensenet.com>
Date: Mon, 2 Oct 2023 12:59:35 +0200
Subject: [PATCH 15/15] remove comments 2

---
 packages/sn-controls-react/src/fieldcontrols/short-text.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/sn-controls-react/src/fieldcontrols/short-text.tsx b/packages/sn-controls-react/src/fieldcontrols/short-text.tsx
index 0278b78c3..705538d4b 100644
--- a/packages/sn-controls-react/src/fieldcontrols/short-text.tsx
+++ b/packages/sn-controls-react/src/fieldcontrols/short-text.tsx
@@ -35,7 +35,6 @@ export const ShortText: React.FC<ReactClientFieldSetting<ShortTextFieldSetting>>
             name={props.settings.Name}
             id={props.settings.Name}
             label={props.settings.DisplayName}
-            // placeholder={props.settings.DisplayName}
             InputLabelProps={{ shrink: true }}
             value={value}
             required={props.settings.Compulsory}