From cb2ce0676bb96012c2809d066e35b6538c0dee67 Mon Sep 17 00:00:00 2001
From: Raymond Hill <rhill@raymondhill.net>
Date: Mon, 18 May 2020 08:09:26 -0400
Subject: [PATCH] More fine tuning of desktop panel as per feedback

Reduce height of more/less button. Related feedback:

https://github.com/uBlockOrigin/uBlock-issues/issues/1027#issuecomment-629867784

Use more concise text string for blocked requests
statistics. Related feedback:

https://github.com/uBlockOrigin/uBlock-issues/issues/1027#issuecomment-630015625

Fix issue with overly long hostnames, and spurious
spacing when using undocumented advanced setting.
Related feedback:

https://github.com/uBlockOrigin/uBlock-issues/issues/1027#issuecomment-630104078
---
 src/_locales/en/messages.json |  4 ++--
 src/css/popup-fenix.css       | 12 +++++++++---
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json
index 648a6714d..7f749f9c5 100644
--- a/src/_locales/en/messages.json
+++ b/src/_locales/en/messages.json
@@ -84,8 +84,8 @@
     "description":"English: on this page"
   },
   "popupBlockedStats":{
-    "message":"{{count}} or {{percent}}%",
-    "description":"Example: 15 or 13%"
+    "message":"{{count}} ({{percent}}%)",
+    "description":"Example: 15 (13%)"
   },
   "popupBlockedSinceInstallPrompt":{
     "message":"since install",
diff --git a/src/css/popup-fenix.css b/src/css/popup-fenix.css
index 8f3ce9b72..4305a9487 100644
--- a/src/css/popup-fenix.css
+++ b/src/css/popup-fenix.css
@@ -113,6 +113,9 @@ body.needSave #revertRules {
     margin: var(--popup-gap) var(--popup-gap-extra-thin);
     text-align: center;
     }
+#hostname > span {
+    word-break: break-all;
+    }
 #hostname > span + span {
     font-weight: 600;
     }
@@ -222,9 +225,12 @@ body.mobile.no-tooltips .toolRibbon .tool {
 #moreOrLess > span {
     cursor: pointer;
     margin: 0;
-    padding: var(--popup-gap);
+    padding: var(--popup-gap-thin) var(--popup-gap);
     user-select: none;
     }
+:root.mobile #moreOrLess > span {
+    padding: var(--popup-gap);
+    }
 #moreButton .fa-icon {
     transform: rotate(180deg);
     }
@@ -524,8 +530,8 @@ body:not([data-more~="c"]) [data-more="c"],
 body:not([data-more~="d"]) [data-more="d"],
 body:not([data-more~="f"]) [data-more="f"] {
     height: 0;
-    margin-bottom: 0;
-    margin-top: 0;
+    margin-bottom: 0 !important;
+    margin-top: 0 !important;
     overflow-y: hidden;
     visibility: hidden;
     }