feat: table overflow

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>

src/modules/[chain]/gov/[proposal_id].vue

@@ -293,6 +293,7 @@ const processList = computed(()=>{
     
     <div class="bg-base-100 px-4 pt-3 pb-4 rounded mb-4 shadow">
         <h2 class="card-title">Votes</h2>
+        <div class="overflow-x-auto">
             <table class="table  w-full ">
                 <tbody>
                     <tr v-for="(item,index) of votes" :key="index">
@@ -301,7 +302,9 @@ const processList = computed(()=>{
                     </tr>
                 </tbody>
             </table>
+
             <VBtn v-if="votePage.next_key" block variant="outlined" @click="loadMore()" :disabled="loading">Load more</VBtn>
         </div>
+    </div>
 </div>
 </template>

src/modules/[chain]/ibc/[connection_id].vue

@@ -79,9 +79,10 @@ 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>
+            <div class="overflow-x-auto"></div>
                 <table class="table w-full mt-4">
                     <thead>
-                    <tr><th>Channel Id</th>
+                        <tr><th style="position: relative;">Channel Id</th>
                             <th>Port Id</th>
                             <th>Counterparty</th>
                             <th>Hops</th>
@@ -103,4 +104,5 @@ function color(v: string) {
                 </table>
             </div>
          </div>
+    </div>
 </template>

src/modules/[chain]/ibc/index.vue

@@ -23,11 +23,12 @@ function color(v: string) {
 </script>
 <template>
     <div>
-        <VCard>
-            <VCardTitle>IBC Connections</VCardTitle>
-            <VTable>
+        <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>Connection Id</th><th>Connection</th><th>Delay Period</th><th>State</th></tr>
+                        <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">
@@ -37,8 +38,9 @@ function color(v: string) {
                             <td><VChip :color="color(v.state)">{{ v.state }}</VChip></td>
                         </tr>
                     </tbody>
-            </VTable>
-        </VCard> 
+                </table>
+            </div> 
+        </div> 
     </div>
 </template>