Update the Book's nested form's layout if there're an error.

lib/decentralised_book_index_web/live/book_live/form_component.ex

@@ -145,16 +145,30 @@ defmodule DecentralisedBookIndexWeb.BookLive.FormComponent do
       <tbody phx-hook="bidSort" id="bidSort" phx-target={@myself}>
         <.inputs_for :let={bid_form} field={@form[:bids]}>
           <tr data-id={bid_form.index}>
-            <td class="px-3 w-10 pt-2">
-              <svg class="w-6 h-6 text-gray-800 dark:text-white handle cursor-pointer" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
-                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m8 15 4 4 4-4m0-6-4-4-4 4"/>
+            <td class="px-3 w-10 h-10 pt-2 align-top group">
+              <svg
+                class="w-6 h-6 text-gray-800 dark:text-white handle cursor-pointer mt-2"
+                aria-hidden="true"
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                fill="none"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="m8 15 4 4 4-4m0-6-4-4-4 4"
+                />
               </svg>
             </td>
-            <td class="px-3 w-36">
+            <td class="px-3 w-36 align-top group">
               <label for={bid_form[:type].id} class="hidden">Type</label>
               <.input field={bid_form[:type]} />
             </td>
-            <td class="px-3">
+            <td class="px-3 align-top group">
               <label for={bid_form[:bid].id} class="hidden">Id</label>
               <.input field={bid_form[:bid]} />
             </td>
@@ -229,12 +243,26 @@ defmodule DecentralisedBookIndexWeb.BookLive.FormComponent do
       <tbody phx-hook="authorRoleSort" id="authorRoleSort" phx-target={@myself}>
         <.inputs_for :let={author_roles_form} field={@form[:author_roles]}>
           <tr data-id={author_roles_form.index}>
-            <td class="px-3 w-10 pt-2">
-              <svg class="w-6 h-6 text-gray-800 dark:text-white handle cursor-pointer" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
-                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m8 15 4 4 4-4m0-6-4-4-4 4"/>
+            <td class="px-3 w-10 pt-2 align-top group">
+              <svg
+                class="w-6 h-6 text-gray-800 dark:text-white handle cursor-pointer mt-2"
+                aria-hidden="true"
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                fill="none"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="m8 15 4 4 4-4m0-6-4-4-4 4"
+                />
               </svg>
             </td>
-            <td class="px-3 w-48">
+            <td class="px-3 w-48 align-top group">
               <label for={author_roles_form[:author_id].id} class="hidden">Type</label>
               <.input field={author_roles_form[:author_id]} type="hidden" show_errors?={false} />
               <.selected_author
@@ -244,7 +272,7 @@ defmodule DecentralisedBookIndexWeb.BookLive.FormComponent do
                 class="mt-2 w-full"
               />
             </td>
-            <td class="px-3">
+            <td class="px-3 align-top group">
               <label for={author_roles_form[:role].id} class="hidden">Id</label>
               <.input field={author_roles_form[:role]} />
             </td>