디렉터리 페이지에서, 항목이 많을 때 레이아웃이 깨지던 버그 수정

src/lib/components/TopBar.svelte

@@ -16,7 +16,7 @@
   });
 </script>
 
-<div class="relative mt-4 flex items-center justify-between">
+<div class="sticky top-0 flex items-center justify-between bg-white pt-4">
   <button onclick={back} class="rounded-full p-1 active:bg-gray-100">
     <IconArrowBack class="text-2xl" />
   </button>

src/lib/components/buttons/FloatingButton.svelte

@@ -1,22 +1,36 @@
 <script lang="ts">
   import type { Component } from "svelte";
   import type { SvelteHTMLElements } from "svelte/elements";
+  import { AdaptiveDiv } from "$lib/components/divs";
 
   interface Props {
+    bottom?: string;
     icon: Component<SvelteHTMLElements["svg"]>;
     onclick?: () => void;
   }
 
-  let { icon: Icon, onclick }: Props = $props();
-</script>
+  let { bottom = "bottom-20", icon: Icon, onclick }: Props = $props();
 
-<button
-  onclick={() => {
+  const click = () => {
     setTimeout(() => {
       onclick?.();
     }, 100);
-  }}
-  class="absolute bottom-4 right-4 flex h-14 w-14 items-center justify-center rounded-full bg-gray-300 shadow-lg transition active:scale-95 active:bg-gray-400"
->
-  <Icon class="text-xl" />
-</button>
+  };
+</script>
+
+<div class="pointer-events-none fixed inset-0">
+  <div class="absolute right-0 w-full {bottom}">
+    <AdaptiveDiv>
+      <div class="relative">
+        <div class="pointer-events-auto absolute bottom-4 right-4">
+          <button
+            onclick={click}
+            class="flex h-14 w-14 items-center justify-center rounded-full bg-gray-300 shadow-lg transition active:scale-95 active:bg-gray-400"
+          >
+            <Icon class="text-xl" />
+          </button>
+        </div>
+      </div>
+    </AdaptiveDiv>
+  </div>
+</div>