From 669850821a9dc7a5cb109f4f21e516408a85fc1c Mon Sep 17 00:00:00 2001
From: gorhill <rhill@raymondhill.net>
Date: Fri, 20 Mar 2015 10:36:38 -0400
Subject: [PATCH] hopefully this fixes #1053

---
 src/about.html               |  2 +-
 src/css/3p-filters.css       |  7 ++++---
 src/css/dashboard-common.css |  5 +----
 src/css/dashboard.css        | 40 +++++++++++++++++++++++-------------
 src/dashboard.html           |  2 +-
 src/js/dashboard.js          | 14 ++++++++++++-
 src/settings.html            |  3 +++
 7 files changed, 49 insertions(+), 24 deletions(-)
diff --git a/src/about.html b/src/about.html
index 18e9efd31..2bd86f1b4 100644
--- a/src/about.html
+++ b/src/about.html
@@ -10,7 +10,7 @@
 
 <body>
 
-<h2 id="aboutNameVer"></h2>
+<p id="aboutNameVer"></p>
 <ul>
     <li><a href="https://github.com/gorhill/uBlock/releases" data-i18n="aboutChangelog"></a>
     <li><a href="https://github.com/gorhill/uBlock/wiki" data-i18n="aboutWiki"></a>
diff --git a/src/css/3p-filters.css b/src/css/3p-filters.css
index 9bab31d1f..6f3f6b99e 100644
--- a/src/css/3p-filters.css
+++ b/src/css/3p-filters.css
@@ -2,9 +2,6 @@ ul {
     padding: 0;
     list-style-type: none;
     }
-#options {
-    margin-top: 0;
-    }
 #options li {
     margin-bottom: 0.5em;
     }
@@ -45,12 +42,14 @@ li.listEntry {
     margin: 0 auto 0 auto;
     margin-left: 1em;
     margin-right: 0em;
+    text-indent: -2em;
     }
 body[dir=rtl] li.listEntry {
     margin-left: 0em;
     margin-right: 1em;
     }
 li.listEntry > * {
+    text-indent: 0;
     unicode-bidi: embed;
     }
 li.listEntry > a:nth-of-type(2) {
@@ -90,10 +89,12 @@ button.custom.reloadAll:not(.disabled) {
     }
 #buttonApply {
     display: initial;
+    margin: 1em 0;
     padding: 1em;
     position: fixed;
     right: 1em;
     top: 0;
+    z-index: 10;
     }
 body[dir=rtl] #buttonApply {
     right: auto;
diff --git a/src/css/dashboard-common.css b/src/css/dashboard-common.css
index fb5eba3b7..a1b45fb9a 100644
--- a/src/css/dashboard-common.css
+++ b/src/css/dashboard-common.css
@@ -1,6 +1,6 @@
 body {
     margin: 0;
-    padding: 0 0.5em 5em 0.5em;
+    padding: 0 0.5em 0.5em 0.5em;
     font: 14px sans-serif;
     }
 h2, h3 {
@@ -10,9 +10,6 @@ h2, h3 {
 h2 {
     font-size: 18px;
     }
-h2:nth-of-type(1) {
-    margin-top: 0;
-    }
 h3 {
     font-size: 16px;
     }
diff --git a/src/css/dashboard.css b/src/css/dashboard.css
index 329e41287..7fc676b2c 100644
--- a/src/css/dashboard.css
+++ b/src/css/dashboard.css
@@ -12,10 +12,8 @@ html, body {
     margin: 0;
     border: 0;
     padding: 0;
-    position: absolute;
     width: 100%;
     top: 0;
-    height: 50px;
     z-index: 10;
     }
 #dashboard-nav-widgets {
@@ -30,20 +28,20 @@ html, body {
     font-size: larger;
     }
 .tabButton {
-    margin: 0;
+    background-color: #eee;
     border: 1px solid #ccc;
     border-top-left-radius: 3px;
     border-top-right-radius: 3px;
     border-bottom: 1px solid #ccc;
-    padding: 4px;
-    display: inline-block;
-    position: relative;
-    top: 1px;
     color: black;
-    background-color: #eee;
-    font: inherit;
     cursor: pointer;
+    display: inline-block;
+    font: inherit;
+    margin: 0;
+    padding: 4px;
+    position: relative;
     text-decoration: none;
+    top: 1px;
     }
 .tabButton:focus {
     outline: 0;
@@ -52,7 +50,6 @@ html, body {
     color: inherited;
     }
 .tabButton.selected {
-    border-bottom: 1px solid white;
     background-color: white;
     border-bottom: 1px solid white;
     }
@@ -62,8 +59,23 @@ iframe {
     padding: 0;
     background-color: transparent;
     width: 100%;
-    height: 100%;
-    border-top: 50px solid transparent;
-    box-sizing: border-box;
-    -moz-box-sizing: border-box;
+    }
+
+@media (max-width: 600px) {
+    #dashboard-nav {
+        position: relative;
+        }
+    #dashboard-nav-widgets {
+        padding: 0;
+        }
+    [data-i18n="extName"] {
+        display: none;
+        }
+    .tabButton {
+        border-top: 0;
+        display: block;
+        }
+    .tabButton.selected {
+        border-bottom: 1px solid #ccc;
+        }
     }
diff --git a/src/dashboard.html b/src/dashboard.html
index 8f68c2189..d4bb9083b 100644
--- a/src/dashboard.html
+++ b/src/dashboard.html
@@ -22,7 +22,7 @@
     </div>
 </div>
 
-<iframe src=""></iframe>
+<iframe id="iframe" src=""></iframe>
 
 <script src="js/vapi-common.js"></script>
 <script src="js/udom.js"></script>
diff --git a/src/js/dashboard.js b/src/js/dashboard.js
index c192daf88..c94483035 100644
--- a/src/js/dashboard.js
+++ b/src/js/dashboard.js
@@ -20,12 +20,21 @@
 */
 
 /* global uDom */
-'use strict';
 
 /******************************************************************************/
 
 (function() {
 
+'use strict';
+
+/******************************************************************************/
+
+var resizeFrame = function() {
+    var navRect = document.getElementById('dashboard-nav').getBoundingClientRect();
+    var viewRect = document.documentElement.getBoundingClientRect();
+    document.getElementById('iframe').style.setProperty('height', (viewRect.height - navRect.height) + 'px');
+};
+
 /******************************************************************************/
 
 var loadDashboardPanel = function(tab, q) {
@@ -49,6 +58,9 @@ var onTabClickHandler = function(e) {
 /******************************************************************************/
 
 uDom.onLoad(function() {
+    window.addEventListener('resize', resizeFrame);
+    resizeFrame();
+
     var matches = window.location.search.slice(1).match(/\??(tab=([^&]+))?(.*)$/);
     var tab = '', q = '';
     if ( matches && matches.length === 4 ) {
diff --git a/src/settings.html b/src/settings.html
index cdd6c734f..2e651b3bb 100644
--- a/src/settings.html
+++ b/src/settings.html
@@ -9,6 +9,9 @@
 ul {
     padding-left: 1em;
     }
+ul#userSettings {
+    padding-left: 0;
+    }
 li {
     margin-top: 0.25em;
     }
