Merge pull request #2836 from nextcloud/fix/2777/new-circle-modal

Fix circle creation modal size

1 files changed, 6 insertions, 12 deletions

diff --git a/src/components/EntityPicker/NewCircleIntro.vue b/src/components/EntityPicker/NewCircleIntro.vue
index 6005217d..d52da329 100644
--- a/src/components/EntityPicker/NewCircleIntro.vue
+++ b/src/components/EntityPicker/NewCircleIntro.vue
@@ -21,7 +21,7 @@
 
 <template>
 	<Modal
-		size="full"
+		size="normal"
 		@close="onCancel">
 		<!-- Wrapper for content & navigation -->
 		<div class="entity-picker">
@@ -153,8 +153,7 @@ export default {
 
 <style lang="scss" scoped>
 // Dialog variables
-$dialog-margin: 20px;
-$dialog-width: 320px;
+$dialog-padding: 20px;
 $dialog-height: 480px;
 $entity-spacing: 4px;
 
@@ -176,15 +175,10 @@ $icon-margin: ($clickable-area - $icon-size) / 2;
 	display: flex;
 	flex-direction: column;
 	justify-content: space-between;
-	/** 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;
 
 	&__new {
 		position: relative;