      "Distributed under the Eclipse Public License either version 1.0 or (at your option) any later version."]]
    [:div.mdl-dialog__actions
     [:button.mdl-button
-     {:on-click close-about-dialog}
+     {:on-click #(close-dialog "#about-dialog")}
      "Ok"]]])
 
-(defn show-about-dialog []
-  (when-let [dialog (.querySelector js/document "#about-dialog")]
-    (when-not (.-showModal dialog)
-      (.registerDialog js/dialogPolyfill dialog))
-    (.showModal dialog)))
+
+(defn home-page-header [{:keys [columns state] :as props}]
+  [:header.mdl-layout__header
+   [:div.mdl-layout__header-row
+    [:span.mdl-layout-title
+     [:img.svg-size {:src "images/cljs-white.svg"}]
+     " CLJS-WebREPL"]
+    [:div.mdl-layout-spacer]
+    [:button.mdl-button.mdl-js-button.mdl-js-ripple-effect
+     {:on-click #(show-dialog "#reset-dialog")
+      :style    {:color "#fff"}}
+     [:i.material-icons "report"]
+     [:span "RESET"]]
+    [:button.mdl-button.mdl-js-button.mdl-js-ripple-effect
+     {:on-click #(swap! state more-columns)
+      :style    {:color "#fff"}}
+     [:i.material-icons "view_column"]]
+    [:button.mdl-button.mdl-js-button.mdl-js-ripple-effect
+     {:on-click #(swap! state less-columns)
+      :style    {:color "#fff"}}
+     [:i.material-icons "view_stream"]]
+    [:button.mdl-button.mdl-js-button.mdl-button--icon.mdl-js-ripple-effect {:id "main-menu"}
+     [:i.material-icons "more_vert"]]
+    [:ul.mdl-menu.mdl-menu--bottom-right.mdl-js-menu.mdl-js-ripple-effect
+     {:for "main-menu"}
+     [:li.mdl-menu__item
+      {:on-click #(show-dialog "#reset-dialog")}
+      "Reset REPL"]
+     [:li.mdl-menu__item
+      {:on-click #(set! (.-location js/window) "https://github.com/theasp/cljs-webrepl")}
+      "GitHub"]
+     [:li.mdl-menu__item
+      {:on-click #(show-dialog "#about-dialog")}
+      "About"]]]])
 
 (defn home-page []
-  (let [props {:state state
-               :title "Cljs-WebREPL"}]
+  (let [columns (:columns @state)
+        props   {:state   state
+                 :columns columns
+                 :title   "Cljs-WebREPL"}]
     [:div
      [about-dialog]
+     [reset-dialog state]
      [:div.tall
       [mdl/upgrade
        [:div.flex-v.tall.mdl-layout.mdl-js-layout.mdl-layout--fixed-header.mdl-layout--no-drawer-button
-        [:header.mdl-layout__header
-         [:div.mdl-layout__header-row
-          [:span.mdl-layout-title
-           [:img.svg-size {:src "images/cljs-white.svg"}]
-           " CLJS-WebREPL"]
-          [:div.mdl-layout-spacer]
-          [:button.mdl-button.mdl-js-button.mdl-js-ripple-effect
-           {:on-click #(reset-repl! state)
-            :style    {:color "#fff"}}
-           [:i.material-icons "report"]
-           [:span "RESET"]]
-          [:button.mdl-button.mdl-js-button.mdl-button--icon.mdl-js-ripple-effect {:id "main-menu"}
-           [:i.material-icons "more_vert"]]
-          [:ul.mdl-menu.mdl-menu--bottom-right.mdl-js-menu.mdl-js-ripple-effect
-           {:for "main-menu"}
-           [:li.mdl-menu__item
-            {:on-click #(reset-repl! state)}
-            "Reset REPL"]
-           [:li.mdl-menu__item
-            {:on-click #(set! (.-location js/window) "https://github.com/theasp/cljs-webrepl")}
-            "GitHub"]
-           [:li.mdl-menu__item
-            {:on-click show-about-dialog}
-            "About"]]]]
+        [home-page-header props]
         (if (:ns @state)
           [history props]
           [please-wait props])]]]]))

     (when (input-ok? @state)
       [input-card props])]]])

(defn close-about-dialog []
  (when-let [dialog (.querySelector js/document "#about-dialog")]
    (.close dialog)))

(defn about-dialog []
  [:dialog.mdl-dialog {:id "about-dialog"}
   [:h4.mdl-dialog__title "CLJS-WebREPL"]
   [:div.mdl-dialog__content
    [:p
     (str "A ClojureScript browser based REPL")]
    [:p (str "Using ClojureScript version " *clojurescript-version*)]
    [:h5 "License"]
    [:p

      [:pre "..."]])])

(defn history-card
  [{:keys [state columns] :as props} num {:keys [ns expression result output] :as history-item}]
  [:div
   {:class (str "mdl-cell " (card-columns-class columns))}
   [:div.mdl-card.mdl-shadow--2dp
    [history-card-menu props num history-item]
    [:div.card-data.expression
