Update the BookSearch component to show as the row for mobiles.

lib/decentralised_book_index_web/components/my_components/book_search.ex

@@ -15,7 +15,7 @@ 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="flex flex-col items-center justify-between p-4 space-y-3 md:flex-row md:space-y-0 md:space-x-4">
+      <div class="flex items-center justify-between p-4 space-y-3 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,7 +29,7 @@ defmodule DecentralisedBookIndexWeb.Components.MyComponents.BookSearch do
             </div>
           </form>
         </div>
-        <div class="flex flex-col items-stretch justify-end flex-shrink-0 w-full space-y-2 md:w-auto md:flex-row md:space-y-0 md:items-center md:space-x-3">
+        <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"}>
               <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">