From ec858dcd35361d55832fbdfb7bd30f2f5997f603 Mon Sep 17 00:00:00 2001
From: Bhargav <BJP232004@GMAIL.COM>
Date: Mon, 21 Oct 2024 16:51:04 +0530
Subject: [PATCH] fix: vertical layout on about us page. (#4866)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Streamlined presentation of version, commit hash, and build date on
the About page for improved clarity.

- **Bug Fixes**
- Removed outdated layout that may have caused confusion in data
display.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 web/src/views/About.vue | 28 ++++++++++++++++------------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/web/src/views/About.vue b/web/src/views/About.vue
index d9f8928cfd..d2fc984914 100644
--- a/web/src/views/About.vue
+++ b/web/src/views/About.vue
@@ -32,19 +32,23 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     <q-separator class="separator" />
 
     <div class="about_data">
-      <div class="row head">
-        <div class="col-1">{{ t("about.version") }}</div>
-        <div class="col-6 col-md-5 col-lg-4">{{ t("about.commitHash") }}</div>
-        <div class="col-3 col-md-3 col-lg-2">{{ t("about.buildDate") }}</div>
+      <div>
+        <span class="inline-block text-bold" style="width: 100px"
+          >{{ t("about.version") }}:</span
+        >
+        {{ store.state.zoConfig.version }}
       </div>
-      <div class="row body">
-        <div class="col-1">{{ store.state.zoConfig.version }}</div>
-        <div class="col-6 col-md-5 col-lg-4">
-          {{ store.state.zoConfig.commit_hash }}
-        </div>
-        <div class="col-3 col-md-3 col-lg-2">
-          {{ store.state.zoConfig.build_date }}
-        </div>
+      <div>
+        <span class="inline-block text-bold" style="width: 100px"
+          >{{ t("about.commitHash") }}:</span
+        >
+        {{ store.state.zoConfig.commit_hash }}
+      </div>
+      <div>
+        <span class="inline-block text-bold" style="width: 100px"
+          >{{ t("about.buildDate") }}:</span
+        >
+        {{ store.state.zoConfig.build_date }}
       </div>
     </div>
     <div class="about_data q-mt-lg">