From 2683f44b40afe27bacce1a7b96a43eab6fefbb2e Mon Sep 17 00:00:00 2001
From: Jonas Jenwald <jonas.jenwald@gmail.com>
Date: Thu, 20 Aug 2020 09:36:35 +0200
Subject: [PATCH] Update the zoom dropdown width calculation to work better in
 locales with long zoom-strings (PR 11077 follow-up)

With the changes in PR 11077, the zoom dropdown now looks "squashed" in locales with longer than average zoom-strings[1]. The reason is that the zoom-value and the dropdown-icon are too close together, which doesn't look good in affected locales.

To fix this, the following changes are made:
 - Increase the calculated dropdown width, in `Toolbar._adjustScaleWidth`, to account for the much wider icon (7 px -> 16 px) and the increased padding.
 - Move the dropdown-icon *slightly* outwards, and also *slightly* reduce the left (right in RTL locales) padding of the dropdown-contents.
 - Finally, remove the right (left in RTL locales) padding to reduce the chance of the *default* browser dropdown-icon being visible.

---
[1] This affects e.g. the `de` and `nl` locales, but there's probably other examples as well.
---
 web/toolbar.js |  2 +-
 web/viewer.css | 15 ++++++++++-----
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/web/toolbar.js b/web/toolbar.js
index 77b729f35..33ac2f6da 100644
--- a/web/toolbar.js
+++ b/web/toolbar.js
@@ -271,7 +271,7 @@ class Toolbar {
       }
     }
     const overflow = SCALE_SELECT_WIDTH - SCALE_SELECT_CONTAINER_WIDTH;
-    maxWidth += 1.5 * overflow;
+    maxWidth += 2 * overflow;
 
     if (maxWidth > SCALE_SELECT_CONTAINER_WIDTH) {
       items.scaleSelect.style.width = `${maxWidth + overflow}px`;
diff --git a/web/viewer.css b/web/viewer.css
index a67b3f1a8..a15b08f9a 100644
--- a/web/viewer.css
+++ b/web/viewer.css
@@ -352,7 +352,7 @@ html[dir='rtl'] #outerContainer.sidebarOpen #viewerContainer:not(.pdfPresentatio
   background-color: var(--sidebar-bg-color);
 }
 html[dir='ltr'] #toolbarSidebar {
-  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25), 
+  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25),
     0 1px 0 rgba(0, 0, 0, 0.15),
     0 0 1px rgba(0, 0, 0, 0.1);
 }
@@ -869,10 +869,10 @@ html[dir='rtl'] #toolbarViewerLeft > .toolbarButton:first-child {
   max-width: 16px;
 }
 html[dir='ltr'] .dropdownToolbarButton::after {
-  right: 8px;
+  right: 7px;
 }
 html[dir='rtl'] .dropdownToolbarButton::after {
-  left: 8px;
+  left: 7px;
 }
 
 .dropdownToolbarButton > select {
@@ -881,11 +881,16 @@ html[dir='rtl'] .dropdownToolbarButton::after {
   font-size: 12px;
   color: var(--main-color);
   margin: 0;
-  padding: 1px 5px 2px;
+  padding: 1px 0 2px;
   border: none;
   background-color: var(--dropdown-btn-bg-color);
 }
-
+html[dir='ltr'] .dropdownToolbarButton > select {
+  padding-left: 4px;
+}
+html[dir='rtl'] .dropdownToolbarButton > select {
+  padding-right: 4px;
+}
 .dropdownToolbarButton > select:hover {
   background-color: var(--button-hover-color);
 }