UI polish for modeling panel (#2917)

* Don't push content down with unsaved tag

* Adjust spacing between components

Author: charisk

extensions/ql-vscode/src/view/method-modeling/MethodModeling.tsx

@@ -10,17 +10,18 @@ import { VSCodeTag } from "@vscode/webview-ui-toolkit/react";
 import { ReviewInEditorButton } from "./ReviewInEditorButton";
 
 const Container = styled.div`
-  padding: 0.3rem;
+  padding-top: 0.5rem;
   margin-bottom: 1rem;
   width: 100%;
 `;
 
 const Title = styled.div`
-  padding-bottom: 0.3rem;
-  font-size: 0.7rem;
+  padding-bottom: 0.5rem;
+  font-size: 0.9rem;
   text-transform: uppercase;
   display: flex;
   justify-content: space-between;
+  align-items: center;
 `;
 
 const DependencyContainer = styled.div`
@@ -34,8 +35,23 @@ const DependencyContainer = styled.div`
   padding: 0.5rem;
   word-wrap: break-word;
   word-break: break-all;
+  margin-bottom: 0.8rem;
+`;
+
+const StyledMethodModelingInputs = styled(MethodModelingInputs)`
+  padding-bottom: 0.5rem;
 `;
 
+const StyledVSCodeTag = styled(VSCodeTag)<{ visible: boolean }>`
+  visibility: ${(props) => (props.visible ? "visible" : "hidden")};
+`;
+
+const UnsavedTag = ({ modelingStatus }: { modelingStatus: ModelingStatus }) => (
+  <StyledVSCodeTag visible={modelingStatus === "unsaved"}>
+    Unsaved
+  </StyledVSCodeTag>
+);
+
 export type MethodModelingProps = {
   modelingStatus: ModelingStatus;
   method: Method;
@@ -54,13 +70,13 @@ export const MethodModeling = ({
       <Title>
         {method.packageName}
         {method.libraryVersion && <>@{method.libraryVersion}</>}
-        {modelingStatus === "unsaved" ? <VSCodeTag>Unsaved</VSCodeTag> : null}
+        <UnsavedTag modelingStatus={modelingStatus} />
       </Title>
       <DependencyContainer>
         <ModelingStatusIndicator status={modelingStatus} />
         <MethodName {...method} />
       </DependencyContainer>
-      <MethodModelingInputs
+      <StyledMethodModelingInputs
         method={method}
         modeledMethod={modeledMethod}
         onChange={onChange}

extensions/ql-vscode/src/view/method-modeling/MethodModelingInputs.tsx

@@ -11,11 +11,14 @@ const Container = styled.div`
   padding-top: 0.5rem;
 `;
 
-const Input = styled.label``;
+const Input = styled.label`
+  display: block;
+  padding-bottom: 0.3rem;
+`;
 
 const Name = styled.span`
   display: block;
-  padding-bottom: 0.3rem;
+  padding-bottom: 0.5rem;
 `;
 
 export type MethodModelingInputsProps = {

extensions/ql-vscode/src/view/method-modeling/ReviewInEditorButton.tsx

@@ -6,7 +6,7 @@ import TextButton from "../common/TextButton";
 import { Method } from "../../model-editor/method";
 
 const Button = styled(TextButton)`
-  margin-top: 0.5rem;
+  margin-top: 0.7rem;
 `;
 
 type Props = {