From b17d6fd6bf6540490e0fb673a832f0e117d6ad91 Mon Sep 17 00:00:00 2001
From: "Alisa | Side.one" <alisa@side.one>
Date: Sat, 6 May 2023 17:35:54 +0800
Subject: [PATCH] feat: table overflow

---
 src/modules/[chain]/block/index.vue         |  4 +-
 src/modules/[chain]/gov/[proposal_id].vue   | 21 ++++++----
 src/modules/[chain]/ibc/[connection_id].vue | 46 +++++++++++----------
 src/modules/[chain]/ibc/index.vue           | 34 ++++++++-------
 4 files changed, 56 insertions(+), 49 deletions(-)

diff --git a/src/modules/[chain]/block/index.vue b/src/modules/[chain]/block/index.vue
index c3dd8eab..b735cf2e 100644
--- a/src/modules/[chain]/block/index.vue
+++ b/src/modules/[chain]/block/index.vue
@@ -31,7 +31,7 @@ const format = useFormatter();
       <table class="table w-full">
         <thead>
           <tr>
-            <th>Height</th>
+            <th style="position: relative;">Height</th>
             <th>Hash</th>
             <th>Proposer</th>
             <th>Txs</th>
@@ -61,7 +61,7 @@ const format = useFormatter();
       <table class="table w-full">
         <thead>
           <tr>
-            <th>Hash</th>
+            <th style="position: relative;">Hash</th>
             <th>Messages</th>
             <th>Fees</th>
           </tr>
diff --git a/src/modules/[chain]/gov/[proposal_id].vue b/src/modules/[chain]/gov/[proposal_id].vue
index 7428ca55..da064ce0 100644
--- a/src/modules/[chain]/gov/[proposal_id].vue
+++ b/src/modules/[chain]/gov/[proposal_id].vue
@@ -293,15 +293,18 @@ const processList = computed(()=>{
     
     <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
         <h2 class="card-title">Votes</h2>
-        <table class="table  w-full ">
-            <tbody>
-                <tr v-for="(item,index) of votes" :key="index">
-                    <td>{{ item.voter }}</td>
-                    <td>{{ item.option }}</td>
-                </tr>
-            </tbody>
-        </table>
-        <VBtn v-if="votePage.next_key" block variant="outlined" @click="loadMore()" :disabled="loading">Load more</VBtn>
+        <div class="overflow-x-auto">
+            <table class="table  w-full ">
+                <tbody>
+                    <tr v-for="(item,index) of votes" :key="index">
+                        <td>{{ item.voter }}</td>
+                        <td>{{ item.option }}</td>
+                    </tr>
+                </tbody>
+            </table>
+
+            <VBtn v-if="votePage.next_key" block variant="outlined" @click="loadMore()" :disabled="loading">Load more</VBtn>
+        </div>
     </div>
 </div>
 </template>
diff --git a/src/modules/[chain]/ibc/[connection_id].vue b/src/modules/[chain]/ibc/[connection_id].vue
index 9a3974ee..c6a18550 100644
--- a/src/modules/[chain]/ibc/[connection_id].vue
+++ b/src/modules/[chain]/ibc/[connection_id].vue
@@ -79,28 +79,30 @@ function color(v: string) {
 
         <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
             <h2 class="card-title">Channels </h2>
-            <table class="table w-full mt-4">
-                <thead>
-                    <tr><th>Channel Id</th>
-                        <th>Port Id</th>
-                        <th>Counterparty</th>
-                        <th>Hops</th>
-                        <th>Version</th>
-                        <th>Ordering</th>
-                        <th>State</th></tr>
-                </thead>
-                <tbody>
-                    <tr v-for="v in channels">
-                        <td><a href="#" @click="loadChannel(v.channel_id, v.port_id)">{{ v.channel_id }}</a></td>
-                        <td>{{ v.port_id }}</td>
-                        <td>{{ v.counterparty?.port_id }}/{{ v.counterparty?.channel_id }}</td>
-                        <td>{{ v.connection_hops.join(", ") }} </td>
-                        <td>{{ v.version }} </td>
-                        <td>{{ v.ordering }}</td>
-                        <td><VChip :color="color(v.state)">{{ v.state }}</VChip></td>
-                    </tr>
-                </tbody>
-            </table>
+            <div class="overflow-x-auto"></div>
+                <table class="table w-full mt-4">
+                    <thead>
+                        <tr><th style="position: relative;">Channel Id</th>
+                            <th>Port Id</th>
+                            <th>Counterparty</th>
+                            <th>Hops</th>
+                            <th>Version</th>
+                            <th>Ordering</th>
+                            <th>State</th></tr>
+                    </thead>
+                    <tbody>
+                        <tr v-for="v in channels">
+                            <td><a href="#" @click="loadChannel(v.channel_id, v.port_id)">{{ v.channel_id }}</a></td>
+                            <td>{{ v.port_id }}</td>
+                            <td>{{ v.counterparty?.port_id }}/{{ v.counterparty?.channel_id }}</td>
+                            <td>{{ v.connection_hops.join(", ") }} </td>
+                            <td>{{ v.version }} </td>
+                            <td>{{ v.ordering }}</td>
+                            <td><VChip :color="color(v.state)">{{ v.state }}</VChip></td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
          </div>
     </div>
 </template>
diff --git a/src/modules/[chain]/ibc/index.vue b/src/modules/[chain]/ibc/index.vue
index 4d426488..b66a22fe 100644
--- a/src/modules/[chain]/ibc/index.vue
+++ b/src/modules/[chain]/ibc/index.vue
@@ -23,22 +23,24 @@ function color(v: string) {
 </script>
 <template>
     <div>
-        <VCard>
-            <VCardTitle>IBC Connections</VCardTitle>
-            <VTable>
-                <thead>
-                    <tr><th>Connection Id</th><th>Connection</th><th>Delay Period</th><th>State</th></tr>
-                </thead>
-                <tbody>
-                    <tr v-for="v in list">
-                        <td><RouterLink :to="`/${chain}/ibc/${v.id}`">{{ v.id }}</RouterLink></td>
-                        <td>{{ v.client_id }} {{ v.id }} <br> {{v.counterparty.client_id }} {{ v.counterparty.connection_id }} </td>
-                        <td>{{ v.delay_period }}</td>
-                        <td><VChip :color="color(v.state)">{{ v.state }}</VChip></td>
-                    </tr>
-                </tbody>
-            </VTable>
-        </VCard> 
+        <div class="bg-base-100 px-4 pt-3 pb-4 rounded shadow">
+            <h2 class="card-title">IBC Connections</h2>
+            <div class="overflow-x-auto mt-4">
+                <table class="table w-full">
+                    <thead>
+                        <tr><th style="position: relative;">Connection Id</th><th>Connection</th><th>Delay Period</th><th>State</th></tr>
+                    </thead>
+                    <tbody>
+                        <tr v-for="v in list">
+                            <td><RouterLink :to="`/${chain}/ibc/${v.id}`">{{ v.id }}</RouterLink></td>
+                            <td>{{ v.client_id }} {{ v.id }} <br> {{v.counterparty.client_id }} {{ v.counterparty.connection_id }} </td>
+                            <td>{{ v.delay_period }}</td>
+                            <td><VChip :color="color(v.state)">{{ v.state }}</VChip></td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div> 
+        </div> 
     </div>
 </template>