FIX: Visiblity of Staking panels (#1613)

* FIX: some panel fixes * ADD: height to panels parent
stereum-dev · Dec 28, 2023 · 2f35e9e · 2f35e9e
1 parent 579a697
commit 2f35e9e
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 11 deletions.
diff --git a/launcher/src/components/UI/staking-page/components/list/ListBody.vue b/launcher/src/components/UI/staking-page/components/list/ListBody.vue
@@ -1,12 +1,12 @@
 import { ref, computed, watchEffect, watch, onMounted, onUnmounted } from 'vue';
 <template>
   <div
-    class="col-start-1 col-span-full row-end-12 overflow-x-hidden overflow-y-auto px-1 py-2 flex justify-start items-center space-y-2 border border-gray-600 bg-[#151618] rounded-b-sm mb-[1px]"
+    class="col-start-1 col-span-full overflow-x-hidden overflow-y-auto px-1 py-2 flex justify-start items-center space-y-2 border border-gray-600 bg-[#151618] rounded-b-sm mb-[1px]"
     :class="[
       stakingStore.isOverDropZone ? 'border-dashed border border-blue-500 ' : '',
       stakingStore.isPreviewListActive || stakingStore.isRemoteListActive || stakingStore.isGroupListActive
-        ? 'row-start-2 '
-        : 'row-start-1 rounded-t-md',
+        ? 'row-start-2 row-end-12'
+        : 'row-start-1 row-end-12 rounded-t-md',
     ]"
   >
     <GroupList v-if="stakingStore.isGroupListActive" :is-loading="isLoading" />
@@ -59,11 +59,15 @@ import { ref, computed, watchEffect, watch, onMounted, onUnmounted } from 'vue';
           @rename-single="renameSingle"
         />
         <span
-          v-if="!getFilteredValidators.length > 0 && !isLoading && !stakingStore.isPreviewListActive"
+          v-if="!getFilteredValidators.length > 0 && !isLoading && !stakingStore.isPreviewListActive && !searchNotFound"
           class="text-lg font-bold text-gray-300 text-center uppercase select-none"
           >No Validator key imported.</span
         >
-        <span v-if="searchNotFound" class="text-lg font-bold text-gray-300 text-center uppercase">No Matches.</span>
+        <span
+          v-if="searchNotFound && getFilteredValidators.length > 0"
+          class="text-lg font-bold text-gray-300 text-center uppercase"
+          >No Matches.</span
+        >
       </div>
     </div>
   </div>

diff --git a/launcher/src/components/UI/staking-page/components/list/ListPanels.vue b/launcher/src/components/UI/staking-page/components/list/ListPanels.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="w-full h-full col-start-1 col-span-full row-start-12 row-end-13 grid grid-cols-12 grid-rows-1 items-center border border-gray-600 rounded-b-md bg-[#151618] px-1 pr-0"
+    class="w-full h-full min-h-[40px] col-start-1 col-span-full row-start-12 row-span-1 grid grid-cols-12 items-center border border-gray-600 rounded-b-md bg-[#151618] px-1 pr-0"
   >
     <div class="w-full h-full col-start-1 col-end-4 grid grid-cols-3 py-1">
       <div
@@ -48,9 +48,7 @@
       </div>
     </div>
 
-    <div
-      class="w-full h-full col-start-4 col-end-13 row-start-1 grid grid-cols-12 items-center self-center px-1 relative"
-    >
+    <div class="w-full h-full col-start-4 col-end-13 grid grid-cols-12 items-center self-center px-1 relative">
       <component
         :is="activePanel?.component"
         v-bind="activePanel?.props"

diff --git a/launcher/src/components/UI/staking-page/sections/ListSection.vue b/launcher/src/components/UI/staking-page/sections/ListSection.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="h-full col-start-2 col-end-20 row-start-1 row-span-full grid grid-cols-24 grid-rows-12">
+  <div class="w-full h-full col-start-2 col-end-20 row-start-1 row-span-full grid grid-cols-24 grid-rows-12">
     <div
-      class="h-full col-start-1 col-span-full row-start-1 row-span-full grid grid-cols-24 grid-rows-12 relative overflow-hidden"
+      class="w-full h-full col-start-1 col-span-full row-start-1 row-span-full grid grid-cols-24 grid-rows-12 relative overflow-hidden"
     >
       <ListHeader
         v-if="stakingStore.isPreviewListActive || stakingStore.isGroupListActive || stakingStore.isRemoteListActive"