From 90af7804d259f0aeaca1bf667f822d2d1739652a Mon Sep 17 00:00:00 2001
From: Julien Veyssier <julien-nc@posteo.net>
Date: Fri, 2 Feb 2024 13:21:03 +0100
Subject: [PATCH] improve and unify image generation previews style

Signed-off-by: Julien Veyssier <julien-nc@posteo.net>
---
 src/components/Text2Image/Text2ImageDisplay.vue        | 2 --
 src/views/Text2Image/Text2ImageCustomPickerElement.vue | 3 ++-
 src/views/Text2Image/Text2ImageGenerationPage.vue      | 5 ++++-
 src/views/Text2Image/Text2ImageReferenceWidget.vue     | 1 -
 4 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/Text2Image/Text2ImageDisplay.vue b/src/components/Text2Image/Text2ImageDisplay.vue
index 5e47f95b..c3a70fcb 100644
--- a/src/components/Text2Image/Text2ImageDisplay.vue
+++ b/src/components/Text2Image/Text2ImageDisplay.vue
@@ -295,8 +295,6 @@ export default {
 .display-container {
 	display: flex;
 	flex-direction: column;
-	max-width: 600px;
-	width: 100%;
 	align-items: center;
 	justify-content: center;
 	.edit-icon {
diff --git a/src/views/Text2Image/Text2ImageCustomPickerElement.vue b/src/views/Text2Image/Text2ImageCustomPickerElement.vue
index f6b4bc0b..c005d909 100644
--- a/src/views/Text2Image/Text2ImageCustomPickerElement.vue
+++ b/src/views/Text2Image/Text2ImageCustomPickerElement.vue
@@ -361,7 +361,7 @@ export default {
 	}
 
 	.preview-container {
-		width: 90%;
+		width: 100%;
 
 		.image-preview {
 			display: flex;
@@ -370,6 +370,7 @@ export default {
 			border: 3px solid var(--color-border);
 			border-radius: var(--border-radius-large);
 			padding: 12px;
+			width: 100%;
 		}
 	}
 
diff --git a/src/views/Text2Image/Text2ImageGenerationPage.vue b/src/views/Text2Image/Text2ImageGenerationPage.vue
index e5efecc0..39b01b96 100644
--- a/src/views/Text2Image/Text2ImageGenerationPage.vue
+++ b/src/views/Text2Image/Text2ImageGenerationPage.vue
@@ -118,8 +118,11 @@ export default {
 		.image {
 			display: flex;
 			flex-direction: column;
-			border-radius: var(--border-radius);
 			margin-top: 8px;
+			max-width: 600px;
+			border: 3px solid var(--color-border);
+			border-radius: var(--border-radius-large);
+			padding: 12px;
 		}
 
 		.button-wrapper {
diff --git a/src/views/Text2Image/Text2ImageReferenceWidget.vue b/src/views/Text2Image/Text2ImageReferenceWidget.vue
index a7f76705..161c6f24 100644
--- a/src/views/Text2Image/Text2ImageReferenceWidget.vue
+++ b/src/views/Text2Image/Text2ImageReferenceWidget.vue
@@ -58,7 +58,6 @@ export default {
 		flex-direction: column;
 		width: 100%;
 		border-radius: var(--border-radius);
-		margin-top: 8px;
 	}
 }
 </style>