From 32031457d3a97bf75f537db17706f7989d469112 Mon Sep 17 00:00:00 2001
From: GermanBluefox <dogafox@gmail.com>
Date: Wed, 15 Jan 2025 14:13:28 +0000
Subject: [PATCH] Correcting layout of custom component:
 https://github.com/ioBroker/ioBroker.admin/issues/2886

---
 .../src/JsonConfigComponent/ConfigCustom.tsx  | 61 ++++++++++---------
 .../src/JsonConfigComponent/ConfigGeneric.tsx |  3 +-
 2 files changed, 33 insertions(+), 31 deletions(-)

diff --git a/packages/jsonConfig/src/JsonConfigComponent/ConfigCustom.tsx b/packages/jsonConfig/src/JsonConfigComponent/ConfigCustom.tsx
index 449ca38ca..24bca34e9 100644
--- a/packages/jsonConfig/src/JsonConfigComponent/ConfigCustom.tsx
+++ b/packages/jsonConfig/src/JsonConfigComponent/ConfigCustom.tsx
@@ -211,15 +211,32 @@ export default class ConfigCustom extends ConfigGeneric<ConfigCustomProps, Confi
 
     render(): JSX.Element {
         const CustomComponent: React.FC<ConfigGenericProps> = this.state.Component;
+        const schema = this.props.schema || ({} as ConfigItemCustom);
 
-        // render temporary placeholder
-        if (!CustomComponent) {
-            const schema = this.props.schema || ({} as ConfigItemCustom);
+        let item = CustomComponent ? (
+            <CustomComponent
+                {...this.props}
+                // @ts-expect-error BF (2024-12-18) Remove after the 7.4 will be mainstream. All following lines
+                socket={this.props.oContext.socket}
+                theme={this.props.oContext.theme}
+                themeType={this.props.oContext.themeType}
+                instance={this.props.oContext.instance}
+                adapterName={this.props.oContext.adapterName}
+                systemConfig={this.props.oContext.systemConfig}
+                forceUpdate={this.props.oContext.forceUpdate}
+            />
+        ) : this.state.error ? (
+            <div>{this.state.error}</div>
+        ) : (
+            <LinearProgress />
+        );
 
-            const item = (
+        // If any widths are defined
+        if (schema.xs || schema.sm || schema.md || schema.lg || schema.xl) {
+            item = (
                 <Grid2
                     size={{
-                        xs: schema.xs || undefined,
+                        xs: schema.xs || 12,
                         sm: schema.sm || undefined,
                         md: schema.md || undefined,
                         lg: schema.lg || undefined,
@@ -227,39 +244,25 @@ export default class ConfigCustom extends ConfigGeneric<ConfigCustomProps, Confi
                     }}
                     style={{
                         marginBottom: 0,
-                        // marginRight: 8,
                         textAlign: 'left',
                         ...schema.style,
                         ...(this.props.oContext.themeType === 'dark' ? schema.darkStyle : {}),
                     }}
                 >
-                    {this.state.error ? <div>{this.state.error}</div> : <LinearProgress />}
+                    {item}
                 </Grid2>
             );
+        }
 
-            if (schema.newLine) {
-                return (
-                    <>
-                        <div style={{ flexBasis: '100%', height: 0 }} />
-                        {item}
-                    </>
-                );
-            }
-            return item;
+        if (schema.newLine) {
+            return (
+                <>
+                    <div style={{ flexBasis: '100%', height: 0 }} />
+                    {item}
+                </>
+            );
         }
 
-        return (
-            <CustomComponent
-                {...this.props}
-                // @ts-expect-error BF (2024-12-18) Remove after the 7.4 will be mainstream. All following lines
-                socket={this.props.oContext.socket}
-                theme={this.props.oContext.theme}
-                themeType={this.props.oContext.themeType}
-                instance={this.props.oContext.instance}
-                adapterName={this.props.oContext.adapterName}
-                systemConfig={this.props.oContext.systemConfig}
-                forceUpdate={this.props.oContext.forceUpdate}
-            />
-        );
+        return item;
     }
 }
diff --git a/packages/jsonConfig/src/JsonConfigComponent/ConfigGeneric.tsx b/packages/jsonConfig/src/JsonConfigComponent/ConfigGeneric.tsx
index 503ecc02f..44ff9e6dc 100644
--- a/packages/jsonConfig/src/JsonConfigComponent/ConfigGeneric.tsx
+++ b/packages/jsonConfig/src/JsonConfigComponent/ConfigGeneric.tsx
@@ -1062,7 +1062,7 @@ export default class ConfigGeneric<
         const { error, disabled, hidden, defaultValue } = this.calculate(schema);
 
         if (hidden) {
-            // Remove all errors if element is hidden
+            // Remove all errors if an element is hidden
             if (Object.keys(this.isError).length) {
                 setTimeout(
                     isError => Object.keys(isError).forEach(attr => this.props.onError(attr)),
@@ -1146,7 +1146,6 @@ export default class ConfigGeneric<
                 }}
                 style={{
                     marginBottom: 0,
-                    // marginRight: 8,
                     textAlign: 'left',
                     width: schema.type === 'divider' || schema.type === 'header' ? schema.width || '100%' : undefined,
                     ...schema.style,