FIX: corrected logic & improved css

src/components/TransactionSidebar.vue

@@ -41,7 +41,7 @@ function clearList() {
     <SidebarInset>
       <slot />
     </SidebarInset>
-    <Sidebar collapsible="offcanvas" side="right" style="--sidebar-width: 26rem;">
+    <Sidebar collapsible="offcanvas" side="right" style="--sidebar-width: 24rem;">
       <SidebarHeader mt-1 text-center>
         Planned Actions
       </SidebarHeader>
@@ -55,10 +55,10 @@ function clearList() {
         </SidebarGroup>
         <SidebarSeparator />
         <SidebarGroup class="m-b-2 m-t-2 flex flex-row justify-center">
-          <Button variant="outline" w="1/8" rounded-bl-lg rounded-br-none rounded-tl-lg rounded-tr-none>
+          <Button variant="outline" w="1/7" rounded-bl-lg rounded-br-none rounded-tl-lg rounded-tr-none>
             <IconTooling />
           </Button>
-          <Button variant="outline" w="1/8" rounded-bl-none rounded-br-lg rounded-tl-none rounded-tr-lg>
+          <Button variant="outline" w="1/7" rounded-bl-none rounded-br-lg rounded-tl-none rounded-tr-lg>
             <IconTooling />
           </Button>
         </SidebarGroup>
@@ -89,7 +89,11 @@ function clearList() {
         <SidebarSeparator />
         <SidebarGroup>
           <DragAndDrop :length="actions.length" :emptyListPhrase="emptyListPhrase">
-            <DragAndDropItem v-for="action in actions" :key="action.id" :item="action" :items="actions" />
+            <DragAndDropItem v-for="action in actions" :key="action.id" :item="action" :items="actions">
+              <div class="">
+                <h1>{{ action.title }}</h1>
+              </div>
+            </DragAndDropItem>
           </DragAndDrop>
         </SidebarGroup>
       </SidebarContent>