fix: Position code select above content

lib/medical_transcription_web/components/code_select.ex

@@ -43,7 +43,7 @@ defmodule MedicodeWeb.Components.CodeSelect do
     ~H"""
     <div class="w-full" phx-click-away="clear-codes" phx-target={@myself}>
       <%= if is_nil(@selected_code) do %>
-        <.form for={@form} phx-change="suggest-code" phx-target={@myself}>
+        <.form for={@form} phx-change="suggest-code" phx-target={@myself} class="relative">
           <.input
             type="text"
             field={@form[:search_term]}
@@ -51,23 +51,23 @@ defmodule MedicodeWeb.Components.CodeSelect do
             style={if length(@codes) > 0, do: "border-radius: 0.25rem 0.25rem 0 0 !important;"}
             placeholder="Search for another code..."
           />
-        </.form>
 
-        <div
-          :if={length(@codes) > 0}
-          class="border-l border-r border-b border-zinc-400 rounded-b overflow-hidden"
-        >
-          <button
-            :for={code <- @codes}
-            type="button"
-            class="w-full text-left px-2 py-1 text-sm border-b border-zinc-100 last:border-b-0 hover:bg-blue-200"
-            phx-click="choose-code"
-            phx-value-code={code.code}
-            phx-target={@myself}
+          <div
+            :if={length(@codes) > 0}
+            class="absolute z-10 w-full bg-white border-l border-r border-b border-zinc-400 rounded-b overflow-hidden"
           >
-            <%= code.code %>: <%= code.description %>
-          </button>
-        </div>
+            <button
+              :for={code <- @codes}
+              type="button"
+              class="w-full text-left px-2 py-1 text-sm border-b border-zinc-100 last:border-b-0 hover:bg-blue-200"
+              phx-click="choose-code"
+              phx-value-code={code.code}
+              phx-target={@myself}
+            >
+              <%= code.code %>: <%= code.description %>
+            </button>
+          </div>
+        </.form>
       <% else %>
         <div class="px-[14px]">
           <div class="flex justify-between pb-1 border-b border-zinc-300">