src/app/ui/Layout.svelte

@@ -11,7 +11,6 @@
  * - Footer area (currently empty, reserved for future use)
  */
 import { BreadcrumbHeader } from '$entities/Breadcrumb';
-import { TypographyMenu } from '$features/SetupFont';
 import favicon from '$shared/assets/favicon.svg';
 import { ResponsiveProvider } from '$shared/lib';
 import { ScrollArea } from '$shared/shadcn/ui/scroll-area';
@@ -52,7 +51,6 @@ let { children }: Props = $props();
         <!-- <ScrollArea class="h-screen w-screen"> -->
         <main class="flex-1 h-full w-full max-w-6xl mx-auto px-0 pt-0 pb-10 sm:px-6 sm:pt-8 sm:pb-12 md:px-8 md:pt-10 md:pb-16 lg:px-10 lg:pt-12 lg:pb-20 xl:px-16 relative overflow-x-hidden">
             <TooltipProvider>
-                <TypographyMenu />
                 {@render children?.()}
             </TooltipProvider>
         </main>

src/widgets/SampleList/ui/SampleList/SampleList.svelte

@@ -1,7 +1,8 @@
 <!--
     Component: SampleList
     Renders a list of fonts in a virtualized list to improve performance.
-    Includes pagination with auto-loading when scrolling near the bottom.
+    - Includes pagination with auto-loading when scrolling near the bottom.
+    - Provides a typography menu for font setup.
 -->
 <script lang="ts">
 import {
@@ -10,9 +11,19 @@ import {
     unifiedFontStore,
 } from '$entities/Font';
 import { FontSampler } from '$features/DisplayFont';
-import { controlManager } from '$features/SetupFont';
+import {
+    TypographyMenu,
+    controlManager,
+} from '$features/SetupFont';
 
 let text = $state('The quick brown fox jumps over the lazy dog...');
+let wrapper = $state<HTMLDivElement | null>(null);
+// Binds to the actual window height
+let innerHeight = $state(0);
+// Is the component above the middle of the viewport?
+let isAboveMiddle = $state(false);
+
+const isLoading = $derived(unifiedFontStore.isFetching || unifiedFontStore.isLoading);
 
 /**
  * Load more fonts by moving to the next page
@@ -51,9 +62,23 @@ const displayRange = $derived.by(() => {
     return `Showing ${loadedCount} of ${total} fonts`;
 });
 
-const isLoading = $derived(unifiedFontStore.isFetching || unifiedFontStore.isLoading);
+function checkPosition() {
+    if (!wrapper) return;
+
+    const rect = wrapper.getBoundingClientRect();
+    const viewportMiddle = innerHeight / 2;
+
+    isAboveMiddle = rect.top < viewportMiddle;
+}
 </script>
 
+<svelte:window
+    bind:innerHeight
+    onscroll={checkPosition}
+    onresize={checkPosition}
+/>
+
+<div bind:this={wrapper}>
     <FontVirtualList
         items={unifiedFontStore.fonts}
         total={unifiedFontStore.pagination.total}
@@ -75,3 +100,8 @@ const isLoading = $derived(unifiedFontStore.isFetching || unifiedFontStore.isLoa
             </FontListItem>
         {/snippet}
     </FontVirtualList>
+
+    {#if isAboveMiddle}
+        <TypographyMenu />
+    {/if}
+</div>