From 441de984b0d7cf6e2a21e8259d40c4282551e556 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Fri, 29 Dec 2017 20:27:10 +0300
Subject: [PATCH] make action buttons in popup auto-fit contents

several languages have labels of wildly different lengths so we try to maintain the proportion
---
 popup/popup.css | 25 +++++++++++++++----------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/popup/popup.css b/popup/popup.css
index 7896b261..01fbf42d 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -5,6 +5,7 @@
   --name-padding-right: 40px;
   --actions-width: 75px;
   --onoffswitch-width: 60px;
+  --outer-padding: 9px;
 }
 
 html, body {
@@ -25,8 +26,8 @@ body {
 }
 
 body > div:not(#installed):not(#message-box):not(.colorpicker-popup) {
-  margin-left: 9px;
-  margin-right: 9px;
+  margin-left: var(--outer-padding);
+  margin-right: var(--outer-padding);
 }
 
 .firefox .chromium-only {
@@ -81,7 +82,7 @@ body > div:not(#installed):not(#message-box):not(.colorpicker-popup) {
 #installed .style-name .svg-icon.checked {
   position: absolute;
   top: 7px;
-  left: 9px;
+  left: var(--outer-padding);
   pointer-events: none;
 }
 
@@ -102,7 +103,7 @@ body > div:not(#installed):not(#message-box):not(.colorpicker-popup) {
 }
 
 #no-styles {
-  padding: 4px 9px 6px;
+  padding: 4px var(--outer-padding) 6px;
   font-weight: bold;
 }
 
@@ -435,19 +436,23 @@ body.blocked .actions > .main-controls {
 #popup-options {
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
-  padding: 1.2em 1px;
+  padding: var(--outer-padding) 1px;
 }
 
 #popup-options button {
-  width: 32%;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  padding: 2px 4px;
+  margin-right: 4px;
+  /* several languages have labels of wildly different lengths so we try to maintain the proportion */
+  flex: 1 1 auto;
+  min-width: 4em;
 }
 
-.firefox #popup-options button {
-  width: 49%;
+.firefox #popup-options button:nth-last-child(2),
+#popup-options button:last-child {
+  margin-right: 0;
 }
 
 /* confirm */
@@ -532,7 +537,7 @@ body.blocked .actions > .main-controls {
 }
 
 .blocked-info p {
-  padding: 1px 0 9px;
+  padding: 1px 0 var(--outer-padding);
   display: block;
   font-size: 90%;
   margin: 0;