add ui option to remove inner cards

web/src/components/config-form/theme/fields/DetectorHardwareField.tsx

@@ -532,10 +532,19 @@ export function DetectorHardwareField(props: FieldProps) {
       const globalHidden = buildHiddenUiSchema(globalHiddenFields);
       const hiddenOverrides = buildHiddenUiSchema(hiddenByType[type] ?? []);
       const typeHidden = { type: { "ui:widget": "hidden" } } as UiSchema;
+      const nestedOverrides = {
+        "ui:options": {
+          disableNestedCard: true,
+        },
+      } as UiSchema;
 
       const withGlobalHidden = mergeUiSchema(baseUiSchema, globalHidden);
       const withTypeHidden = mergeUiSchema(withGlobalHidden, hiddenOverrides);
-      return mergeUiSchema(withTypeHidden, typeHidden);
+      const withTypeHiddenAndOptions = mergeUiSchema(
+        withTypeHidden,
+        typeHidden,
+      );
+      return mergeUiSchema(withTypeHiddenAndOptions, nestedOverrides);
     },
     [globalHiddenFields, hiddenByType, uiSchema?.additionalProperties],
   );
@@ -785,12 +794,7 @@ export function DetectorHardwareField(props: FieldProps) {
                         </div>
                       </div>
 
-                      <div
-                        className={cn(
-                          "rounded-md border border-border/70 bg-background p-0",
-                          readonly && "opacity-90",
-                        )}
-                      >
+                      <div className={cn(readonly && "opacity-90")}>
                         {renderInstanceForm(key, value)}
                       </div>
                     </div>

web/src/components/config-form/theme/templates/ObjectFieldTemplate.tsx

@@ -56,6 +56,8 @@ export function ObjectFieldTemplate(props: ObjectFieldTemplateProps) {
 
   const groupDefinitions =
     (uiSchema?.["ui:groups"] as Record<string, string[]> | undefined) || {};
+  const disableNestedCard =
+    uiSchema?.["ui:options"]?.disableNestedCard === true;
 
   const isHiddenProp = (prop: (typeof properties)[number]) =>
     prop.content.props.uiSchema?.["ui:widget"] === "hidden";
@@ -250,6 +252,36 @@ export function ObjectFieldTemplate(props: ObjectFieldTemplateProps) {
     );
   }
 
+  if (disableNestedCard) {
+    return (
+      <div className="space-y-4">
+        {hasCustomChildren ? (
+          children
+        ) : (
+          <>
+            {renderGroupedFields(regularProps)}
+            <AddPropertyButton
+              onAddProperty={onAddProperty}
+              schema={schema}
+              uiSchema={uiSchema}
+              formData={formData}
+              disabled={disabled}
+              readonly={readonly}
+            />
+
+            <AdvancedCollapsible
+              count={advancedProps.length}
+              open={showAdvanced}
+              onOpenChange={setShowAdvanced}
+            >
+              {renderGroupedFields(advancedProps)}
+            </AdvancedCollapsible>
+          </>
+        )}
+      </div>
+    );
+  }
+
   // Nested objects render as collapsible cards
   return (
     <Card className="w-full">