Fix display of recipe titles so whole title shows

public/css/styles.css

@@ -23,9 +23,9 @@ h3 {
 }
 
 .recipe-add-grubs-btn {
-  float: right;
-  clear: both;
+  position: absolute;
   margin: 2px;
+  right: 16px;
 }
 
 .hidden {
@@ -133,16 +133,25 @@ tr:hover .grub-close {
 .recipe-header {
   margin: 0px;
   padding: 0px;
+  padding-right: 72px;
   border-bottom: none;
 }
 
+.recipe-header.edit {
+  padding-right: 0px;
+}
+
+.recipe-header.new {
+  padding-right: 0px;
+}
+
 .recipe-header-input {
   border: none;
   box-shadow: none;
   transition: none;
   border-bottom: none;
   display: inline;
-  width: inherit;
+  width: 100%;
 }
 
 .recipe-header-input[readonly] {

src/cljs/grub/view/recipe.cljs

@@ -74,6 +74,7 @@
                            (dom/click-on-elem? % (om/get-node owner :save-btn))))
               (transition-state owner :click))}
           [:div.panel-heading.recipe-header
+           {:class (when (= edit-state :editing) "edit")}
            [:input.form-control.recipe-header-input 
             {:type "text" 
              :readOnly (if (= edit-state :editing) "" "readonly")

src/cljs/grub/view/recipe_list.cljs

@@ -49,7 +49,7 @@
        [:div.panel.panel-default.recipe-panel
         {:on-click #(when (not (dom/click-on-elem? % (om/get-node owner :save-btn)))
                       (transition-state owner :click))}
-        [:div.panel-heading.recipe-header
+        [:div.panel-heading.recipe-header.new
          [:input.form-control.recipe-header-input 
           {:id "new-recipe-name"
            :type "text"