From fb6015ce268744d8a5f206dfba9484539f6f1c52 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Sun, 5 Dec 2021 10:04:01 +0530
Subject: [PATCH] refactor: improve ui consistency

---
 .../components/collections/graphql/Collection.vue              | 2 +-
 .../hoppscotch-app/components/collections/graphql/Folder.vue   | 2 +-
 .../hoppscotch-app/components/collections/graphql/Request.vue  | 2 +-
 packages/hoppscotch-app/components/collections/index.vue       | 3 ++-
 .../hoppscotch-app/components/collections/my/Collection.vue    | 2 +-
 packages/hoppscotch-app/components/collections/my/Folder.vue   | 2 +-
 packages/hoppscotch-app/components/collections/my/Request.vue  | 2 +-
 .../hoppscotch-app/components/collections/teams/Collection.vue | 2 +-
 .../hoppscotch-app/components/collections/teams/Folder.vue     | 2 +-
 .../hoppscotch-app/components/collections/teams/Request.vue    | 2 +-
 .../hoppscotch-app/components/environments/Environment.vue     | 2 +-
 packages/hoppscotch-app/components/history/rest/Card.vue       | 2 +-
 12 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/packages/hoppscotch-app/components/collections/graphql/Collection.vue b/packages/hoppscotch-app/components/collections/graphql/Collection.vue
index fb692ab57..d0fa4c3ab 100644
--- a/packages/hoppscotch-app/components/collections/graphql/Collection.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/Collection.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
     <div
-      class="flex items-center group"
+      class="flex items-stretch group"
       @dragover.prevent
       @drop.prevent="dropEvent"
       @dragover="dragging = true"
diff --git a/packages/hoppscotch-app/components/collections/graphql/Folder.vue b/packages/hoppscotch-app/components/collections/graphql/Folder.vue
index 9584a6284..2089d4df8 100644
--- a/packages/hoppscotch-app/components/collections/graphql/Folder.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/Folder.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
     <div
-      class="flex items-center group"
+      class="flex items-stretch group"
       @dragover.prevent
       @drop.prevent="dropEvent"
       @dragover="dragging = true"
diff --git a/packages/hoppscotch-app/components/collections/graphql/Request.vue b/packages/hoppscotch-app/components/collections/graphql/Request.vue
index e2aa3b55f..9a5d9f5f5 100644
--- a/packages/hoppscotch-app/components/collections/graphql/Request.vue
+++ b/packages/hoppscotch-app/components/collections/graphql/Request.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
     <div
-      class="flex items-center group"
+      class="flex items-stretch group"
       draggable="true"
       @dragstart="dragStart"
       @dragover.stop
diff --git a/packages/hoppscotch-app/components/collections/index.vue b/packages/hoppscotch-app/components/collections/index.vue
index 93d087f5b..fac5a3450 100644
--- a/packages/hoppscotch-app/components/collections/index.vue
+++ b/packages/hoppscotch-app/components/collections/index.vue
@@ -4,7 +4,8 @@
     :class="{ 'rounded border border-divider': saveRequest }"
   >
     <div
-      class="divide-dividerLight divide-y bg-primary border-b border-dividerLight rounded-t flex flex-col top-0 z-10 sticky"
+      class="divide-dividerLight divide-y bg-primary border-b border-dividerLight rounded-t flex flex-col z-10 sticky"
+      style="top: calc(-1 * var(--body-font-size))"
     >
       <div v-if="!saveRequest" class="search-wrappe">
         <input
diff --git a/packages/hoppscotch-app/components/collections/my/Collection.vue b/packages/hoppscotch-app/components/collections/my/Collection.vue
index 434ebee6a..b18e5cfe3 100644
--- a/packages/hoppscotch-app/components/collections/my/Collection.vue
+++ b/packages/hoppscotch-app/components/collections/my/Collection.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
     <div
-      class="flex items-center group"
+      class="flex items-stretch group"
       @dragover.prevent
       @drop.prevent="dropEvent"
       @dragover="dragging = true"
diff --git a/packages/hoppscotch-app/components/collections/my/Folder.vue b/packages/hoppscotch-app/components/collections/my/Folder.vue
index 875588fae..79e290f24 100644
--- a/packages/hoppscotch-app/components/collections/my/Folder.vue
+++ b/packages/hoppscotch-app/components/collections/my/Folder.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
     <div
-      class="flex items-center group"
+      class="flex items-stretch group"
       @dragover.prevent
       @drop.prevent="dropEvent"
       @dragover="dragging = true"
diff --git a/packages/hoppscotch-app/components/collections/my/Request.vue b/packages/hoppscotch-app/components/collections/my/Request.vue
index 2a024d2f5..5e82377d5 100644
--- a/packages/hoppscotch-app/components/collections/my/Request.vue
+++ b/packages/hoppscotch-app/components/collections/my/Request.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
     <div
-      class="flex items-center group"
+      class="flex items-stretch group"
       draggable="true"
       @dragstart="dragStart"
       @dragover.stop
diff --git a/packages/hoppscotch-app/components/collections/teams/Collection.vue b/packages/hoppscotch-app/components/collections/teams/Collection.vue
index 846443964..f5ab526e6 100644
--- a/packages/hoppscotch-app/components/collections/teams/Collection.vue
+++ b/packages/hoppscotch-app/components/collections/teams/Collection.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col">
-    <div class="flex items-center group">
+    <div class="flex items-stretch group">
       <span
         class="cursor-pointer flex px-4 items-center justify-center"
         @click="toggleShowChildren()"
diff --git a/packages/hoppscotch-app/components/collections/teams/Folder.vue b/packages/hoppscotch-app/components/collections/teams/Folder.vue
index 22abc3641..f74266f39 100644
--- a/packages/hoppscotch-app/components/collections/teams/Folder.vue
+++ b/packages/hoppscotch-app/components/collections/teams/Folder.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col">
-    <div class="flex items-center group">
+    <div class="flex items-stretch group">
       <span
         class="cursor-pointer flex px-4 items-center justify-center"
         @click="toggleShowChildren()"
diff --git a/packages/hoppscotch-app/components/collections/teams/Request.vue b/packages/hoppscotch-app/components/collections/teams/Request.vue
index 0e032c715..0139af257 100644
--- a/packages/hoppscotch-app/components/collections/teams/Request.vue
+++ b/packages/hoppscotch-app/components/collections/teams/Request.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex flex-col">
-    <div class="flex items-center group">
+    <div class="flex items-stretch group">
       <span
         class="cursor-pointer flex px-2 w-16 items-center justify-center truncate"
         :class="getRequestLabelColor(request.method)"
diff --git a/packages/hoppscotch-app/components/environments/Environment.vue b/packages/hoppscotch-app/components/environments/Environment.vue
index 9ed88d368..b9b804202 100644
--- a/packages/hoppscotch-app/components/environments/Environment.vue
+++ b/packages/hoppscotch-app/components/environments/Environment.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex items-stretch items-center group">
+  <div class="flex items-stretch group">
     <span
       class="cursor-pointer flex px-4 items-center justify-center"
       @click="$emit('edit-environment')"
diff --git a/packages/hoppscotch-app/components/history/rest/Card.vue b/packages/hoppscotch-app/components/history/rest/Card.vue
index 901b32ba9..3ecd2801c 100644
--- a/packages/hoppscotch-app/components/history/rest/Card.vue
+++ b/packages/hoppscotch-app/components/history/rest/Card.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex items-center group">
+  <div class="flex items-stretch group">
     <span
       class="cursor-pointer flex px-2 w-16 items-center justify-center truncate"
       :class="entryStatus.className"