Fix UnifiedSearchfix/search-menu

- Fix too big margins
- Fix horizontal scrolbar (caused by margin in text field)
- Add some spacing between the items (4px)
- Center items (I love flex)

Signed-off-by: Carl Schwan <carl@carlschwan.eu>

3 files changed, 17 insertions, 4 deletions

diff --git a/core/src/components/HeaderMenu.vue b/core/src/components/HeaderMenu.vue
index 9a78b769dc3..172ea7268d8 100644
--- a/core/src/components/HeaderMenu.vue
+++ b/core/src/components/HeaderMenu.vue
@@ -161,6 +161,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+$externalMargin: 8px;
+
 .header-menu {
 	&__trigger {
 		display: flex;
@@ -191,11 +193,11 @@ export default {
 		top: 50px;
 		right: 0;
 		box-sizing: border-box;
-		margin: 0;
+		margin: 0 $externalMargin;
 		border-radius: 0 0 var(--border-radius) var(--border-radius);
 		background-color: var(--color-main-background);
 		filter: drop-shadow(0 1px 5px var(--color-box-shadow));
-		padding: 20px;
+		padding: 8px;
 		border-radius: var(--border-radius-large);
 	}
 
@@ -215,7 +217,7 @@ export default {
 	&__content {
 		overflow: auto;
 		width: 350px;
-		max-width: 100vw;
+		max-width: calc(100vw - 2 * $externalMargin);
 		min-height: calc(44px * 1.5);
 		max-height: calc(100vh - 50px * 2);
 	}
diff --git a/core/src/components/UnifiedSearch/SearchResult.vue b/core/src/components/UnifiedSearch/SearchResult.vue
index 9c787de111c..0b8b6c8b33e 100644
--- a/core/src/components/UnifiedSearch/SearchResult.vue
+++ b/core/src/components/UnifiedSearch/SearchResult.vue
@@ -169,6 +169,7 @@ $margin: 10px;
 
 .unified-search__result {
 	display: flex;
+	align-items: center;
 	height: $clickable-area;
 	padding: $margin;
 	border-bottom: 1px solid var(--color-border);
diff --git a/core/src/views/UnifiedSearch.vue b/core/src/views/UnifiedSearch.vue
index e7d3f9d5809..8611779754f 100644
--- a/core/src/views/UnifiedSearch.vue
+++ b/core/src/views/UnifiedSearch.vue
@@ -710,9 +710,14 @@ $input-padding: 6px;
 			align-self: flex-start;
 			font-weight: bold;
 			font-size: 18px;
+			margin-left: 13px;
 		}
 	}
 
+	&__form-input {
+		margin: 0 !important;
+	}
+
 	&__input-row {
 		display: flex;
 		width: 100%;
@@ -774,9 +779,10 @@ $input-padding: 6px;
 		&-reset, &-submit {
 			position: absolute;
 			top: 0;
-			right: 0;
+			right: 4px;
 			width: $input-height - $input-padding;
 			height: $input-height - $input-padding;
+			min-height: 30px;
 			padding: 0;
 			opacity: .5;
 			border: none;
@@ -799,11 +805,15 @@ $input-padding: 6px;
 		&-header {
 			display: block;
 			margin: $margin;
+			margin-bottom: $margin - 4px;
 			margin-left: $margin + $input-padding;
 			color: var(--color-primary-element);
 			font-weight: normal;
 			font-size: 18px;
 		}
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
 	}
 
 	.unified-search__result-more::v-deep {