FIX: height

launcher/public/output.css

@@ -1,7 +1,7 @@
 @import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap");
 
 /*
-! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -2290,6 +2290,10 @@ video {
   max-width: 180px;
 }
 
+.max-w-full{
+  max-width: 100%;
+}
+
 .max-w-lg{
   max-width: 32rem;
 }

launcher/src/components/UI/staking-page/components/modals/ImportValidator.vue

@@ -96,7 +96,7 @@
             <div
               v-for="(line, index) in getMessage"
               :key="index"
-              class="w-full h-8 border border-gray-700 rounded-md bg-[#242628] p-1 flex justify-center items-center space-x-1"
+              class="w-full h-10 max-h-10 border border-gray-700 rounded-md bg-[#242628] p-1 flex justify-center items-center space-x-1"
               :class="getDescriptionClass(line)"
             >
               <span class="text-sm font-semibold text-left whitespace-pre-wrap">{{ line }}</span>

launcher/src/components/UI/staking-page/components/modals/WithdrawMultiple.vue

@@ -26,8 +26,11 @@
               {{ getStatus.success }} {{ $t("stakingPage.vldExited") }}</span
             >
           </div>
-          <div v-if="getStatus?.failure" class="w-full h-full flex justify-center items-center overflow-hidden">
-            <span class="text-md text-red-500 font-semibold text-center">
+          <div
+            v-if="getStatus?.failure"
+            class="w-full h-full flex justify-center items-center overflow-x-hidden overflow-y-auto"
+          >
+            <span class="max-w-full text-md text-red-500 font-semibold text-center overflow-x-hidden overflow-y-auto">
               {{ getStatus.failure }} {{ $t("stakingPage.vldFailed") }}</span
             >
           </div>
@@ -48,19 +51,28 @@
           </div>
           <div
             v-else-if="item.pubkey && item.code !== '200'"
-            class="w-full h-24 flex flex-col justify-center items-start overflow-hidden"
+            class="w-full h-24 flex flex-col justify-center items-start overflow-x-hidden overflow-y-auto"
           >
-            <p v-if="!regectedService" class="text-sm text-amber-400 text-left font-semibold">
+            <p
+              v-if="!regectedService"
+              class="text-sm text-amber-400 text-left font-semibold overflow-x-hidden overflow-y-auto"
+            >
               {{ useTruncate(item?.pubkey, 20, 20) }}:
-              <span class="text-md text-red-500 font-semibold text-left">{{ $t("stakingPage.exitFailed") }}</span>
+              <span class="text-md text-red-500 font-semibold text-left overflow-x-hidden overflow-y-auto">{{
+                $t("stakingPage.exitFailed")
+              }}</span>
             </p>
-            <span class="text-sm text-gray-400 text-left font-semibold">{{ item.msg }}</span>
+            <span class="max-w-full text-sm text-gray-400 text-left font-semibold overflow-x-hidden overflow-y-auto">{{
+              item.msg
+            }}</span>
           </div>
         </div>
       </div>
       <div v-else class="col-start-1 col-span-full row-start-2 row-end-6 w-full h-full grid grid-cols-12 grid-rows-5">
         <div class="col-start-2 col-end-12 row-start-1 row-end-5 flex justify-center items-center px-3">
-          <span class="text-md text-gray-200 text-left font-semibold">{{ getTextMessage }}</span>
+          <span class="text-md text-gray-200 text-left font-semibold overflow-x-hidden overflow-y-auto">{{
+            getTextMessage
+          }}</span>
         </div>
         <div class="col-start-3 col-end-11 row-start-5 row-span-1 flex justify-center items-center">
           <label for="MarketingAccept" class="flex gap-4">
@@ -111,11 +123,7 @@ const getTextMessage = computed(() => {
 const buttonClicked = ref(false);
 
 const activeButton = computed(() => {
-  if (stakingStore.withdrawIsChecked) {
-    return true;
-  } else {
-    return false;
-  }
+  return !!stakingStore.withdrawIsChecked;
 });
 
 const isProcessing = computed(() => {
@@ -135,6 +143,7 @@ const getNumberOfKeys = () => {
   let failureCount = 0;
 
   if (Array.isArray(displayResponse.value)) {
+    console.log("displayResponse before loop", displayResponse.value);
     displayResponse.value.forEach((item) => {
       if (item.flag === "approved" && item.code === "200") {
         regectedService.value = false;