UI: improve combobox appearence

Since f7491e1f62 all combobox started
having a with and min-width of 100px, this wasn't meant to be.
Restrict this width setting to .jsDialog.

Add 5 px left padding to combobox, this looks better.

Set the font combobox width to 5em instead of 50px.

Signed-off-by: Méven Car <meven.car@collabora.com>
Change-Id: I0f0247471376e4633f3bbffab89285e16f78cde9

browser/css/jsdialogs.css

@@ -753,8 +753,6 @@ input[type='number']:hover::-webkit-outer-spin-button {
 	-webkit-appearance: none;
 	-moz-appearance: none;
 	appearance: none;
-	min-width: 100px;
-	width: 100%;
 	height: 28px;
 	line-height: normal;
 	font-size: var(--default-font-size);
@@ -768,6 +766,8 @@ input[type='number']:hover::-webkit-outer-spin-button {
 .jsdialog-window .ui-combobox,
 .jsdialog-window .ui-timefield {
 	height: 32px;/* Use the same height as in .jsdialog.ui-edit */
+	min-width: 100px;
+	width: 100%;
 }
 
 .ui-listbox option {

browser/css/notebookbar.css

@@ -379,12 +379,15 @@ button.ui-tab.notebookbar {
 }
 
 #fontsizecombobox.notebookbar {
-	width: 50px !important;
+	width: 5em;
 }
 
 .notebookbar.ui-combobox * {
 	line-height: 22px;
 }
+.ui-combobox-content {
+	padding-inline: 5px;
+}
 
 /* Styles preview */