src/widgets/TypographySettings/ui/TypographyMenu.svelte

@@ -1,15 +1,37 @@
 <script lang="ts">
-import SetupFontMenu from '$features/SetupFont/ui/SetupFontMenu.svelte';
+import { SetupFontMenu } from '$features/SetupFont';
 import {
     Content as ItemContent,
     Root as ItemRoot,
 } from '$shared/shadcn/ui/item';
+
+import { displayedFontsStore } from '$features/DisplayFont';
+import { cubicOut } from 'svelte/easing';
+import { crossfade } from 'svelte/transition';
+
+const [send, receive] = crossfade({
+    duration: 400,
+    easing: cubicOut,
+    fallback(node, params) {
+        // If it can't find a pair, it falls back to a simple fade/slide
+        return {
+            duration: 400,
+            css: t => `opacity: ${t}; transform: translateY(${(1 - t) * 10}px);`,
+        };
+    },
+});
 </script>
 
-<div class="w-full p-2 backdrop-blur-2xl">
-    <ItemRoot variant="outline" class="w-full p-2.5">
-        <ItemContent class="flex flex-row justify-center items-center">
+{#if displayedFontsStore.hasAnyFonts}
+    <div
+        class="w-auto fixed bottom-5 left-1/2 translate-x-[-50%] max-w-max z-10"
+        in:receive={{ key: 'panel' }}
+        out:send={{ key: 'panel' }}
+    >
+        <ItemRoot variant="outline" class="w-auto max-w-max p-2.5 rounded-2xl backdrop-blur-lg">
+            <ItemContent class="flex flex-row justify-center items-center max-w-max">
                 <SetupFontMenu />
             </ItemContent>
         </ItemRoot>
-</div>
+    </div>
+{/if}