모바일 환경에서 SearchBar의 레이아웃이 깨지는 문제 수정

src/routes/(fullscreen)/file/[id]/TopBarMenu.svelte

@@ -46,7 +46,7 @@
 
 {#if isOpen && (directoryId || downloadUrl || fileBlob)}
   <div
-    class="absolute right-2 top-full z-20 min-w-40 space-y-1 rounded-lg bg-white px-1 py-2 shadow-2xl"
+    class="absolute right-2 top-full z-20 min-w-44 space-y-1 rounded-lg bg-white px-1 py-2 shadow-2xl"
     transition:fly={{ y: -8, duration: 200 }}
   >
     <p class="px-3 pt-2 text-sm font-semibold text-gray-600">더보기</p>
@@ -57,7 +57,9 @@
         onclick: () => void,
       )}
         <button {onclick} class="rounded-xl active:bg-gray-100">
-          <div class="flex items-center gap-x-3 px-3 py-2 text-gray-700 transition active:scale-95">
+          <div
+            class="flex items-center gap-x-3 px-3 py-2 text-lg text-gray-700 transition active:scale-95"
+          >
             <Icon />
             <p class="font-medium">{text}</p>
           </div>

src/routes/(fullscreen)/search/SearchBar.svelte

@@ -1,17 +1,14 @@
 <script lang="ts">
-  import type { ClassValue } from "svelte/elements";
-
   import IconArrowBack from "~icons/material-symbols/arrow-back";
 
   interface Props {
-    class?: ClassValue;
     value: string;
   }
 
-  let { class: className, value = $bindable() }: Props = $props();
+  let { value = $bindable() }: Props = $props();
 </script>
 
-<div class={["sticky top-0 z-10 flex items-center gap-x-2 px-2 py-3 backdrop-blur-2xl", className]}>
+<div class={"sticky top-0 z-10 flex items-center gap-x-2 px-2 py-3 backdrop-blur-2xl"}>
   <button
     onclick={() => history.back()}
     class="w-[2.3rem] flex-shrink-0 rounded-full p-1 active:bg-black active:bg-opacity-[0.04]"
@@ -22,6 +19,6 @@
     bind:value
     type="text"
     placeholder="검색"
-    class="mr-1 h-[2.3rem] flex-grow rounded-lg bg-gray-100 px-3 py-1.5 placeholder-gray-600 focus:outline-none"
+    class="mr-1 h-[2.3rem] min-w-0 flex-grow rounded-lg bg-gray-100 px-3 py-1.5 placeholder-gray-600 focus:outline-none"
   />
 </div>