Setup Assistant: Initial styling to Blender step

web/app/src/assets/base.css

@@ -1,5 +1,6 @@
 :root {
   --spacer: 1rem;
+  --spacer-xl: 1.5rem;
   --spacer-lg: 1.33rem;
   --spacer-sm: .66rem;
   --spacer-xs: .33rem;
@@ -319,6 +320,13 @@ label {
   display: block;
 }
 
+fieldset {
+  background-color: var(--color-background-column-highlight);
+  border: none;
+  margin-bottom: var(--spacer);
+  padding: var(--spacer);
+}
+
 input[type="text"] {
   appearance: none;
   background-color: var(--color-background);

web/app/src/views/FirstTimeWizardView.vue

@@ -88,9 +88,12 @@
 
         <div v-if="isBlenderExeFinding" class="is-in-progress">Looking for Blender installs...</div>
 
-        <p v-if="autoFoundBlenders.length === 0">Provide a path to Blender. This path should be accessible by all Workers. If your rendering
+        <p v-if="autoFoundBlenders.length === 0">
-          setup features operating systems different form the one you are currently using, you can
+          Provide a path to Blender. This path should be accessible by all Workers.
-          manually set up the other paths later.</p>
+          <br/><br/>
+          If your rendering setup features operating systems different form the one you are currently using,
+          you can manually set up the other paths later.
+        </p>
 
         <p v-else>Choose how a Worker should invoke the Blender command when performing a task.</p>
 
@@ -118,27 +121,28 @@
             </span>
           </label>
           <label for="blender-input_path">
-            <input
+            <div>
-              type="radio"
+              <input
-              v-model="selectedBlender"
+                type="radio"
-              name="blender"
+                v-model="selectedBlender"
-              :value="blenderFromInputPath"
+                name="blender"
-              id="blender-input_path"
+                :value="blenderFromInputPath"
-              >
+                id="blender-input_path"
-            {{ sourceLabels['input_path'] }} <br>
+                >
-            <span>
+              {{ sourceLabels['input_path'] }}
+            </div>
+            <div>
               <input
                 @input="checkBlenderExePath"
                 v-model="customBlenderExe"
                 :class="{'is-invalid': blenderExeCheckResult != null && !blenderExeCheckResult.is_usable}"
-
                 type="text"
                 placeholder="Blender Path"
               >
-            </span>
+              <p v-if="isBlenderExeChecking" class="is-in-progress">Checking...</p>
-            <p v-if="isBlenderExeChecking" class="is-in-progress">Checking...</p>
+              <p v-if="blenderExeCheckResult != null && !blenderExeCheckResult.is_usable" class="check-failed">
-            <p v-if="blenderExeCheckResult != null && !blenderExeCheckResult.is_usable" class="check-failed">
+                {{ blenderExeCheckResult.cause }}</p>
-              {{ blenderExeCheckResult.cause }}</p>
+            </div>
           </label>
         </fieldset>
 
@@ -622,4 +626,12 @@ h2 {
     background-position: 200px;
   }
 }
+
+fieldset input[type="text"] {
+  margin-left: var(--spacer-xl);
+  margin-top: var(--spacer-sm);
+  width: -moz-available;
+  width: -webkit-fill-available;
+}
+
 </style>