From 346ac8bde91e29cf7be8968ef157525cfae59377 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Tue, 24 May 2022 18:48:45 +0530
Subject: [PATCH] chore: improve ui consistency on table layout

---
 .../components/profile/Shortcode.vue           | 18 ++++++++++--------
 packages/hoppscotch-app/pages/profile.vue      | 16 ++++++++++------
 2 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/packages/hoppscotch-app/components/profile/Shortcode.vue b/packages/hoppscotch-app/components/profile/Shortcode.vue
index 7a48937f5..045789d43 100644
--- a/packages/hoppscotch-app/components/profile/Shortcode.vue
+++ b/packages/hoppscotch-app/components/profile/Shortcode.vue
@@ -2,24 +2,27 @@
   <div
     class="table-row-groups lg:flex block my-6 lg:my-0 w-full border lg:border-0 divide-y lg:divide-y-0 lg:divide-x divide-dividerLight border-dividerLight"
   >
-    <div class="table-column lg:w-1/5" :data-label="t('shortcodes.short_code')">
+    <div
+      class="table-column font-mono text-tiny"
+      :data-label="t('shortcodes.short_code')"
+    >
       {{ shortcode.id }}
     </div>
     <div
-      class="table-column lg:w-1/5"
+      class="table-column"
       :class="requestLabelColor"
       :data-label="t('shortcodes.method')"
     >
       {{ parseShortcodeRequest.method }}
     </div>
-    <div class="table-column lg:w-3/5" :data-label="t('shortcodes.url')">
+    <div class="table-column" :data-label="t('shortcodes.url')">
       <div class="max-w-50 lg:max-w-90 truncate">
         {{ parseShortcodeRequest.endpoint }}
       </div>
     </div>
     <div
       ref="timeStampRef"
-      class="table-column lg:w-1/5"
+      class="table-column"
       :data-label="t('shortcodes.created_on')"
     >
       <span v-tippy="{ theme: 'tooltip' }" :title="timeStamp">
@@ -27,7 +30,7 @@
       </span>
     </div>
     <div
-      class="flex items-center justify-center lg:w-1/5 px-3"
+      class="flex flex-1 items-center justify-center px-3"
       :data-label="t('shortcodes.actions')"
     >
       <SmartAnchor
@@ -36,8 +39,7 @@
         :to="`https://hopp.sh/r/${shortcode.id}`"
         blank
         svg="external-link"
-        color="blue"
-        class="px-3"
+        class="px-3 text-accent hover:text-accent"
       />
       <ButtonSecondary
         v-tippy="{ theme: 'tooltip' }"
@@ -124,7 +126,7 @@ const copyShortcode = (codeID: string) => {
 
 <style lang="scss">
 .table-column {
-  @apply flex items-center justify-between px-3 py-3;
+  @apply flex flex-1 items-center justify-between px-3 py-3;
 }
 
 .table-row-groups {
diff --git a/packages/hoppscotch-app/pages/profile.vue b/packages/hoppscotch-app/pages/profile.vue
index c0a782c72..e89ce9fdc 100644
--- a/packages/hoppscotch-app/pages/profile.vue
+++ b/packages/hoppscotch-app/pages/profile.vue
@@ -220,20 +220,24 @@
                       <div
                         class="bg-primaryLight hidden lg:flex rounded-t w-full"
                       >
-                        <div class="flex w-full">
-                          <div class="w-1/5 p-3 font-semibold">
+                        <div
+                          class="flex w-full overflow-y-scroll lg:divide-x divide-primaryLight"
+                        >
+                          <div class="flex flex-1 p-3 font-semibold">
                             {{ t("shortcodes.short_code") }}
                           </div>
-                          <div class="w-1/5 p-3 font-semibold">
+                          <div class="flex flex-1 p-3 font-semibold">
                             {{ t("shortcodes.method") }}
                           </div>
-                          <div class="w-3/5 p-3 font-semibold">
+                          <div class="flex flex-1 p-3 font-semibold">
                             {{ t("shortcodes.url") }}
                           </div>
-                          <div class="w-1/5 p-3 font-semibold">
+                          <div class="flex flex-1 p-3 font-semibold">
                             {{ t("shortcodes.created_on") }}
                           </div>
-                          <div class="w-1/5 p-3 font-semibold text-center">
+                          <div
+                            class="flex flex-1 p-3 font-semibold justify-center"
+                          >
                             {{ t("shortcodes.actions") }}
                           </div>
                         </div>