diff --git a/platform/safari/vapi-common.js b/platform/safari/vapi-common.js
index 8dde1c596..49cab7cf8 100644
--- a/platform/safari/vapi-common.js
+++ b/platform/safari/vapi-common.js
@@ -130,6 +130,14 @@ vAPI.closePopup = function() {
 
 /******************************************************************************/
 
+Number.prototype._toLocaleString = Number.prototype.toLocaleString;
+Number.prototype.toLocaleString = function() {
+    // some parts expect comma-formatting; Safari doesn't do it automatically
+    return this._toLocaleString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+};
+
+/******************************************************************************/
+
 // A localStorage-like object which should be accessible from the
 // background page or auxiliary pages.
 // This storage is optional, but it is nice to have, for a more polished user
diff --git a/platform/safari/vapi-popup.js b/platform/safari/vapi-popup.js
index 80d68351d..0f9dd8d13 100644
--- a/platform/safari/vapi-popup.js
+++ b/platform/safari/vapi-popup.js
@@ -21,48 +21,32 @@
 (function() {
 'use strict';
 
-var whenSizeChanges = function(elm, callback) {
-    var reset = function() {
-        k.style.width = grow.offsetWidth + 10 + "px";
-        k.style.height = grow.offsetHeight + 10 + "px";
-        grow.scrollLeft = grow.scrollWidth;
-        grow.scrollTop = grow.scrollHeight;
-        shrink.scrollLeft = shrink.scrollWidth;
-        shrink.scrollTop = shrink.scrollHeight;
-        w = elm.offsetWidth;
-        h = elm.offsetHeight;
-    }
-    var aux = document.createElement("div");
-    aux.style.cssText = "position:absolute;left:0;top:0;right:0;bottom:0;overflow:scroll;z-index:-1;visibility:hidden";
-    aux.innerHTML = '<div style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:scroll;z-index:-1;visibility:hidden">\
-<div style="position:absolute;left:0;top:0;"></div>\
-</div>\
-<div style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:scroll;z-index:-1;visibility:hidden">\
-<div style="position:absolute;left:0;top:0;width:200%;height:200%"></div>\
-</div>';
-    elm.appendChild(aux);
-    var grow = aux.childNodes[0],
-        k = grow.childNodes[0],
-        shrink = aux.childNodes[1];
-    var w, h;
-    reset();
-    grow.addEventListener("scroll", function() {
-        (elm.offsetWidth > w || elm.offsetHeight > h) && callback();
-        reset();
-    });
-    shrink.addEventListener("scroll", function() {
-        (elm.offsetWidth < w || elm.offsetHeight < h) && callback();
-        reset();
-    });
-};
+var DF_ENABLED_CLASS = "dfEnabled";
+
 var onLoaded = function() {
+    var _toggle = DOMTokenList.prototype.toggle;
+    DOMTokenList.prototype.toggle = function(className) {
+        _toggle.apply(this, arguments);
+        if(className === DF_ENABLED_CLASS) {
+            setTimeout(updateSize, 0);
+        }
+    };
     var body = document.body, popover = safari.self;
+    
+    var panes = document.getElementById("panes"),
+        powerAndStatsPane = panes.children[0],
+        dfPane = panes.children[1];
+
+    body.style.setProperty("width", "100%");
+    panes.style.setProperty("width", "100%");
+    panes.style.setProperty("text-align", "right");
+    dfPane.style.setProperty("display", "inline-block", "important");
+
     var updateSize = function() {
-        popover.width = body.clientWidth;
+        var dfEnabled = panes.classList.contains(DF_ENABLED_CLASS);
+        popover.width = powerAndStatsPane.clientWidth + (dfEnabled ? dfPane.clientWidth : 0);
         popover.height = body.clientHeight;
     };
-    body.style.position = "relative"; // Necessary for size change detection
-    whenSizeChanges(body, updateSize);
     updateSize();
 };
 window.addEventListener("load", onLoaded);