From 0c5f79f434920f2a18f094073db5fd350778ee6f Mon Sep 17 00:00:00 2001
From: Evren Ozkan <evren217@gmail.com>
Date: Fri, 5 May 2017 12:17:29 -0400
Subject: [PATCH] OHIF-164 Prevent overflowing navigationButtons of the
 protocol editor

---
 .../protocolEditor/protocolEditor.html        |  2 +-
 .../protocolEditor/protocolEditor.styl        | 68 ++++++++++---------
 2 files changed, 37 insertions(+), 33 deletions(-)

diff --git a/Packages/ohif-hanging-protocols/client/components/protocolEditor/protocolEditor.html b/Packages/ohif-hanging-protocols/client/components/protocolEditor/protocolEditor.html
index 93723f6d7..e2e33bed3 100644
--- a/Packages/ohif-hanging-protocols/client/components/protocolEditor/protocolEditor.html
+++ b/Packages/ohif-hanging-protocols/client/components/protocolEditor/protocolEditor.html
@@ -1,6 +1,6 @@
 <template name="protocolEditor">
     <div id='protocolEditor'>
-        <div class="row">
+        <div class="row navigationButtonsContainer">
             <div class="navigationButtons col-xs-12">
                 <ul class="nav nav-pills">
                     <li class="active">
diff --git a/Packages/ohif-hanging-protocols/client/components/protocolEditor/protocolEditor.styl b/Packages/ohif-hanging-protocols/client/components/protocolEditor/protocolEditor.styl
index 7a55129dc..bbb0033df 100644
--- a/Packages/ohif-hanging-protocols/client/components/protocolEditor/protocolEditor.styl
+++ b/Packages/ohif-hanging-protocols/client/components/protocolEditor/protocolEditor.styl
@@ -10,42 +10,46 @@ $height = 20px
   position: absolute
   top: 0
 
-  .navigationButtons
-    ul
-      margin: 0 auto
-      width: 300px
+  .navigationButtonsContainer
+    margin-left: 0
+    margin-right: 0
 
-    li
-      text-align: center
-      width: 150px
-      margin: 0
+    .navigationButtons
+      ul
+        margin: 0 auto
+        width: 300px
+
+      li
+        text-align: center
+        width: 150px
+        margin: 0
+
+        &:first-child:not(:last-child)
+          a
+            border-top-right-radius: 0
+            border-bottom-right-radius: 0
+
+        &:last-child:not(:first-child)
+          a
+            border-top-left-radius: 0
+            border-bottom-left-radius: 0
 
-      &:first-child:not(:last-child)
         a
-          border-top-right-radius: 0
-          border-bottom-right-radius: 0
+          padding: 3px 9px
+          cursor: pointer
+          text-decoration: none
+          outline: none
+          theme('background-color', '$uiGrayDark')
+          theme('border', '2px solid $uiBorderColorDark')
+          theme('color', '$textSecondaryColor')
+          transition: transition($sidebarTransition)
+          border-radius: $height
 
-      &:last-child:not(:first-child)
-        a
-          border-top-left-radius: 0
-          border-bottom-left-radius: 0
-
-      a
-        padding: 3px 9px
-        cursor: pointer
-        text-decoration: none
-        outline: none
-        theme('background-color', '$uiGrayDark')
-        theme('border', '2px solid $uiBorderColorDark')
-        theme('color', '$textSecondaryColor')
-        transition: transition($sidebarTransition)
-        border-radius: $height
-
-      &.active a
-        theme('background-color', '$activeColor')
-        theme('border-color', '$uiBorderColorActive')
-        theme('color', '$textColorActive')
-        transition: transition($sidebarTransition)
+        &.active a
+          theme('background-color', '$activeColor')
+          theme('border-color', '$uiBorderColorActive')
+          theme('color', '$textColorActive')
+          transition: transition($sidebarTransition)
 
   p
   h2