Fix the broken layout for the BookSearch component.

lib/decentralised_book_index_web/components/my_components/book_search.ex

@@ -14,8 +14,8 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents.BookSearch do
 
   def book_search(assigns) do
     ~H"""
-    <div class="relative bg-white shadow-md dark:bg-gray-800 sm:rounded-lg">
+    <div class="bg-white shadow-md dark:bg-gray-800 sm:rounded-lg">
-      <div class="flex items-center justify-between p-4 space-y-3 flex-row space-y-0 space-x-4">
+      <div class="flex items-center justify-center p-4 flex-row space-y-0 space-x-4">
         <div class="w-full grow">
           <form class="flex items-center" phx-submit="search">
             <label for="simple-search" class="sr-only">Search</label>
@@ -29,10 +29,9 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents.BookSearch do
             </div>
           </form>
         </div>
-        <div class="flex flex-row items-stretch justify-end flex-shrink-0 w-full space-y-2 w-auto space-y-0 items-center space-x-3">
           <%= if @current_user != nil and Role.can_moderate?(@current_user.role) do %>
-            <.link patch={~p"/books/new"}>
+            <.link patch={~p"/books/new"} class="flex-shrink-0 my-auto">
-              <button type="button" class="flex items-center justify-center px-4 py-2 text-sm font-medium text-black dark:text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 focus:outline-none dark:focus:ring-primary-800">
+              <button type="button" class="flex items-center justify-between px-4 py-2 text-sm font-medium text-black dark:text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 focus:outline-none dark:focus:ring-primary-800">
                 <svg class="h-3.5 w-3.5 mr-2" fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                   <path clip-rule="evenodd" fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" />
                 </svg>
@@ -46,7 +45,6 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents.BookSearch do
             select_options={@select_options}
             selected_option={@selected_option}
           />
-        </div>
       </div>
     </div>
     """