From c1d3c901d50d6876a0a11f3d7e6870bb7da8f95f Mon Sep 17 00:00:00 2001
From: NoelKova <Noel.Kovacs@sensenet.com>
Date: Wed, 31 Jul 2024 14:04:48 +0200
Subject: [PATCH] minor_fixes

---
 .../components/content-list/content-list.tsx  |  7 ++-
 .../content-list/reference-field.tsx          |  5 +-
 .../components/settings/settings-table.tsx    |  2 +-
 .../components/view-controls/common/styles.ts | 15 +-----
 apps/sensenet/src/hooks/use-drawer-items.tsx  | 46 +++++++++----------
 .../src/viewcontrols/browse-view.tsx          | 28 ++++-------
 .../src/viewcontrols/edit-view.tsx            | 34 ++++----------
 7 files changed, 54 insertions(+), 83 deletions(-)

diff --git a/apps/sensenet/src/components/content-list/content-list.tsx b/apps/sensenet/src/components/content-list/content-list.tsx
index 2f1e7d5d7..a486378f1 100644
--- a/apps/sensenet/src/components/content-list/content-list.tsx
+++ b/apps/sensenet/src/components/content-list/content-list.tsx
@@ -556,7 +556,12 @@ export const ContentList = <T extends GenericContent = GenericContent>(props: Co
       ) {
         return (
           <ContextMenuWrapper onContextMenu={(ev) => openContext(ev, fieldOptions.rowData)}>
-            <ReferenceField content={expectedContent} fieldName={fieldOptions.dataKey} parent={fieldOptions.rowData} />
+            <ReferenceField
+              content={expectedContent}
+              fieldName={fieldOptions.dataKey}
+              parent={fieldOptions.rowData}
+              showIcon={false}
+            />
           </ContextMenuWrapper>
         )
       }
diff --git a/apps/sensenet/src/components/content-list/reference-field.tsx b/apps/sensenet/src/components/content-list/reference-field.tsx
index dc2fa180e..0c66be19d 100644
--- a/apps/sensenet/src/components/content-list/reference-field.tsx
+++ b/apps/sensenet/src/components/content-list/reference-field.tsx
@@ -31,9 +31,10 @@ interface ReferenceFieldProps {
   content: GenericContent | GenericContent[]
   fieldName: string
   parent: GenericContent
+  showIcon: boolean
 }
 
-export const ReferenceField: FunctionComponent<ReferenceFieldProps> = ({ content, fieldName, parent }) => {
+export const ReferenceField: FunctionComponent<ReferenceFieldProps> = ({ content, fieldName, parent, showIcon }) => {
   const globalClasses = useGlobalStyles()
   const classes = useStyles()
   const { openDialog } = useDialog()
@@ -69,7 +70,7 @@ export const ReferenceField: FunctionComponent<ReferenceFieldProps> = ({ content
         </div>
       ) : (
         <div className={globalClasses.centeredVertical}>
-          {repository.schemas.isContentFromType(content, 'User') ? (
+          {repository.schemas.isContentFromType(content, 'User') && showIcon ? (
             <Icon item={content} style={{ marginRight: '0.5rem' }} />
           ) : null}
           <Tooltip title={`Open ${content.DisplayName || content.Name} for edit`}>
diff --git a/apps/sensenet/src/components/settings/settings-table.tsx b/apps/sensenet/src/components/settings/settings-table.tsx
index c5047a787..6a09b5f16 100644
--- a/apps/sensenet/src/components/settings/settings-table.tsx
+++ b/apps/sensenet/src/components/settings/settings-table.tsx
@@ -110,7 +110,7 @@ const sortArray = (array: UpdatedSettings[], order: 'asc' | 'desc', orderBy: key
     } else if (aO && bO) {
       const aValue = orderBy === 'Description' ? stripHtml(aO.toLocaleString()) : aO.toLocaleString()
       const bValue = orderBy === 'Description' ? stripHtml(bO.toLocaleString()) : bO.toLocaleString()
-      if (aValue < bValue) {
+      if (aValue.toLocaleLowerCase() < bValue.toLocaleLowerCase()) {
         return order === 'asc' ? -1 : 1
       } else if (aValue > bValue) {
         return order === 'asc' ? 1 : -1
diff --git a/apps/sensenet/src/components/view-controls/common/styles.ts b/apps/sensenet/src/components/view-controls/common/styles.ts
index 735f6189c..e7abba77a 100644
--- a/apps/sensenet/src/components/view-controls/common/styles.ts
+++ b/apps/sensenet/src/components/view-controls/common/styles.ts
@@ -6,22 +6,9 @@ const useStyles = makeStyles(() => {
     grid: {
       padding: '14px 14px 0 14px',
       overflowY: 'auto',
-      width: '100%',
+      maxWidth: '100%',
       maxHeight: `calc(100% - ${globals.common.formActionButtonsHeight}px - ${globals.common.formTitleHeight}px)`,
     },
-    fieldWrapper: {
-      alignItems: 'center',
-      flexFlow: 'column',
-      padding: '15px !important',
-      height: 'fit-content',
-      position: 'relative',
-    },
-    field: {
-      position: 'relative',
-    },
-    fieldFullWidth: {
-      position: 'relative',
-    },
     actionButtonWrapper: {
       height: '80px',
       left: 0,
diff --git a/apps/sensenet/src/hooks/use-drawer-items.tsx b/apps/sensenet/src/hooks/use-drawer-items.tsx
index b53e80ab9..39bac8204 100644
--- a/apps/sensenet/src/hooks/use-drawer-items.tsx
+++ b/apps/sensenet/src/hooks/use-drawer-items.tsx
@@ -194,32 +194,32 @@ export const useDrawerItems = () => {
       return drawerItem
     }
 
-      ;[...settings.drawer.items, ...builtInDrawerItems]
-        .filterAsync(async (item) => {
-          if (!item.permissions?.length) {
-            return true
-          }
+    ;[...settings.drawer.items, ...builtInDrawerItems]
+      .filterAsync(async (item) => {
+        if (!item.permissions?.length) {
+          return true
+        }
 
-          try {
-            for (const permission of item.permissions) {
-              const actions = await repo.getActions({ idOrPath: permission.path })
-              const actionIndex = actions.d.results.findIndex((action) => action.Name === permission.action)
-              if (actionIndex === -1 || actions.d.results[actionIndex].Forbidden) {
-                return false
-              }
+        try {
+          for (const permission of item.permissions) {
+            const actions = await repo.getActions({ idOrPath: permission.path })
+            const actionIndex = actions.d.results.findIndex((action) => action.Name === permission.action)
+            if (actionIndex === -1 || actions.d.results[actionIndex].Forbidden) {
+              return false
             }
-          } catch (error) {
-            logger.debug({
-              message: error.message,
-              data: {
-                error,
-              },
-            })
-            return false
           }
-          return true
-        })
-        .then((items) => setDrawerItems(items.map(getItemFromSettings)))
+        } catch (error) {
+          logger.debug({
+            message: error.message,
+            data: {
+              error,
+            },
+          })
+          return false
+        }
+        return true
+      })
+      .then((items) => setDrawerItems(items.map(getItemFromSettings)))
   }, [
     localization.descriptions,
     localization.titles,
diff --git a/packages/sn-controls-react/src/viewcontrols/browse-view.tsx b/packages/sn-controls-react/src/viewcontrols/browse-view.tsx
index 10a67d84c..2f1177261 100644
--- a/packages/sn-controls-react/src/viewcontrols/browse-view.tsx
+++ b/packages/sn-controls-react/src/viewcontrols/browse-view.tsx
@@ -10,7 +10,6 @@ import { useRepository } from '@sensenet/hooks-react'
 import type { Locale } from 'date-fns'
 import React, { createElement, ReactElement, useEffect, useState } from 'react'
 import { FieldLocalization } from '../fieldcontrols/localization'
-import { isFullWidthField } from '../helpers'
 import { reactControlMapper } from '../react-control-mapper'
 import { AdvancedFieldGroup, DEFAULT_GROUP_KEY } from './edit-view'
 
@@ -37,19 +36,22 @@ const useStyles = makeStyles((theme: Theme) => {
   return createStyles({
     grid: {
       margin: '0 auto',
-      maxWidth: '850px',
     },
-    fieldWrapper: {},
-    field: {},
-    fieldFullWidth: {},
     actionButtonWrapper: {
       textAlign: 'right',
     },
+    field: {
+      width: '780px',
+      margin: 'auto',
+      maxWidth: '100%',
+    },
     cancel: {},
     advancedFieldContainer: {
       padding: '15px',
       fontSize: '18px',
-      width: '100%',
+      width: '780px',
+      maxWidth: '100%',
+      margin: 'auto',
     },
     advancedFieldBox: {
       display: 'flex',
@@ -123,19 +125,9 @@ export const BrowseView: React.FC<BrowseViewProps> = (props) => {
   }, [schema])
 
   const renderField = (field: { fieldSettings: FieldSetting; actionName: ActionName; controlType: any }) => {
-    const isFullWidth = isFullWidthField(field, props.content, repository)
-
     return (
-      <Grid
-        item={true}
-        xs={12}
-        sm={12}
-        md={12}
-        lg={12}
-        xl={12}
-        key={field.fieldSettings.Name}
-        className={classes.fieldWrapper}>
-        <div className={isFullWidth ? classes.fieldFullWidth : classes.field}>
+      <Grid item={true} xs={12} sm={12} md={12} lg={12} xl={12} key={field.fieldSettings.Name}>
+        <div className={classes.field}>
           {createElement(
             controlMapper.getControlForContentField(props.content.Type, field.fieldSettings.Name, 'browse'),
             {
diff --git a/packages/sn-controls-react/src/viewcontrols/edit-view.tsx b/packages/sn-controls-react/src/viewcontrols/edit-view.tsx
index b1b0d84fa..9ff59bb11 100644
--- a/packages/sn-controls-react/src/viewcontrols/edit-view.tsx
+++ b/packages/sn-controls-react/src/viewcontrols/edit-view.tsx
@@ -11,7 +11,6 @@ import type { Locale } from 'date-fns'
 import React, { createElement, ReactElement, useEffect, useRef, useState } from 'react'
 import MediaQuery from 'react-responsive'
 import { FieldLocalization } from '../fieldcontrols/localization'
-import { isFullWidthField } from '../helpers'
 import { reactControlMapper } from '../react-control-mapper'
 
 const hasInputField = ['Name', 'FileName', 'ShortText', 'AutoComplete', 'Textarea', 'NumberField', 'RichTextEditor']
@@ -47,12 +46,11 @@ const useStyles = makeStyles((theme: Theme) => {
   return createStyles({
     grid: {
       margin: '0 auto',
-      maxWidth: '850px',
     },
-    fieldWrapper: {},
-    field: {},
-    fieldFullWidth: {
-      width: '100%',
+    field: {
+      width: '780px',
+      margin: 'auto',
+      maxWidth: '100%',
     },
     actionButtonWrapper: {
       textAlign: 'right',
@@ -61,9 +59,11 @@ const useStyles = makeStyles((theme: Theme) => {
       marginRight: 20,
     },
     advancedFieldContainer: {
-      padding: '15px',
+      padding: '15px 0',
       fontSize: '18px',
-      width: '100%',
+      width: '780px',
+      maxWidth: '100%',
+      margin: 'auto',
     },
     advancedFieldBox: {
       display: 'flex',
@@ -190,27 +190,13 @@ export const EditView: React.FC<EditViewProps> = (props) => {
       },
     )
 
-    const isFullWidth = isFullWidthField(
-      field,
-      props.content || ({ Type: props.contentTypeName } as GenericContent),
-      repository,
-    )
-
     if (autoFocus) {
       isAutofocusSet = true
     }
 
     return (
-      <Grid
-        item={true}
-        xs={12}
-        sm={12}
-        md={12}
-        lg={12}
-        xl={12}
-        key={field.fieldSettings.Name}
-        className={classes.fieldWrapper}>
-        <div className={isFullWidth ? classes.fieldFullWidth : classes.field}>{fieldControl}</div>
+      <Grid item={true} xs={12} sm={12} md={12} lg={12} xl={12} key={field.fieldSettings.Name}>
+        <div className={classes.field}>{fieldControl}</div>
       </Grid>
     )
   }