feat(Footer): change the footer styles and layout to avoid overlapping with the TypographyMenu

src/widgets/Footer/ui/Footer.svelte

@@ -6,14 +6,33 @@
 <script lang="ts">
 import type { ResponsiveManager } from '$shared/lib/helpers';
 import { FooterLink } from '$shared/ui';
+import clsx from 'clsx';
 import { getContext } from 'svelte';
 
 const responsive = getContext<ResponsiveManager>('responsive');
+const isVertical = $derived(responsive?.isDesktop || responsive?.isDesktopLarge);
 const currentYear = new Date().getFullYear();
 </script>
 
-{#if responsive?.isDesktop || responsive?.isDesktopLarge}
+<footer
-    <footer class="fixed bottom-5 right-5 z-50 flex flex-col items-end gap-1 pointer-events-none">
+    class={clsx(
+        'fixed z-10 flex flex-row items-end gap-1 pointer-events-none',
+        isVertical ? 'bottom-5 right-5 [writing-mode:vertical-rl] rotate-180' : ' bottom-2 left-1/2 -translate-x-1/2',
+    )}
+>
+    <!-- Project Name (Horizontal) -->
+    <div
+        class={clsx(
+            'pointer-events-auto items-center gap-2 bg-surface/80 dark:bg-dark-bg/80 backdrop-blur-sm px-3 py-1 border border-subtle',
+            isVertical ? 'flex' : 'hidden',
+        )}
+    >
+        <div class="w-1.5 h-1.5 bg-brand"></div>
+        <span class="text-2xs font-mono uppercase tracking-wider-mono text-neutral-500 dark:text-neutral-400">
+            GlyphDiff © 2025 — {currentYear}
+        </span>
+    </div>
+
     <!-- Portfolio Link (Vertical) -->
     <div class="pointer-events-auto">
         <FooterLink
@@ -21,16 +40,7 @@ const currentYear = new Date().getFullYear();
             href="https://allmy.work/"
             target="_blank"
             rel="noopener noreferrer"
-                class="border border-subtle"
+            class={clsx('border border-subtle', isVertical ? 'text-2xs' : 'text-4xs')}
         />
     </div>
-
+</footer>
-        <!-- Project Name (Horizontal) -->
-        <div class="pointer-events-auto flex items-center gap-2 bg-surface/80 dark:bg-dark-bg/80 backdrop-blur-sm px-3 py-1 border border-subtle">
-            <div class="w-1.5 h-1.5 bg-brand"></div>
-            <span class="text-2xs font-mono uppercase tracking-wider-mono text-neutral-500 dark:text-neutral-400">
-                GlyphDiff © 2025 — {currentYear}
-            </span>
-        </div>
-    </footer>
-{/if}