Add scroll bar to the side panel to cater for smaller screen.

src/main/resources/css/master.css

@@ -168,7 +168,7 @@ Remove scroll bars
 
 .ui-table *.scroll-bar:vertical *.increment-arrow,
 .ui-table *.scroll-bar:vertical *.decrement-arrow {
-    -fx-background-color: null;
+    -fx-background-color: #0e6d6c;
     -fx-background-radius: 0;
     -fx-background-insets: 0;
     -fx-padding: 0;
@@ -177,7 +177,7 @@ Remove scroll bars
 
 .ui-table *.scroll-bar:vertical *.increment-button,
 .ui-table *.scroll-bar:vertical *.decrement-button {
-    -fx-background-color: null;
+    -fx-background-color: #0e6d6c;
     -fx-background-radius: 0;
     -fx-background-insets: 0;
     -fx-padding: 0;

src/main/resources/views/RaceView.fxml

@@ -9,8 +9,8 @@
 
 <GridPane maxHeight="960.0" maxWidth="1530.0" prefHeight="960.0" prefWidth="1530.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="seng302.controllers.RaceViewController">
     <columnConstraints>
-        <ColumnConstraints maxWidth="246.0" minWidth="246.0" prefWidth="246.0" />
+        <ColumnConstraints maxWidth="419.0" minWidth="-Infinity" prefWidth="258.0" />
-        <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="1034.0" />
+        <ColumnConstraints hgrow="SOMETIMES" maxWidth="1278.0" minWidth="10.0" prefWidth="1272.0" />
     </columnConstraints>
     <rowConstraints>
         <RowConstraints minHeight="500.0" prefHeight="30.0" vgrow="SOMETIMES" />
@@ -18,7 +18,9 @@
         <RowConstraints />
     </rowConstraints>
     <children>
-        <AnchorPane prefHeight="960.0" prefWidth="250.0" style="-fx-background-color: #2C2c36;" GridPane.rowSpan="3">
+      <ScrollPane prefHeight="200.0" prefWidth="200.0">
+         <content>
+              <AnchorPane prefHeight="996.0" prefWidth="240.0" style="-fx-background-color: #2C2c36;">
                   <children>
                       <Label layoutX="11.0" layoutY="259.0" text="Team Position" textFill="WHITE" />
                       <Label layoutX="13.0" layoutY="432.0" text="Settings" textFill="WHITE" />
@@ -51,7 +53,7 @@
                   <Button fx:id="selectAnnotationBtn" layoutX="35.0" layoutY="578.0" mnemonicParsing="false" prefHeight="18.0" prefWidth="170.0" styleClass="blue-ui-btn" text="Select Annotations" textFill="WHITE" />
                   <Text fill="WHITE" layoutX="11.0" layoutY="649.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Boat Selection" />
                   <ComboBox fx:id="boatSelectionComboBox" layoutX="37.0" layoutY="664.0" prefHeight="25.0" prefWidth="170.0" promptText="Select Boat" styleClass="combo-box-base" />
-            <LineChart fx:id="raceSparkLine" layoutX="-1.0" layoutY="719.0" legendVisible="false" prefHeight="277.0" prefWidth="246.0" title="Boat Positions">
+                  <LineChart fx:id="raceSparkLine" layoutX="-1.0" layoutY="719.0" legendVisible="false" prefHeight="277.0" prefWidth="233.0" title="Boat Positions">
                     <xAxis>
                       <CategoryAxis label="Leg Number" side="BOTTOM" styleClass="spark-line-xaxis" />
                     </xAxis>
@@ -61,6 +63,8 @@
                   </LineChart>
                   </children>
               </AnchorPane>
+         </content>
+      </ScrollPane>
         <AnchorPane fx:id="contentAnchorPane" maxHeight="960.0" maxWidth="1280.0" prefHeight="960.0" prefWidth="1280.0" style="-fx-background-color: skyblue;" GridPane.columnIndex="1" GridPane.halignment="LEFT" GridPane.rowSpan="2147483647" GridPane.valignment="TOP">
          <children>
             <fx:include fx:id="includedCanvas" source="CanvasView.fxml" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />