From 7123f3e595706b347987134d73a3bd669eb45d90 Mon Sep 17 00:00:00 2001
From: Fabien Arcellier <fabien.arcellier@gmail.com>
Date: Tue, 4 Jun 2024 08:53:59 +0200
Subject: [PATCH] chore: improve ui consistency (padding, content align)

---
 src/ui/src/builder/BuilderFieldsPadding.vue | 17 +++++++++--------
 src/ui/src/builder/BuilderSelect.vue        |  5 +++++
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/ui/src/builder/BuilderFieldsPadding.vue b/src/ui/src/builder/BuilderFieldsPadding.vue
index 53b2967a5..5c87cf61f 100644
--- a/src/ui/src/builder/BuilderFieldsPadding.vue
+++ b/src/ui/src/builder/BuilderFieldsPadding.vue
@@ -42,7 +42,7 @@
 					@select="handleInputSelect"
 				/>
 				<div v-if="subMode == SubMode.all_sides" class="row">
-					<i class="material-symbols-outlined">padding</i>
+					<i>All</i>
 					<input
 						ref="fixedEl"
 						type="text"
@@ -53,7 +53,7 @@
 				</div>
 				<div v-if="subMode == SubMode.xy_sides">
 					<div class="row">
-						<i class="material-symbols-outlined">padding</i>
+						<i>X</i>
 						<input
 							ref="fixedEl"
 							type="text"
@@ -63,7 +63,7 @@
 						<div>px</div>
 					</div>
 					<div class="row">
-						<i class="material-symbols-outlined">padding</i>
+						<i>Y</i>
 						<input
 							type="text"
 							:value="valuePadding[2]"
@@ -74,7 +74,7 @@
 				</div>
 				<div v-if="subMode == SubMode.per_side">
 					<div class="row">
-						<i class="material-symbols-outlined">padding</i>
+						<i>Left</i>
 						<input
 							ref="fixedEl"
 							type="text"
@@ -84,7 +84,7 @@
 						<div>px</div>
 					</div>
 					<div class="row">
-						<i class="material-symbols-outlined">padding</i>
+						<i>Right</i>
 						<input
 							type="text"
 							:value="valuePadding[1]"
@@ -93,7 +93,7 @@
 						<div>px</div>
 					</div>
 					<div class="row">
-						<i class="material-symbols-outlined">padding</i>
+						<i>Top</i>
 						<input
 							type="text"
 							:value="valuePadding[2]"
@@ -102,7 +102,7 @@
 						<div>px</div>
 					</div>
 					<div class="row">
-						<i class="material-symbols-outlined">padding</i>
+						<i>Bottom</i>
 						<input
 							type="text"
 							:value="valuePadding[3]"
@@ -412,10 +412,11 @@ onBeforeUnmount(() => {
 	flex-direction: row;
 	gap: 8px;
 	padding: 8px;
-	align-items: center;
+	align-items: baseline;
 }
 
 .row input {
 	width: calc(100% - 32px) !important;
+	text-align: right;
 }
 </style>
diff --git a/src/ui/src/builder/BuilderSelect.vue b/src/ui/src/builder/BuilderSelect.vue
index 542b941f6..19439813c 100644
--- a/src/ui/src/builder/BuilderSelect.vue
+++ b/src/ui/src/builder/BuilderSelect.vue
@@ -152,6 +152,7 @@ const select = (event) => {
 	display: block;
 	padding: 8px;
 	font-weight: 400;
+	font-size: 0.75rem;
 	color: #000000e6;
 	cursor: pointer;
 	transition: all 0.2s;
@@ -182,4 +183,8 @@ const select = (event) => {
 	flex-direction: row;
 	gap: 8px;
 }
+
+.selectContent {
+	font-size: 0.75rem;
+}
 </style>