Merge pull request #2630 from appwrite/fix-alignment

Author: ItzNotABug

src/lib/components/emptyCardImageCloud.svelte

@@ -1,13 +1,20 @@
-<script>
-    import { getNextTier, tierToPlan } from '$lib/stores/billing';
+<script lang="ts">
+    import { isSmallViewport } from '$lib/stores/viewport';
     import { organization } from '$lib/stores/organization';
+    import { getNextTier, tierToPlan } from '$lib/stores/billing';
     import { Card, Layout, Typography } from '@appwrite.io/pink-svelte';
 
     export let source = 'empty_state_card';
+    export let responsive = false;
+
+    // type def for Layout.Stack!
+    let direction: 'column' | 'row' | 'row-reverse' | 'column-reverse' = 'row';
+
+    $: direction = responsive ? ($isSmallViewport ? 'column' : 'row') : 'row';
 </script>
 
 <Card.Base variant="secondary" padding="s" radius="s">
-    <Layout.Stack direction="row" gap="l">
+    <Layout.Stack {direction} gap="l">
         {#if $$slots?.image}
             <div style="flex-shrink:0">
                 <slot name="image" />

src/routes/(console)/project-[region]-[project]/auth/security/updateMockNumbers.svelte

@@ -95,7 +95,7 @@
             Learn more</Link.Anchor>
         <svelte:fragment slot="aside">
             {#if isComponentDisabled}
-                <EmptyCardImageCloud source="email_signature_card">
+                <EmptyCardImageCloud responsive source="email_signature_card">
                     <svelte:fragment slot="image">
                         <div class=" is-only-mobile u-width-full-line u-height-100-percent">
                             {#if $app.themeInUse === 'dark'}

src/routes/(console)/project-[region]-[project]/auth/templates/emailSignature.svelte

@@ -15,7 +15,7 @@
     Enable or disable Appwrite branding in your email template signature.
 
     <svelte:fragment slot="aside">
-        <EmptyCardImageCloud source="email_signature_card" let:nextTier>
+        <EmptyCardImageCloud responsive source="email_signature_card" let:nextTier>
             <svelte:fragment slot="image">
                 <div class=" is-only-mobile u-width-full-line u-height-100-percent">
                     {#if $app.themeInUse === 'dark'}