fixed LF-Decentralized-Trust-labs#184 ui bug

Signed-off-by: RAWx18 <rawx18.dev@gmail.com>

Author: RAWx18

frontend/src/modules/activity/pages/activity-list-page.vue

@@ -3,7 +3,7 @@
     <div class="activity-list-page">
       <div class="flex justify-between">
         <div>
-          <h4 class="text-white font-mono text-2xl font-bold">
+          <h4 class="text-white font-mono text-2xl font-bold mt-8">
             Activities
           </h4>
           <div class="text-xs text-zinc-400 font-mono mb-10 mt-2">
@@ -13,14 +13,14 @@
         </div>
         <div class="flex">
           <el-button
-            class="btn btn--transparent btn--md text-white border-zinc-700 bg-zinc-900 hover:border-zinc-600 mr-4"
+            class="btn btn--transparent btn--md text-white border-zinc-700 bg-zinc-900 hover:border-zinc-600 mr-4 mt-8"
             @click="isActivityTypeDrawerOpen = true"
           >
             <i class="ri-settings-3-line text-lg mr-2 text-orange-500" />
             <span class="font-mono">Activity types</span>
           </el-button>
           <el-button
-            class="btn btn--primary btn--md bg-orange-500 hover:bg-orange-600 border-orange-500"
+            class="btn btn--primary btn--md bg-orange-500 hover:bg-orange-600 border-orange-500 mt-8"
             @click="isActivityDrawerOpen = true"
           >
             <span class="font-mono text-black font-bold">Add activity</span>
@@ -29,7 +29,7 @@
       </div>
 
       <div class="relative">
-        <el-tabs :model-value="activeView" class="mb-6" @update:model-value="changeView">
+        <el-tabs :model-value="activeView" class="mb-6" @update:model-value="changeView" id="internal-multitab-bar">
           <el-tab-pane
             label="Activities"
             name="activity"
@@ -39,6 +39,7 @@
             name="conversation"
           />
         </el-tabs>
+        <div style="margin-bottom: 20px;"></div>
       </div>
       <app-activity-list
         v-if="activeView === 'activity'"
@@ -108,4 +109,14 @@ const edit = (activity) => {
 };
 </script>
 
-<style></style>
+<style scoped>
+#internal-multitab-bar {
+  min-height: 56px;
+  margin-bottom: 24px;
+}
+@media (min-width: 768px) {
+  #internal-multitab-bar {
+    min-height: 68px;
+  }
+}
+</style>

frontend/src/modules/auth/pages/profile-form-page.vue

@@ -1,7 +1,7 @@
 <template>
   <app-page-wrapper size="narrow">
     <div class="profile-form-page">
-      <h4 class="mb-6">
+      <h4 class="mb-4 mt-8">
         Account settings
       </h4>
       <el-container

frontend/src/modules/automation/pages/automation-page.vue

@@ -1,7 +1,7 @@
 <template>
   <app-page-wrapper>
     <div class="settings">
-      <h4 class="text-white font-mono text-2xl font-bold mb-6">
+      <h4 class="text-white font-mono text-2xl font-bold mb-2 mt-8">
         Automations
       </h4>
       <app-automation-list />

frontend/src/modules/dashboard/components/dashboard-activities.vue

@@ -59,7 +59,7 @@
     </div>
 
     <div class="dashboard-tabs">
-      <el-tabs v-model="tab">
+      <el-tabs v-model="tab" id="internal-multitab-bar">
         <el-tab-pane
           label="Trending conversations"
           name="trending"
@@ -151,4 +151,13 @@ export default {
     @apply -mx-6 #{!important};
   }
 }
+ #internal-multitab-bar {
+   min-height: 56px;
+   margin-bottom: 24px;
+ }
+ @media (min-width: 768px) {
+   #internal-multitab-bar {
+     min-height: 68px;
+   }
+ }
 </style>

frontend/src/modules/dashboard/pages/dashboard-page.vue

@@ -15,12 +15,12 @@
             class="py-8 -mx-4 px-4 sticky -top-6 bg-black z-20 flex items-center justify-between border-b border-zinc-700"
           >
             <h4
-              class="leading-8 font-semibold transition-all duration-100 text-white font-mono"
+              class="leading-8 font-semibold transition-all duration-100 text-white font-mono mt-8"
               :class="scrolled ? 'text-base' : 'text-xl'"
             >
               {{ currentTenant?.name }} team overview
             </h4>
-            <div class="text-sm flex items-center gap-2">
+            <div class="text-sm flex items-center gap-2 mt-8">
               <i class="text-orange-500 ri-time-line text-base" />
               <span class="text-zinc-400 font-mono text-xs">Data on this page is refreshed every 15 min.</span>
             </div>
@@ -54,7 +54,7 @@
       }"
     >
       <app-dashboard-guides v-if="!isQuickstartEnabled()" />
-      <app-dashboard-integrations class="mb-10" />
+      <app-dashboard-integrations class="mb-10 mt-8" />
       <app-dashboard-task />
     </aside>
   </div>

frontend/src/modules/integration/components/integration-list-page.vue

@@ -1,6 +1,6 @@
 <template>
   <app-page-wrapper>
-    <h4 class="text-white font-mono text-2xl font-bold mb-4">Integrations</h4>
+    <h4 class="text-white font-mono text-2xl font-bold mb-2 mt-8">Integrations</h4>
     <div class="flex items-center justify-between">
       <div class="text-xs text-zinc-400 font-mono">
         Connect with all data sources that are relevant to

frontend/src/modules/member/pages/member-list-page.vue

@@ -3,7 +3,7 @@
     <div class="member-list-page !bg-black min-h-screen">
       <div class="mb-10">
         <div class="flex items-center justify-between">
-          <h4 class="text-white font-mono text-2xl font-bold">
+          <h4 class="text-white font-mono text-2xl font-bold mt-8">
             Contacts
           </h4>
           <div class="flex items-center">
@@ -14,7 +14,7 @@
                 name: 'memberMergeSuggestions',
               }"
             >
-              <button :disabled="isEditLockedForSampleData" type="button" class="btn btn--bordered btn--md flex items-center border-zinc-700 bg-zinc-900 hover:border-zinc-600">
+              <button :disabled="isEditLockedForSampleData" type="button" class="btn btn--bordered btn--md flex items-center border-zinc-700 bg-zinc-900 hover:border-zinc-600 mt-8">
                 <span class="ri-shuffle-line text-base mr-2 text-white" />
                 <span class="text-white font-mono">Merge suggestions</span>
                 <span
@@ -38,7 +38,7 @@
               }"
             >
               <el-button
-                class="btn btn--primary btn--md"
+                class="btn btn--primary btn--md mt-8"
                 :disabled="isCreateLockedForSampleData"
               >
                 Add contact

frontend/src/modules/member/pages/member-view-page.vue

@@ -26,7 +26,7 @@
           class="col-span-2"
         />
         <div class="panel w-full col-span-2">
-          <el-tabs v-model="tab">
+          <el-tabs v-model="tab" id="internal-multitab-bar">
             <el-tab-pane
               label="Activities"
               name="activities"
@@ -52,6 +52,7 @@
               <app-member-view-notes :member="member" />
             </el-tab-pane>
           </el-tabs>
+          <div style="margin-bottom: 20px;"></div>
         </div>
       </div>
     </div>

frontend/src/modules/organization/pages/organization-list-page.vue

@@ -4,7 +4,7 @@
       <div class="mb-10">
         <div class="flex items-center justify-between">
           <div class="flex items-center">
-            <h4 class="text-white font-mono text-2xl font-bold">Organizations</h4>
+            <h4 class="text-white font-mono text-2xl font-bold mt-8">Organizations</h4>
           </div>
           <div class="flex items-center">
             <router-link
@@ -14,7 +14,7 @@
                 name: 'organizationMergeSuggestions',
               }"
             >
-              <button :disabled="isEditLockedForSampleData" type="button" class="btn btn--bordered btn--md flex items-center border-zinc-700 bg-zinc-900 hover:border-zinc-600">
+              <button :disabled="isEditLockedForSampleData" type="button" class="btn btn--bordered btn--md flex items-center border-zinc-700 bg-zinc-900 hover:border-zinc-600 mt-8">
                 <span class="ri-shuffle-line text-base mr-2 text-white" />
                 <span class="text-white font-mono">Merge suggestions</span>
                 <span
@@ -34,7 +34,7 @@
               }"
             >
               <el-button
-                class="btn btn--primary btn--md"
+                class="btn btn--primary btn--md mt-8"
                 :disabled="isCreateLockedForSampleData"
               >
                 Add organization

frontend/src/modules/organization/pages/organization-view-page.vue

@@ -23,7 +23,7 @@
           />
         </div>
         <div class="panel w-full col-span-2">
-          <el-tabs v-model="tab">
+          <el-tabs v-model="tab" id="internal-multitab-bar">
             <el-tab-pane
               label="Current contacts"
               name="contacts"
@@ -55,6 +55,7 @@
               />
             </el-tab-pane>
           </el-tabs>
+          <div style="margin-bottom: 20px;"></div>
         </div>
       </div>
     </div>
@@ -96,8 +97,14 @@ onMounted(() => {
 });
 </script>
 
-<script>
-export default {
-  name: 'organizationView',
-};
-</script>
+<style scoped>
+#internal-multitab-bar {
+  min-height: 56px;
+  margin-bottom: 24px;
+}
+@media (min-width: 768px) {
+  #internal-multitab-bar {
+    min-height: 68px;
+  }
+}
+</style>