fix user fields UI

Author: Alberto Iannaccone

arduino-ide-extension/src/browser/dialogs/user-fields/user-fields-component.tsx

@@ -26,7 +26,7 @@ export const UserFieldsComponent = ({
 
   const updateUserField =
     (index: number) => (e: React.ChangeEvent<HTMLInputElement>) => {
-      let newBoardUserFields = [...boardUserFields];
+      const newBoardUserFields = [...boardUserFields];
       newBoardUserFields[index].value = e.target.value;
       setBoardUserFields(newBoardUserFields);
     };
@@ -48,26 +48,30 @@ export const UserFieldsComponent = ({
 
   return (
     <div>
-      {boardUserFields.map((field, index) => {
-        return (
-          <div className="dialogSection" key={index}>
-            <div className="dialogRow">
-              <label className="field-label">{field.label}</label>
-            </div>
-            <div className="dialogRow">
-              <input
-                type={field.secret ? 'password' : 'text'}
-                value={field.value}
-                className="theia-input"
-                placeholder={'Enter ' + field.label}
-                onChange={updateUserField(index)}
-              />
-            </div>
-          </div>
-        );
-      })}
+      <div className="user-fields-container">
+        <div className="user-fields-list">
+          {boardUserFields.map((field, index) => {
+            return (
+              <div className="dialogSection" key={index}>
+                <div className="dialogRow">
+                  <label className="field-label">{field.label}</label>
+                </div>
+                <div className="dialogRow">
+                  <input
+                    type={field.secret ? 'password' : 'text'}
+                    value={field.value}
+                    className="theia-input"
+                    placeholder={'Enter ' + field.label}
+                    onChange={updateUserField(index)}
+                  />
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
       <div className="dialogSection">
-        <div className="dialogRow">
+        <div className="dialogRow button-container">
           <button
             type="button"
             className="theia-button secondary install-cert-btn"

arduino-ide-extension/src/browser/style/user-fields-dialog.css

@@ -1,20 +1,20 @@
-.user-fields-dialog-title {
-  font-family: Open Sans;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 700;
-  line-height: 27px;
-  letter-spacing: 0.01em;
-  text-align: left;
+.user-fields-container {
+  max-height: 332px;
+  overflow: auto;
+  padding: 2px;
+}
+
+.user-fields-list {
+  margin: 16px 0;
 }
 
 .user-fields-dialog-content {
   width: 408px;
+  max-height: 491px;
 }
 
 .user-fields-dialog-content .field-label {
   color: #2c353a;
-  font-family: Open Sans;
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
@@ -26,3 +26,7 @@
 .user-fields-dialog-content .theia-input {
   flex-grow: 1;
 }
+
+.user-fields-dialog-content .button-container {
+  justify-content: flex-end;
+}