From b3aefdca4c8931143dcea5f6d30521d6b7d382e1 Mon Sep 17 00:00:00 2001
From: David Dal Busco <david.dalbusco@dfinity.org>
Date: Tue, 29 Oct 2024 14:23:47 +0100
Subject: [PATCH] style(frontend): dapp modal banner outside card (#3206)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Motivation

Fix a side effect of the new modal design #3171. The banner for the dapp
modal should be outside of the card.

# Screenshots

Incorrect:

<img width="1536" alt="Capture d’écran 2024-10-29 à 13 58 57"
src="https://github.com/user-attachments/assets/c0c0fab2-c76a-4331-90ca-a401ec0cb43f">

After:

<img width="1536" alt="Capture d’écran 2024-10-29 à 13 58 40"
src="https://github.com/user-attachments/assets/15e277bc-afec-4445-bc15-29f0b516ec58">
<img width="1536" alt="Capture d’écran 2024-10-29 à 13 58 46"
src="https://github.com/user-attachments/assets/dd129e50-b1f0-4756-9a93-1bb19e786444">
---
 .../src/lib/components/dapps/DappModal.svelte       | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/lib/components/dapps/DappModal.svelte b/src/frontend/src/lib/components/dapps/DappModal.svelte
index f418785045..ca92552191 100644
--- a/src/frontend/src/lib/components/dapps/DappModal.svelte
+++ b/src/frontend/src/lib/components/dapps/DappModal.svelte
@@ -45,7 +45,7 @@
 		<span class="text-center text-xl">{name}</span>
 	</svelte:fragment>
 
-	<div class="stretch flex flex-col gap-4">
+	<div class="flex flex-col gap-4">
 		{#if nonNullish(screenshots) && screenshots.length > 0}
 			<div class="overflow-hidden rounded-3xl">
 				<ImgBanner
@@ -143,3 +143,14 @@
 		>
 	{/if}
 </Modal>
+
+<style lang="scss">
+	@use '../../styles/mixins/modal';
+
+	article {
+		@include modal.content;
+
+		padding: var(--padding-3x) var(--padding-2_5x);
+		margin: 0 0 var(--padding-3x);
+	}
+</style>