Styling fixing for lesion tracker

LesionTracker/client/body.styl

@@ -22,3 +22,49 @@ table#tblStudyList tbody > tr:hover{
   color: white
 }
 
+table#tblStudyList tbody > tr > td{
+  word-wrap: break-word
+}
+
+
+/* Toolbar Styles */
+
+/* iphone6 Portrait */
+
+  @media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : portrait) {
+
+    table#tblStudyList {
+      table-layout: fixed
+      font-size: 0.4em
+    }
+
+
+    #tablist {
+      width: 84%;
+      border: solid 1px red;
+      overflow-x: auto;
+
+    }
+    #toolbar .btn-group button {
+      width: 35px;
+      height: 35px;
+    }
+
+  }
+
+/* iphone6 Plus Portrait */
+
+@media only screen and (min-device-width : 414px) and (max-device-width : 736px) and (orientation : portrait) {
+  #tablist {
+    width: 84%;
+    border: solid 1px green;
+    overflow-x: auto;
+  }
+
+  #toolbar .btn-group button {
+    width: 40px;
+    height: 40px;
+  }
+
+}
+

LesionTracker/client/components/lesionTrackerLayout/lesionTrackerLayout.styl

@@ -4,20 +4,35 @@
   top: 0;
   right: 0;
   color: white;
+  @media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : portrait)
+    width: 15%
 
 .navbar-brand
     display: inline-block
-    padding: 0;
+    padding: 0
-    margin-right: 5px;
+    margin-right: 5px
+    height: 100%
+    width: 100%
 
     img
       height: 30px
       float: left
       margin-right: 10px
       margin-top: 5px;
+      /* Media queries for iPhone6*/
+      @media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : portrait)
+        height: 20px
+        margin-top: 10px
+        margin-bottom: 10px
+        margin-right: 5px
 
     h4.name
       float: left
       margin: 10px 0;
       font-family: "Sanchez"
       color: #C1C1C1
+      @media only screen and (min-device-width : 375px) and (max-device-width : 667px) and (orientation : portrait)
+        font-size: 0.3em
+        font-size: 0.3em
+        width: 50%;
+

LesionTracker/client/head.html

@@ -2,7 +2,11 @@
     <meta charset="utf-8">
     <title>Lesion Tracker</title>
     <meta name="description" content="Prototype viewer application for oncology">
-    <meta name="viewport" content="user-scalable=no, initial-scale=1,maximum-scale=1, minimum-scale=1" />
+    <!-- Prevents page zooming -->
+    <!--<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">-->
+
+    <!-- Enables page zooming -->
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="shortcut icon" type="image/png" href="images/logo.png" sizes="16x16 32x32 64x64">
     <!--Best display for mobile devices-->
     <meta http-equiv="cleartype" content="on">