Merge pull request #2101 from tejas-raskar/fix-1997-bring-back-the-current-version-in-the-footer

Author: ItzNotABug

src/lib/layout/footer.svelte

@@ -11,7 +11,7 @@
         Button,
         Badge
     } from '@appwrite.io/pink-svelte';
-    import { isSmallViewport, isTabletViewport } from '$lib/stores/viewport';
+    import { isSmallViewport } from '$lib/stores/viewport';
 
     const currentYear = new Date().getFullYear();
 </script>
@@ -23,7 +23,6 @@
             direction="row"
             alignItems="center"
             gap={$isSmallViewport ? 'm' : 'l'}
-            inline={$isTabletViewport}
             justifyContent="flex-start">
             <Typography.Caption variant="400">
                 ⓒ {currentYear} Appwrite. All rights reserved.
@@ -54,63 +53,37 @@
                 </Button.Anchor>
             </Layout.Stack>
         </Layout.Stack>
-        {#if isCloud && $isSmallViewport}
-            <div class="extra-margin">
-                <Layout.Stack direction="row" justifyContent={'flex-start'} alignItems="center">
-                    {#if $version}
-                        {#if isCloud}
-                            <Icon size="s" icon={IconCloud} />
-                        {/if}
-                        <Link.Anchor
-                            size="s"
-                            variant="quiet"
-                            href="https://github.com/appwrite/appwrite/releases"
-                            aria-label="Appwrite releases on Github"
-                            target="_blank"
-                            rel="noreferrer">
-                            Version {$version}
-                        </Link.Anchor>
-                        <span class="divider-wrapper">
-                            <Divider vertical />
-                        </span>
-                    {/if}
-                    <Badge
-                        size="xs"
-                        type="success"
-                        variant="secondary"
-                        content="Generally Available"
-                        style="white-space: nowrap;" />
-                </Layout.Stack>
-            </div>
-        {/if}
+
         <Layout.Stack
             direction="row"
             justifyContent={$isSmallViewport ? 'flex-start' : 'flex-end'}
-            alignItems="center">
-            {#if isCloud}
-                {#if !$isSmallViewport}
+            alignItems="center"
+            wrap={$isSmallViewport ? 'wrap' : 'normal'}>
+            {#if !$isSmallViewport}
+                {#if isCloud}
                     <Badge
                         size="xs"
                         type="success"
                         variant="secondary"
                         content="Generally Available"
                         style="white-space: nowrap;" />
-
                     <Icon size="s" icon={IconCloud} />
-                    {#if $version}
-                        <Link.Anchor
-                            size="s"
-                            variant="quiet"
-                            href="https://github.com/appwrite/appwrite/releases"
-                            aria-label="Appwrite releases on Github"
-                            target="_blank"
-                            rel="noreferrer">
-                            Version {$version}
-                        </Link.Anchor>
-                        <span class="divider-wrapper">
-                            <Divider vertical />
-                        </span>
-                    {/if}
+                {/if}
+
+                {#if $version}
+                    <Link.Anchor
+                        size="s"
+                        variant="quiet"
+                        href="https://github.com/appwrite/appwrite/releases"
+                        aria-label="Appwrite releases on Github"
+                        target="_blank"
+                        rel="noreferrer"
+                        style="white-space: nowrap;">
+                        Version {$version}
+                    </Link.Anchor>
+                    <span class="divider-wrapper">
+                        <Divider vertical />
+                    </span>
                 {/if}
             {/if}
 
@@ -157,6 +130,32 @@
                     Cookies
                 </Link.Anchor>
             {/if}
+            {#if $isSmallViewport}
+                {#if $version}
+                    <span class="divider-wrapper">
+                        <Divider vertical />
+                    </span>
+                    <Link.Anchor
+                        size="s"
+                        variant="quiet"
+                        href="https://github.com/appwrite/appwrite/releases"
+                        aria-label="Appwrite releases on Github"
+                        target="_blank"
+                        rel="noreferrer"
+                        style="white-space: nowrap;">
+                        Version {$version}
+                    </Link.Anchor>
+                    {#if isCloud}
+                        <Icon size="s" icon={IconCloud} />
+                        <Badge
+                            size="xs"
+                            type="success"
+                            variant="secondary"
+                            content="Generally Available"
+                            style="white-space: nowrap;" />
+                    {/if}
+                {/if}
+            {/if}
         </Layout.Stack>
     </Layout.Stack>
 </footer>
@@ -180,7 +179,4 @@
             margin-inline-end: 2rem;
         }
     }
-    .extra-margin {
-        margin-block-start: var(--space-2, 4px);
-    }
 </style>