fix: Form component sometimes has too-small TextInputs

Fixes #4036

Author: starpit

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

@@ -5,7 +5,7 @@
     grid-column-gap: 1em;
     grid-row-gap: 1em;
     grid-auto-flow: dense;
-    grid-template-columns: repeat(10, minmax(min-content, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(3em, auto));
     flex: unset;
 
     .bx--form-item {

plugins/plugin-kubectl/src/controller/kubectl/get.ts

@@ -80,7 +80,6 @@ export async function doGetAsEntity(
   try {
     // this is the raw data string we get from `kubectl`
     const data = response.content.stdout
-    console.error('!!!!DDDD', data)
 
     // parse the raw response; the parser we use depends on whether
     // the user asked for JSON or for YAML

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

@@ -19,13 +19,11 @@ import { Form, TextInput } from 'carbon-components-react'
 
 /** @return a ReactElement */
 export default function SidecarForm({ map }: { map: Record<string, string> }) {
-  const minWidth = Object.keys(map).reduce((min, key) => Math.min(min, map[key].length), 10000)
-
   return (
     <Form className="page-content padding-content scrollable kui--placeholder-primary">
       {Object.keys(map).map((key, idx) => {
-        const width = Math.max(map[key].length) / minWidth / 2.5
-        const style = { gridColumn: `span ${~~width}` }
+        const colspan = Math.max(Math.ceil(key.length / 5), Math.ceil(map[key].length / 3.5))
+        const style = { gridColumn: `span ${colspan}` }
 
         return (
           <div key={idx} style={style}>