From 7658b1d767dc4f6ea07a0de0807bc13d0c5e8919 Mon Sep 17 00:00:00 2001
From: Richard Steinmetz <richard@steinmetz.cloud>
Date: Fri, 15 Jul 2022 11:14:02 +0200
Subject: Fix entity picker modal size

Signed-off-by: Richard Steinmetz <richard@steinmetz.cloud>
---
 src/components/EntityPicker/EntityPicker.vue | 18 ++++++------------
 1 file changed, 6 insertions(+), 12 deletions(-)

diff --git a/src/components/EntityPicker/EntityPicker.vue b/src/components/EntityPicker/EntityPicker.vue
index 35de20ca..1d2ddd9b 100644
--- a/src/components/EntityPicker/EntityPicker.vue
+++ b/src/components/EntityPicker/EntityPicker.vue
@@ -21,7 +21,7 @@
 
 <template>
 	<Modal
-		size="full"
+		size="normal"
 		@close="onCancel">
 		<!-- Wrapper for content & navigation -->
 		<div class="entity-picker">
@@ -372,8 +372,7 @@ export default {
 <style lang="scss" scoped>
 
 // Dialog variables
-$dialog-margin: 20px;
-$dialog-width: 320px;
+$dialog-padding: 20px;
 $dialog-height: 480px;
 $entity-spacing: 4px;
 
@@ -394,15 +393,10 @@ $icon-margin: ($clickable-area - $icon-size) / 2;
 	position: relative;
 	display: flex;
 	flex-direction: column;
-	/** This next 2 rules are pretty hacky, with the modal component somehow
-	the margin applied to the content is added to the total modal width,
-	so here we subtract it to the width and height of the content.
-	*/
-	width: $dialog-width;
-	max-width: 100vw;
-	height: $dialog-height;
-	max-height: calc(100vh - #{$dialog-margin} * 2 - 10px);
-	margin: $dialog-margin;
+	min-height: $dialog-height;
+	height: 100%;
+	padding: $dialog-padding;
+	box-sizing: border-box;
 
 	&__search {
 		position: relative;
-- 
cgit v1.2.3