css: tweak dialog box margins.

Tweak margins around dialog boxes to fix some poorly spaced elements,
especially around buttons and forms controls.

app/javascript/src/javascripts/notes.js

@@ -557,7 +557,6 @@ class Note {
       let $textarea = $('<textarea></textarea>');
       $textarea.val(note.original_body);
       $textarea.css({
-        width: "97%",
         height: "85%",
         resize: "none",
       });

app/javascript/src/styles/common/simple_form.scss

@@ -107,10 +107,31 @@ form.one-line-form {
 }
 
 div.ui-dialog {
-  div.input {
+  textarea, input[type="text"] {
-    input[type="text"] {
+    width: 100%;
-      width: 100%;
+    max-width: 100%;
-      max-width: 100%;
+    box-sizing: border-box;
+  }
+
+  form.simple_form {
+    margin-bottom: 0;
+
+    div.input {
+      margin-bottom: 0.5em;
+    }
+
+    div.input.hidden {
+      display: none;
+    }
+  }
+
+  /* the submit and close buttons */
+  .ui-dialog-buttonpane {
+    margin-top: 0;
+    padding: 1em 1em 0 0;
+
+    .ui-button {
+      margin: 0 0.25em;
     }
   }
 }