improve UI for mobile

src/layouts/components/ChainProfile.vue

@@ -15,9 +15,20 @@ chainStore.initial();
         ></div>
       </div>
       <div
-        class="dropdown-content menu shadow bg-base-100 rounded-box max-h-[300px] overflow-auto"
+        class="dropdown-content w-80 menu shadow bg-base-200 rounded-box max-h-[300px] overflow-auto"
       >
-        <div>
+        <!-- rest -->
+        <div class="px-4 py-2 text-sm text-gray-400">
+            Information
+        </div>
+        <div class="w-full hover:bg-gray-100 dark:bg-[#384059]">
+          <div class="py-2 px-4">
+            Chain Id: {{ baseStore.latest.block?.header.chain_id }}
+          </div>
+          <div class="py-2 px-4">
+            Height: {{ baseStore.latest.block?.header.height }}
+          </div>
+        </div>
         <!-- rest -->
         <div
           class="px-4 py-2 text-sm text-gray-400"
@@ -25,11 +36,10 @@ chainStore.initial();
         >
           Rest Endpoint
         </div>
-          <div tabindex="0">
         <div
           v-for="(item, index) in chainStore.current?.endpoints?.rest"
           @click="chainStore.setRestEndpoint(item)"
-              class="px-4 py-2 hover:bg-gray-100 dark:bg-[#384059] cursor-pointer"
+          class="px-4 py-2 w-full hover:bg-gray-100 dark:bg-[#384059] cursor-pointer"
           :key="index"
         >
           <div class="flex flex-col items-start">
@@ -48,7 +58,6 @@ chainStore.initial();
             </div>
           </div>
         </div>
-          </div>
 
           <!-- grpc -->
           <div
@@ -76,11 +85,10 @@ chainStore.initial();
           </ul>
       </div>
     </div>
-    </div>
     <div class="flex-1 w-0">
       <Transition name="fade" mode="out-in" appear>
       <div :key="baseStore.latest?.block?.header?.height || chainStore.chainName || ''"
-        class="capitalize whitespace-nowrap text-base font-semibold text-gray-600 dark:text-gray-200"
+        class="capitalize whitespace-nowrap text-base font-semibold text-gray-600 dark:text-gray-200 hidden md:!block"
       >
         #{{
            baseStore.latest?.block?.header?.height || chainStore.chainName || ''
@@ -88,7 +96,7 @@ chainStore.initial();
       </div>
       </Transition>
       <div
-        class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap hidden lg:!block"
+        class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap hidden md:!block"
       >
         {{ chainStore.connErr || chainStore.endpoint.address }}
       </div>

src/layouts/components/DefaultLayout.vue

@@ -6,7 +6,7 @@ import { useThemeConfig } from '@/plugins/vuetify/@core/composable/useThemeConfi
 // Components
 import newFooter from '@/layouts/components/NavFooter.vue';
 import NavbarThemeSwitcher from '@/layouts/components/NavbarThemeSwitcher.vue';
-import UserProfile from '@/layouts/components/ChainProfile.vue';
+import ChainProfile from '@/layouts/components/ChainProfile.vue';
 
 import { useDashboard } from '@/stores/useDashboard';
 
@@ -229,7 +229,7 @@ const showDiscord = window.location.host.search("ping.pub") > -1
           <Icon icon="mdi-menu" />
         </div>
 
-        <UserProfile />
+        <ChainProfile />
 
         <div class="flex-1 w-0"></div>
 

src/modules/[chain]/index.vue

@@ -103,8 +103,8 @@ const color = computed(() => {
       v-if="coinInfo && coinInfo.name"
       class="bg-base-100 rounded shadow mb-4"
     >
-      <div class="flex p-4">
-        <div class="">
+      <div class="grid grid-cols-2 md:grid-cols-3 p-4">
+        <div class="col-span-2 md:col-span-1">
           <div class="text-xl font-semibold text-main">
             {{ coinInfo.name }} (<span class="uppercase">{{
               coinInfo.symbol
@@ -119,7 +119,7 @@ const color = computed(() => {
             </div>
           </div>
 
-          <div class="mt-4 flex items-center">
+          <div class="my-4 flex flex-wrap items-center">
             <a
               v-for="(item, index) of comLinks"
               :key="index"
@@ -133,7 +133,7 @@ const color = computed(() => {
 
           <div>
             <div
-              class="dropdown dropdown-hover w-full md:!w-[400px] mt-[16px] md:!mt-[36px]"
+              class="dropdown dropdown-hover w-full"
             >
               <label>
                 <div
@@ -166,7 +166,7 @@ const color = computed(() => {
               </label>
               <div class="dropdown-content pt-1">
                 <div
-                  class="h-64 overflow-auto w-full md:!w-[400px] shadow rounded"
+                  class="h-64 overflow-auto w-full shadow rounded"
                 >
                   <ul class="menu w-full bg-gray-100 rounded dark:bg-[#384059]">
                     <li
@@ -200,7 +200,7 @@ const color = computed(() => {
 
             <a
               :color="store.trustColor"
-              class="mt-5 !text-white btn !bg-yes !border-yes w-full md:!w-[400px] flex items-center"
+              class="my-5 !text-white btn !bg-yes !border-yes w-full"
               :href="ticker.trade_url"
               target="_blank"
             >
@@ -209,7 +209,7 @@ const color = computed(() => {
           </div>
         </div>
 
-        <div class="flex-1 hidden md:!block">
+        <div class="col-span-2">
           <PriceMarketChart />
         </div>
       </div>
@@ -243,7 +243,7 @@ const color = computed(() => {
       <div class="px-4 pb-4">
         <ProposalListItem :proposals="store?.proposals" />
       </div>
-      <div class="pl-4 pb-8 py-4" v-if="store.proposals?.length === 0">
+      <div class="pb-8 text-center" v-if="store.proposals?.proposals?.length === 0">
         No active proposals
       </div>
     </div>

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

@@ -152,7 +152,7 @@ function changeTab(v: string) {
         </div>
       </div>
 
-      <div :class="tab === '3'?'':'hidden'">
+      <div :class="tab === '3'?'':'hidden'" class=" overflow-hidden">
         <table class="table table-compact w-full mt-5">
           <thead class=" capitalize">
             <tr>