Clean up formatting on install page (#21668)

The install page has been somewhat inconsistently styled for a while.
This PR simplifies and standardises the styling of these fields makes
things line up better across widths.

Replace #21660

Signed-off-by: Andrew Thornton <art27@cantab.net>

Old:
![Screenshot from 2022-11-02
23-07-05](https://user-images.githubusercontent.com/1824502/199619007-4a6b66c5-e19c-4d29-b71b-9aa73f2789ca.png)


New:
![Screenshot from 2022-11-02
23-04-28](https://user-images.githubusercontent.com/1824502/199618779-370f88e7-b590-4abd-afb9-b66cc3194a5d.png)

Signed-off-by: Andrew Thornton <art27@cantab.net>

1 files changed, 37 insertions, 16 deletions

diff --git a/web_src/less/_install.less b/web_src/less/_install.less
index 5769ef68ba..515d727f8a 100644
--- a/web_src/less/_install.less
+++ b/web_src/less/_install.less
@@ -1,36 +1,57 @@
 .page-content.install {
   padding-top: 45px;
 
-  form {
-    @input-padding: 320px !important;
+  form.ui.form {
+    @input-padding: 30%;
 
-    .inline.field label {
+    .inline.field > label {
       text-align: right;
       width: @input-padding;
+      padding-right: 10px;
+      margin-right: 0;
+    }
+
+    .inline.field > .ui.checkbox:first-child {
+      margin-left: @input-padding;
+      padding-left: 5px;
+      label {
+        width: auto;
+      }
+    }
+
+    .title {
+      margin-left: @input-padding;
+      padding-left: 5px;
     }
 
     input {
-      width: 35% !important;
+      width: 60%;
+    }
+
+    details.optional.field {
+      &[open] {
+        border-bottom: 1px solid var(--color-secondary);
+        padding-bottom: 10px;
+
+        summary {
+          margin-bottom: 10px;
+        }
+      }
+
+      * {
+        box-sizing: border-box;
+      }
     }
 
     .field {
       text-align: left;
 
       .help {
-        margin-left: @input-padding+15px;
+        margin-left: @input-padding;
+        padding-left: 5px;
+        width: 60%;
       }
 
-      &.optional {
-        .title {
-          margin-left: 38%;
-        }
-        .checkbox {
-          margin-left: 40% !important;
-          label {
-            width: auto !important;
-          }
-        }
-      }
     }
   }