From 735df7ec3a90395518d894f7059af26eac0fd17a Mon Sep 17 00:00:00 2001
From: Samar Adel <samar@incubaid.com>
Date: Mon, 4 Sep 2023 12:40:10 +0300
Subject: [PATCH] fix layout align (#1059)

---
 packages/dashboard/src/Dashboard.vue          | 76 ++++++++++++-------
 .../src/explorer/components/Layout.vue        |  6 +-
 .../dashboard/src/explorer/views/Nodes.vue    |  2 +-
 3 files changed, 52 insertions(+), 32 deletions(-)

diff --git a/packages/dashboard/src/Dashboard.vue b/packages/dashboard/src/Dashboard.vue
index d1aad66586..42ee0dd372 100644
--- a/packages/dashboard/src/Dashboard.vue
+++ b/packages/dashboard/src/Dashboard.vue
@@ -1,31 +1,29 @@
 <!-- eslint-disable vue/no-v-text-v-html-on-component -->
 <template>
   <v-app>
-    <div>
-      <v-app-bar :class="{ 'sidebar-opened': !mini, 'ml-4 ': !mini }" color="#064663" dense dark fixed height="65">
-        <v-app-bar-nav-icon></v-app-bar-nav-icon>
-
-        <v-toolbar-title class="font-weight-bold" @click="redirectToHomePage" style="cursor: pointer"
-          >Threefold Chain</v-toolbar-title
-        >
-
-        <v-spacer>
-          <div class="d-flex align-center justify-start">
-            <TftSwapPrice v-if="!loadingAPI" />
-            <FundsCard v-if="$store.state.credentials.initialized && $store.state.credentials.balance" />
-          </div>
-        </v-spacer>
-        <div class="d-flex align-center">
-          <div class="d-flex" style="align-items: center">
-            <v-btn icon @click="toggle_dark_mode">
-              <v-icon>mdi-theme-light-dark</v-icon>
-            </v-btn>
-
-            <TfChainConnector />
-          </div>
+    <v-app-bar :class="{ 'sidebar-opened': !mini, 'ml-4 ': !mini }" color="#064663" dense dark fixed height="65">
+      <v-app-bar-nav-icon></v-app-bar-nav-icon>
+
+      <v-toolbar-title class="font-weight-bold" @click="redirectToHomePage" style="cursor: pointer"
+        >Threefold Chain</v-toolbar-title
+      >
+
+      <v-spacer>
+        <div class="d-flex align-center justify-start">
+          <TftSwapPrice v-if="!loadingAPI" />
+          <FundsCard v-if="$store.state.credentials.initialized && $store.state.credentials.balance" />
         </div>
-      </v-app-bar>
-    </div>
+      </v-spacer>
+      <div class="d-flex align-center">
+        <div class="d-flex" style="align-items: center">
+          <v-btn icon @click="toggle_dark_mode">
+            <v-icon>mdi-theme-light-dark</v-icon>
+          </v-btn>
+
+          <TfChainConnector />
+        </div>
+      </div>
+    </v-app-bar>
 
     <v-navigation-drawer
       app
@@ -162,9 +160,21 @@
       </div>
     </v-navigation-drawer>
 
-    <div :style="'padding-left:' + (mini ? '56px' : '300px')">
+    <!-- <div :style="'padding-left:' + (mini ? '56px' : '300px')">
       <router-view />
-    </div>
+    </div> -->
+
+    <v-content class="mt-15">
+      <v-container fluid>
+        <v-row class="fill-height">
+          <v-col>
+            <transition name="fade">
+              <router-view></router-view>
+            </transition>
+          </v-col>
+        </v-row>
+      </v-container>
+    </v-content>
 
     <v-footer padless fixed>
       <v-card class="flex" flat tile>
@@ -338,14 +348,24 @@ export default class Dashboard extends Vue {
           icon: "account-arrow-right-outline",
           showBeforeLogIn: false,
         },
-        { label: "farms", path: "account-farms", icon: "silo", showBeforeLogIn: false },
+        {
+          label: "farms",
+          path: "account-farms",
+          icon: "silo",
+          showBeforeLogIn: false,
+        },
         {
           label: "dedicated nodes",
           path: "account-nodes",
           icon: "resistor-nodes",
           showBeforeLogIn: false,
         },
-        { label: "dao", path: "account-dao", icon: "note-check-outline", showBeforeLogIn: false },
+        {
+          label: "dao",
+          path: "account-dao",
+          icon: "note-check-outline",
+          showBeforeLogIn: false,
+        },
       ],
     },
     {
diff --git a/packages/dashboard/src/explorer/components/Layout.vue b/packages/dashboard/src/explorer/components/Layout.vue
index 08908388c7..5e5debaa49 100644
--- a/packages/dashboard/src/explorer/components/Layout.vue
+++ b/packages/dashboard/src/explorer/components/Layout.vue
@@ -1,12 +1,12 @@
 <template>
-  <v-container>
+  <v-container fluid>
     <h1>
       {{ pageName }}
     </h1>
     <v-divider />
     <br />
     <v-row>
-      <v-col :cols="screen_max_1400 ? 12 : 3" :order="screen_max_1400 ? 1 : undefined" v-if="!noFilter">
+      <v-col :cols="screen_max_1400 ? 12 : 2" :order="screen_max_1400 ? 1 : undefined" v-if="!noFilter">
         <h3>Filters</h3>
         <br />
         <v-row>
@@ -21,7 +21,7 @@
           <slot name="active-filters"></slot>
         </section>
       </v-col>
-      <v-col :cols="screen_max_1400 ? 12 : 9" class="table-container">
+      <v-col :cols="screen_max_1400 ? 12 : 10" class="table-container">
         <slot name="table"></slot>
       </v-col>
     </v-row>
diff --git a/packages/dashboard/src/explorer/views/Nodes.vue b/packages/dashboard/src/explorer/views/Nodes.vue
index a2417af15e..61a34b96fa 100644
--- a/packages/dashboard/src/explorer/views/Nodes.vue
+++ b/packages/dashboard/src/explorer/views/Nodes.vue
@@ -1,5 +1,5 @@
 <template>
-  <Layout pageName="Nodes" class="custom-layout">
+  <Layout pageName="Nodes">
     <template v-slot:filters>
       <LayoutFilters :items="filters.map(f => f.label)" v-model="activeFiltersList" />
     </template>