Add responsive size attributes to jsonConfig template (#1164)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: Apollon77 <11976694+Apollon77@users.noreply.github.com>
Co-authored-by: Ingo Fischer <github@fischer-ka.de>

Author: Copilot

CHANGELOG.md

@@ -6,6 +6,7 @@
 	(at the beginning of a new line)
 -->
 ## __WORK IN PROGRESS__
+* (@Apollon77/@copilot) Add responsive size attributes to jsonConfig template (#1121) · [Migration guide](docs/updates/20250831_jsonconfig_responsive_attributes.md)
 * (@hacki11) Dev Container improvements (#1137) · [Migration guide](docs/updates/20250404_devcontainer_improvments.md)
 * (@hacki11) Allow newer versions of `admin` (#1137) · [Migration guide](docs/updates/20250406_admin_dependency_ge.md)
 * (@Apollon77/@copilot) Upgrade to @iobroker/testing 5.1.1, remove redundant dependencies (#1165) · [Migration guide](docs/updates/20250831_iobroker_testing_51.md)

docs/updates/20250831_jsonconfig_responsive_attributes.md

@@ -0,0 +1,58 @@
+# Add responsive size attributes to jsonConfig template
+
+The jsonConfig template now includes responsive size attributes to follow current best practices for ioBroker admin UI layouts. If you have an existing adapter with jsonConfig, you should consider adding these attributes for better responsive design.
+
+## What changed
+
+The `generateSetting` function in `templates/admin/jsonConfig.json.ts` now includes Bootstrap-style responsive size attributes for all input types:
+
+```json
+{
+  "xs": 12,
+  "sm": 12,
+  "md": 6,
+  "lg": 4,
+  "xl": 4
+}
+```
+
+These attributes control how form fields are displayed across different screen sizes in the admin UI.
+
+## How to update your adapter
+
+If you have an existing adapter with `admin/jsonConfig.json`, you can manually add the responsive size attributes to improve the layout across different screen sizes.
+
+**Before:**
+```json
+{
+  "type": "text",
+  "label": "option1",
+  "newLine": true
+}
+```
+
+**After:**
+```json
+{
+  "type": "text",
+  "label": "option1",
+  "newLine": true,
+  "xs": 12,
+  "sm": 12,
+  "md": 6,
+  "lg": 4,
+  "xl": 4
+}
+```
+
+## Layout options reference
+
+For detailed information about layout options and responsive attributes in jsonConfig, please refer to the official documentation:
+https://github.com/ioBroker/ioBroker.admin/blob/master/packages/jsonConfig/README.md#layout-options-xllgmdsmxs
+
+## Benefits
+
+- Better responsive design across different screen sizes
+- Consistent layout with current ioBroker admin UI standards
+- More professional appearance on tablets and mobile devices
+- Follows Bootstrap grid system conventions

templates/admin/jsonConfig.json.ts

@@ -7,13 +7,23 @@ function generateSetting(settings: AdapterSettings): any {
 			type: "select",
 			label: settings.label || settings.key,
 			options: settings.options.map(o => ({ label: o.text, value: o.value })),
-			newLine: true
+			newLine: true,
+			xs: 12,
+			sm: 12,
+			md: 6,
+			lg: 4,
+			xl: 4
 		};
 	} else {
 		return {
 			type: settings.inputType,
 			label: settings.label || settings.key,
-			newLine: true
+			newLine: true,
+			xs: 12,
+			sm: 12,
+			md: 6,
+			lg: 4,
+			xl: 4
 		};
 	}
 }

test/baselines/adapter_JS_JsonUI_ESLint_TypeChecking_Spaces_SingleQuotes_Apache-2.0/admin/jsonConfig.json

@@ -5,12 +5,22 @@
         "option1": {
             "type": "checkbox",
             "label": "option1",
-            "newLine": true
+            "newLine": true,
+            "xs": 12,
+            "sm": 12,
+            "md": 6,
+            "lg": 4,
+            "xl": 4
         },
         "option2": {
             "type": "text",
             "label": "option2",
-            "newLine": true
+            "newLine": true,
+            "xs": 12,
+            "sm": 12,
+            "md": 6,
+            "lg": 4,
+            "xl": 4
         }
     }
 }