Fix formulabar and formulabar items' misalignment

It seems Formulabar and surrounding items were being aligned with
multiline mode (when input is expanded) in mind but:
- This affecting the standard view (when is collapsed) and causing
misalignment
- On top of that, when the input is expanded the alignment was not 100%
effective

https://archive.org/download/formulabar-misalignment/formulabar-misalignment.png

Fix it:
- Align everything to the top but only when the input field is expanded
- Remove padding for alignments that can get automatically aligned, and
use padding just for the function icon and just when needed (multiline)
- Fix AdressInput's size padding and margin

fixes issue #4620

Signed-off-by: Pedro Pinto Silva <pedro.silva@collabora.com>
Change-Id: If6d6c867fcabc02aaac3304ac6c3f218cf256491

1 files changed, 11 insertions, 3 deletions

diff --git a/browser/css/toolbar.css b/browser/css/toolbar.css
index eb8fb33e64..07a6e6ff6b 100644
--- a/browser/css/toolbar.css
+++ b/browser/css/toolbar.css
@@ -152,11 +152,17 @@ w2ui-toolbar {
 	height: 30px;
 }
 
-#tb_formulabar_item_address, #tb_formulabar_item_item_2, #tb_formulabar_item_functiondialog {
-	padding-top: 2px;
+.inputbar_multiline #tb_formulabar_item_address,
+.inputbar_multiline #tb_formulabar_item_item_2,
+.inputbar_multiline #tb_formulabar_item_functiondialog {
 	vertical-align: top;
 }
 
+.inputbar_multiline #tb_formulabar_item_functiondialog {
+	padding-top: 4px;
+}
+
+
 #presentation-toolbar {
 	bottom: 0;
 	background-color: var(--color-main-background);
@@ -201,8 +207,10 @@ w2ui-toolbar {
 }
 
 #addressInput {
-	height: 29px;
+	height: 22px;
 	width: 100px;
+	padding: 2px 4px;
+	margin-top: 1px;
 }
 
 #formulaInput {