PR #166 fix long level name text wrapping issue

src/style/main.css

@@ -297,7 +297,6 @@ div.canvasTerminalHolder > div.terminal-window-holder {
 }
 
 /* Toolbar */
-
 div.toolbar {
   /* borrowed from try.github.com along with a bunch of other things */
   background-image: -webkit-linear-gradient(top, #EFEDEE, #C1C1C1);
@@ -326,7 +325,7 @@ div.toolbar.level-toolbar {
   background-image: -ms-linear-gradient(top, #B2FF2E, #8AD247);
   background-image: linear-gradient(top, #B2FF2E, #8AD247);
   border-radius: 0;
-  height: 50px;
+  height: inherit;
   font-size: 12px;
 }
 
@@ -338,10 +337,32 @@ div.toolbar.level-toolbar button {
   background-image: -webkit-linear-gradient(top, #EFEDEE, #C1C1C1);
 }
 
-#show-goal {
-  position: absolute;
-  top: 10px;
-  left: 4px;
+div.toolbar div.clearfix {
+  zoom: 1;
+  margin: 10px 0;
+}
+
+div.toolbar div.clearfix:after {
+  clear: both;
+  content: ".";
+  display: block;
+  font-size: 0;
+  height: 0;
+  line-height: 0;
+  visibility: hidden;
+}
+
+div.toolbar div.showGoalWrapper {
+  float: left;
+  margin-left: 6px;
+}
+
+div.toolbar div.levelNameWrapper {
+  text-align: center;
+  position: relative;
+  top: 5px;
+  margin-right: 23%;
+  margin-left: 90px;
 }
 
 span.levelToolbarSpan {

src/template.index.html

@@ -143,13 +143,17 @@
 
   <script type="text/html" id="level-toolbar-template">
     <div class="toolbar level-toolbar box vertical center transitionAll hidden">
-      <div>
-        <button id="show-goal" type="button">Show Goal</button>
-        <i class="icon-bolt"></i>
+      <div class="clearfix">
+        <div class="showGoalWrapper">
+          <button id="show-goal" type="button">Show Goal</button>
+        </div>
+        <div class="levelNameWrapper">
+          <i class="icon-bolt"></i>
           Level
-            <span class="levelToolbarSpan">
-              <%= name %>
-            </span>
+          <span class="levelToolbarSpan">
+            <%= name %>
+          </span>
+        </div>
       </div>
     </div>
   </script>