fix: remove use of inline styling in Form.tsx

Fixes #4112

Author: starpit

plugins/plugin-client-common/web/css/static/Form.scss

@@ -1,4 +1,11 @@
 [kui-theme-style] {
+  .kui--form-section {
+    &:not(:first-child) {
+      padding-top: 1em;
+      margin-top: 1em;
+    }
+  }
+
   .bx--form {
     display: grid;
     grid-template-rows: min-content;

plugins/plugin-kubectl/src/lib/view/modes/Form.tsx

@@ -36,28 +36,33 @@ export default function SidecarForm({
   className?: string
 }) {
   return (
-    <Form className={nested ? className : `padding-content scrollable ${className || ''}`}>
-      {Object.keys(map).map((key, idx) => {
-        const vvalue = map[key]
-        const value =
-          (typeof vvalue === 'number' ? vvalue.toLocaleString() : typeof vvalue !== 'object' ? vvalue : vvalue.label) ||
-          ''
+    <div className="kui--form-section">
+      <Form className={nested ? className : `padding-content scrollable ${className || ''}`}>
+        {Object.keys(map).map((key, idx) => {
+          const vvalue = map[key]
+          const value =
+            (typeof vvalue === 'number'
+              ? vvalue.toLocaleString()
+              : typeof vvalue !== 'object'
+              ? vvalue
+              : vvalue.label) || ''
 
-        const colspan = Math.max(Math.ceil(key.length / 8), Math.ceil((value.length + 2) / 5.5))
-        const style = { gridColumn: `span ${colspan > 15 ? 8 : colspan}` }
-        const className = typeof vvalue !== 'object' ? undefined : 'kui--form-item--for-label'
+          const colspan = Math.max(Math.ceil(key.length / 8), Math.ceil((value.length + 2) / 5.5))
+          const style = { gridColumn: `span ${colspan > 15 ? 8 : colspan}` }
+          const className = typeof vvalue !== 'object' ? undefined : 'kui--form-item--for-label'
 
-        return (
-          <div key={idx} style={style} className={className}>
-            {colspan > 15 ? (
-              <TextArea readOnly id={`kubectl-summary-${key}`} labelText={key} defaultValue={value} />
-            ) : (
-              <TextInput readOnly id={`kubectl-summary-${key}`} labelText={key} defaultValue={value} />
-            )}
-          </div>
-        )
-      })}
-    </Form>
+          return (
+            <div key={idx} style={style} className={className}>
+              {colspan > 15 ? (
+                <TextArea readOnly id={`kubectl-summary-${key}`} labelText={key} defaultValue={value} />
+              ) : (
+                <TextInput readOnly id={`kubectl-summary-${key}`} labelText={key} defaultValue={value} />
+              )}
+            </div>
+          )
+        })}
+      </Form>
+    </div>
   )
 }
 
@@ -74,11 +79,7 @@ export function FormWithLabels(props: { map: FormMap; resource: KubeResource })
   return (
     <div className="padding-content scrollable">
       <SidecarForm nested map={props.map} />
-      {nLabels > 0 && (
-        <div style={{ paddingTop: '1em' }}>
-          <SidecarForm nested map={labelMap} className="top-pad" />
-        </div>
-      )}
+      {nLabels > 0 && <SidecarForm nested map={labelMap} />}
     </div>
   )
 }