Use one grid cell per input

Author: robertbrignull

extensions/ql-vscode/src/view/model-editor/MethodRow.tsx

@@ -25,12 +25,6 @@ import { Codicon } from "../common";
 import { canAddNewModeledMethod } from "../../model-editor/shared/multiple-modeled-methods";
 import { DataGridCell, DataGridRow } from "../common/DataGrid";
 
-const MultiModelColumn = styled(DataGridCell)`
-  display: flex;
-  flex-direction: column;
-  gap: 0.5em;
-`;
-
 const ApiOrMethodRow = styled.div`
   min-height: calc(var(--input-height) * 1px);
   display: flex;
@@ -162,7 +156,7 @@ const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
         ref={ref}
         focused={revealedMethodSignature === method.signature}
       >
-        <DataGridCell>
+        <DataGridCell gridRow={`span ${modeledMethods.length}`}>
           <ApiOrMethodRow>
             <ModelingStatusIndicator status={modelingStatus} />
             <MethodClassifications method={method} />
@@ -199,54 +193,41 @@ const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
             )}
           </>
         )}
-        {!props.modelingInProgress && (
-          <>
-            <MultiModelColumn>
-              {modeledMethods.map((modeledMethod, index) => (
+        {!props.modelingInProgress &&
+          modeledMethods.map((modeledMethod, index) => (
+            <>
+              <DataGridCell>
                 <ModelTypeDropdown
-                  key={index}
                   method={method}
                   modeledMethod={modeledMethod}
                   onChange={modeledMethodChangedHandlers[index]}
                 />
-              ))}
-            </MultiModelColumn>
-            <MultiModelColumn>
-              {modeledMethods.map((modeledMethod, index) => (
+              </DataGridCell>
+              <DataGridCell>
                 <ModelInputDropdown
-                  key={index}
                   method={method}
                   modeledMethod={modeledMethod}
                   onChange={modeledMethodChangedHandlers[index]}
                 />
-              ))}
-            </MultiModelColumn>
-            <MultiModelColumn>
-              {modeledMethods.map((modeledMethod, index) => (
+              </DataGridCell>
+              <DataGridCell>
                 <ModelOutputDropdown
-                  key={index}
                   method={method}
                   modeledMethod={modeledMethod}
                   onChange={modeledMethodChangedHandlers[index]}
                 />
-              ))}
-            </MultiModelColumn>
-            <MultiModelColumn>
-              {modeledMethods.map((modeledMethod, index) => (
+              </DataGridCell>
+              <DataGridCell>
                 <ModelKindDropdown
-                  key={index}
                   method={method}
                   modeledMethod={modeledMethod}
                   onChange={modeledMethodChangedHandlers[index]}
                 />
-              ))}
-            </MultiModelColumn>
-            {viewState.showMultipleModels && (
-              <MultiModelColumn>
-                {modeledMethods.map((_, index) =>
-                  index === modeledMethods.length - 1 ? (
+              </DataGridCell>
+              {viewState.showMultipleModels && (
+                <DataGridCell>
+                  {index === modeledMethods.length - 1 ? (
                     <CodiconRow
-                      key={index}
                       appearance="icon"
                       aria-label="Add new model"
                       onClick={handleAddModelClick}
@@ -256,19 +237,17 @@ const ModelableMethodRow = forwardRef<HTMLElement | undefined, MethodRowProps>(
                     </CodiconRow>
                   ) : (
                     <CodiconRow
-                      key={index}
                       appearance="icon"
                       aria-label="Remove model"
                       onClick={removeModelClickedHandlers[index]}
                     >
                       <Codicon name="trash" />
                     </CodiconRow>
-                  ),
-                )}
-              </MultiModelColumn>
-            )}
-          </>
-        )}
+                  )}
+                </DataGridCell>
+              )}
+            </>
+          ))}
       </DataGridRow>
     );
   },