From 6c1529e7ec5d20c3b29003a081eb1b7b1fb3acfc Mon Sep 17 00:00:00 2001
From: GermanBluefox <dogafox@gmail.com>
Date: Tue, 14 Jan 2025 14:55:27 +0000
Subject: [PATCH] Added back the label description:
 https://github.com/ioBroker/ioBroker.matter/issues/297

---
 src-admin/src/Tabs/Options.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src-admin/src/Tabs/Options.tsx b/src-admin/src/Tabs/Options.tsx
index 0276663..9b34e6a 100644
--- a/src-admin/src/Tabs/Options.tsx
+++ b/src-admin/src/Tabs/Options.tsx
@@ -245,6 +245,11 @@ class Options extends Component<OptionsProps, OptionsState> {
 
                 <div style={{ marginTop: 50 }}>
                     <Typography sx={styles.header}>{I18n.t('Controller Settings')}</Typography>
+                    <InfoBox type="info">
+                        {I18n.t(
+                            'The label set here is used as Label when ioBroker connects to a device as controller and might be shown by other Controllers in their overviews about other connected ecosystems.',
+                        )}
+                    </InfoBox>
                     <TextField
                         variant="standard"
                         label={I18n.t('Controller fabric label')}
@@ -253,6 +258,9 @@ class Options extends Component<OptionsProps, OptionsState> {
                         onChange={e => this.props.onChange('controllerFabricLabel', e.target.value)}
                         margin="normal"
                         slotProps={{
+                            htmlInput: {
+                                maxLength: 32,
+                            },
                             input: {
                                 endAdornment: this.props.native.controllerFabricLabel ? (
                                     <IconButton
@@ -264,7 +272,10 @@ class Options extends Component<OptionsProps, OptionsState> {
                                 ) : null,
                             },
                         }}
-                        style={styles.input}
+                        style={{
+                            ...styles.input,
+                            maxWidth: 350,
+                        }}
                     />
                 </div>