fix: display batch details in correct columns (#322)

# What ❔

Move all Batch commit, prove and execute tx hashes into the same column

## Why ❔

Closes #66 

## Checklist

- [x] PR title corresponds to the body of PR (we generate changelog
entries from PRs).
- [x] Tests for the changes have been added / updated.
- [x] Documentation comments have been added / updated.

## Evidence

Large screen

![image](https://github.com/user-attachments/assets/e625f785-52d1-4d5d-b493-7070933413d7)

Small screen

![image](https://github.com/user-attachments/assets/8e99897e-ac18-4e83-9db6-64b1fa739fcc)

packages/app/src/components/batches/InfoTable.vue

@@ -20,8 +20,6 @@ import useContext from "@/composables/useContext";
 import type { BatchDetails } from "@/composables/useBatch";
 import type { Component, PropType } from "vue";
 
-import { arrayHalfDivider } from "@/utils/helpers";
-
 const { t } = useI18n();
 const { width: screenWidth } = useWindowSize();
 const { currentNetwork } = useContext();
@@ -50,19 +48,20 @@ const tableInfoItems = computed(() => {
     url?: string;
   };
 
-  let tableItems: InfoTableItem[] = [
+  const tableItemsLeft: InfoTableItem[] = [
     {
       label: t("batches.index"),
       tooltip: t("batches.indexTooltip"),
       value: props.batchNumber,
     },
   ];
+  const tableItemsRight: InfoTableItem[] = [];
 
   if (!props.batch) {
-    return [tableItems];
+    return [tableItemsLeft];
   }
 
-  tableItems.push(
+  tableItemsLeft.push(
     {
       label: t("batches.size"),
       tooltip: t("batches.sizeTooltip"),
@@ -87,7 +86,7 @@ const tableInfoItems = computed(() => {
     ["executeTxHash", "executedAt", "notYetExecuted"],
   ] as [keyof BatchDetails, keyof BatchDetails, string][]) {
     if (props.batch[key]) {
-      tableItems.push(
+      tableItemsRight.push(
         {
           label: t(`batches.${key}`),
           tooltip: t(`batches.${key}Tooltip`),
@@ -108,10 +107,10 @@ const tableInfoItems = computed(() => {
   }
 
   if (screenWidth.value < 1024) {
-    return [tableItems];
+    return [tableItemsLeft.concat(tableItemsRight)];
   }
 
-  return arrayHalfDivider(tableItems);
+  return [tableItemsLeft, tableItemsRight];
 });
 </script>