diff --git a/src/day8/re_frame/trace/app_db.cljs b/src/day8/re_frame/trace/app_db.cljs
index ad5708f..4f2e3b1 100644
--- a/src/day8/re_frame/trace/app_db.cljs
+++ b/src/day8/re_frame/trace/app_db.cljs
@@ -1,16 +1,12 @@
 (ns day8.re-frame.trace.app-db
+  (:require-macros [day8.re-frame.trace.macros :refer [with-cljs-devtools-prefs]])
   (:require [reagent.core :as r]
             [clojure.string :as str]
-            [devtools.formatters.core :as cljs-devtools]
+            [devtools.prefs]
+            [devtools.formatters.core]
             [day8.re-frame.trace.localstorage :as localstorage]
             [day8.re-frame.trace.components :as components]))
 
-(devtools.prefs/set-pref! :header-style "")
-
-;; Hide the index spans on the left hand of collections. Shows how many elements in a collection.
-(devtools.prefs/set-pref! :none-style "display: none")
-(devtools.prefs/set-pref! :index-tag [:span :none-style])
-
 (defn string->css [css-string]
   "This function converts jsonml css-strings to valid css maps for hiccup.
   Example: 'margin-left:0px;min-height:14px;' converts to
@@ -21,10 +17,44 @@
        (reduce (fn [acc [property value]]
                  (assoc acc (keyword property) value)) {})))
 
-(def config {:initial-hierarchy-depth-budget false})
-
 (declare jsonml->hiccup)
 
+(def default-cljs-devtools-prefs @devtools.prefs/default-config)
+
+(defn reset-wrapping [css-string]
+  (str/replace css-string #"white-space:nowrap;" ""))
+
+(def customized-cljs-devtools-prefs
+  {; Override some cljs-devtools default styles.
+
+   ; The goal here is to make default styles more flexible and wrap at the edge of our panel (we don't want horizontal
+   ; scrolling). Technically we want to remove all 'white-space:no-wrap'.
+   ; See https://github.com/binaryage/cljs-devtools/blob/master/src/lib/devtools/defaults.cljs
+   ;; Commented out as this causes some other issues too.
+   ;:header-style (reset-wrapping (:header-style default-cljs-devtools-prefs))
+   ;:expandable-style (reset-wrapping (:expandable-style default-cljs-devtools-prefs))
+   ;:item-style (reset-wrapping (:item-style default-cljs-devtools-prefs))
+
+   ; Hide the index spans on the left hand of collections. Shows how many elements in a collection.
+   :none-style   "display: none"
+   :index-tag    [:span :none-style]
+
+   ; Our JSON renderer does not have hierarchy depth limit,
+   ; See https://github.com/binaryage/cljs-devtools/blob/master/src/lib/devtools/formatters/budgeting.cljs
+   :initial-hierarchy-depth-budget false})
+
+(def effective-cljs-devtools-prefs (merge default-cljs-devtools-prefs customized-cljs-devtools-prefs))
+
+(defn make-devtools-api-call [api-fn & args]
+  (with-cljs-devtools-prefs effective-cljs-devtools-prefs
+    (apply api-fn args)))
+
+(defn cljs-devtools-header [& args]
+  (apply make-devtools-api-call devtools.formatters.core/header-api-call args))
+
+(defn cljs-devtools-body [& args]
+  (apply make-devtools-api-call devtools.formatters.core/body-api-call args))
+
 (defn data-structure [jsonml]
   (let [expanded? (r/atom false)]
     (fn [jsonml]
@@ -35,10 +65,10 @@
                :on-click #(swap! expanded? not)}
         [:button.expansion-button (if @expanded? "▼" "▶")]]
        (jsonml->hiccup (if @expanded?
-                         (cljs-devtools/body-api-call
+                         (cljs-devtools-body
                            (.-object (get jsonml 1))
                            (.-config (get jsonml 1)))
-                         (cljs-devtools/header-api-call
+                         (cljs-devtools-header
                            (.-object (get jsonml 1))
                            (.-config (get jsonml 1)))))])))
 
@@ -81,7 +111,7 @@
           (and @expanded?
                (or (string? data)
                    (number? data))) [:div {:style {:margin "10px 0"}} data]
-          @expanded? (jsonml->hiccup (cljs-devtools/header-api-call data config)))]])))
+          @expanded? (jsonml->hiccup (cljs-devtools-header data)))]])))
 
 (defn render-state [data]
   (let [subtree-input (r/atom "")
diff --git a/src/day8/re_frame/trace/macros.clj b/src/day8/re_frame/trace/macros.clj
index b3b2542..c4a980a 100644
--- a/src/day8/re_frame/trace/macros.clj
+++ b/src/day8/re_frame/trace/macros.clj
@@ -5,3 +5,13 @@
   "Reads a file as a string. Slurp is wrapped in a macro so it can interact with local files before clojurescript compilation."
   [path]
   (slurp (io/resource path)))
+
+(defmacro with-cljs-devtools-prefs [prefs & body]
+  `(let [previous-config# (devtools.prefs/get-prefs)
+         prefs# ~prefs]
+     (try
+       (devtools.prefs/set-prefs! prefs#)
+       ~@body
+       (finally
+         (assert (= (devtools.prefs/get-prefs) prefs#) "someone modified devtools.prefs behind our back!")
+         (devtools.prefs/set-prefs! previous-config#)))))