From 734ca2ce1bf344def9804d06aa380684c54ad0f0 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Thu, 23 Apr 2026 09:41:31 +0300
Subject: [PATCH] feat(Footer): change the footer styles and layout to avoid
 overlapping with the TypographyMenu

---
 src/widgets/Footer/ui/Footer.svelte | 52 +++++++++++++++++------------
 1 file changed, 31 insertions(+), 21 deletions(-)

diff --git a/src/widgets/Footer/ui/Footer.svelte b/src/widgets/Footer/ui/Footer.svelte
index a8b1f6f..2a57fd7 100644
--- a/src/widgets/Footer/ui/Footer.svelte
+++ b/src/widgets/Footer/ui/Footer.svelte
@@ -6,31 +6,41 @@
 <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 class="fixed bottom-5 right-5 z-50 flex flex-col items-end gap-1 pointer-events-none">
-        <!-- Portfolio Link (Vertical) -->
-        <div class="pointer-events-auto">
-            <FooterLink
-                text="allmy.work"
-                href="https://allmy.work/"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="border border-subtle"
-            />
-        </div>
+<footer
+    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>
 
-        <!-- 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}
+    <!-- Portfolio Link (Vertical) -->
+    <div class="pointer-events-auto">
+        <FooterLink
+            text="allmy.work"
+            href="https://allmy.work/"
+            target="_blank"
+            rel="noopener noreferrer"
+            class={clsx('border border-subtle', isVertical ? 'text-2xs' : 'text-4xs')}
+        />
+    </div>
+</footer>