style(frontend): dapp modal banner outside card (#3206)

# 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’écran 2024-10-29 à 13 58 57" src="https://github.com/user-attachments/assets/c0c0fab2-c76a-4331-90ca-a401ec0cb43f"> After: <img width="1536" alt="Capture d’écran 2024-10-29 à 13 58 40" src="https://github.com/user-attachments/assets/15e277bc-afec-4445-bc15-29f0b516ec58"> <img width="1536" alt="Capture d’écran 2024-10-29 à 13 58 46" src="https://github.com/user-attachments/assets/dd129e50-b1f0-4756-9a93-1bb19e786444">
dfinity · Oct 29, 2024 · b3aefdc · b3aefdc
1 parent 53a9d7c
commit b3aefdc
Showing 1 changed file with 12 additions and 1 deletion.
diff --git 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>