From e1b6255137701f8a0c1afdc2c81fc1a8161ae1e6 Mon Sep 17 00:00:00 2001
From: Nathan Cannon <nathan.cannon@edf-energy.com>
Date: Mon, 17 Sep 2018 12:56:02 +0100
Subject: [PATCH] Fixed form item width by putting them in columns.

---
 frontend/src/views/Home.vue | 24 +++++++++++++++++-------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index 56ba098..8cd5cda 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -1,17 +1,22 @@
 <template>
-  <b-container class="home">
+  <b-container class="home" align-h="center">
     <h1>Training Observations</h1>
-    <b-row>
+    <b-row align-h="center">
+      <b-col>
       <b-form-group label="Site">
         <b-form-select :value="site" @input="setSite" :options="siteOptions"></b-form-select>
       </b-form-group>
+      </b-col>
     </b-row>
-    <b-row>
+    <b-row align-h="center">
+      <b-col>
       <b-form-group label="Description">
         <b-form-input :value="description" @input="setDescription" type="text"></b-form-input>
       </b-form-group>
+      </b-col>
     </b-row>
-    <b-row>
+    <b-row align-h="center">
+      <b-col>
       <b-form-group label="Type">
         <b-form-select :value="type" @input="setType">
           <option :value=null>Select a training type</option>
@@ -19,16 +24,21 @@
           <option value="CONTINUING">CONTINUING</option>
         </b-form-select>
       </b-form-group>
+      </b-col>
     </b-row>
-    <b-row>
+    <b-row align-h="center">
+      <b-col>
       <b-form-group label="Tutor(s)">
         <p v-if="site == null">Select a site first.</p>
         <v-icon name="spinner" spin v-if="loadingTutors"/>
         <b-form-checkbox-group :value="tutors" @input="setTutors" :options="tutorOptions"></b-form-checkbox-group>
       </b-form-group>
+      </b-col>
     </b-row>
-    <b-row>
-      <b-button >Start</b-button>
+    <b-row align-h="center">
+      <b-col>
+      <b-button>Start</b-button>
+      </b-col>
     </b-row>
   </b-container>
 </template>