From c5550ad3f18e44b92a9bcb1f19e777f0c975f615 Mon Sep 17 00:00:00 2001
From: Nicolas Villanueva <1890113+MexicanAce@users.noreply.github.com>
Date: Thu, 21 Nov 2024 05:27:05 -0800
Subject: [PATCH] fix: display batch details in correct columns (#322)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# 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 | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/packages/app/src/components/batches/InfoTable.vue b/packages/app/src/components/batches/InfoTable.vue
index 1784549814..e207048e54 100644
--- a/packages/app/src/components/batches/InfoTable.vue
+++ b/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>