Tidied up mini stream formatting

openflexure_microscope/api/static/src/components/modalComponents/calibrationModal.vue

@@ -313,6 +313,5 @@ export default {
   width: 75%;
   margin-left: auto;
   margin-right: auto;
-  border: 1px solid #555;
 }
 </style>

openflexure_microscope/api/static/src/components/viewComponents/miniStreamDisplay.vue

@@ -43,6 +43,7 @@ export default {
 .stream-display img {
   text-align: center;
   object-fit: contain;
+  border: 1px solid #555;
 }
 
 .stream-display {

openflexure_microscope/api/static/src/components/viewComponents/settingsComponents/cameraSettings.vue

@@ -146,6 +146,5 @@ export default {
   margin-left: auto;
   margin-right: auto;
   margin-top: 50px;
-  border: 1px solid #555;
 }
 </style>

openflexure_microscope/api/static/src/components/viewComponents/settingsComponents/cameraStageMappingSettings.vue

@@ -27,19 +27,25 @@
         Download calibration data
       </button>
     </form>
+
+    <div id="mini-stream">
+      <miniStreamDisplay />
+    </div>
   </div>
 </template>
 
 <script>
 import axios from "axios";
 import taskSubmitter from "../../genericComponents/taskSubmitter";
+import miniStreamDisplay from "../miniStreamDisplay.vue";
 
 // Export main app
 export default {
   name: "CameraStageMappingSettings",
 
   components: {
-    taskSubmitter
+    taskSubmitter,
+    miniStreamDisplay
   },
 
   props: {
@@ -167,4 +173,11 @@ export default {
   margin-left: auto;
   margin-right: auto;
 }
+#mini-stream {
+  width: 500px;
+  text-align: center;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 50px;
+}
 </style>