fix problem with table rows

package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-components",
-  "version": "1.2.8",
+  "version": "1.2.9",
   "private": false,
   "sideEffects": [
     "*.vue",

src/assets/styles/_tables.scss

@@ -1,7 +1,11 @@
 @import 'variables';
 
+.row-btn-show {
+  @apply static flex transform-none;
+}
+
 @media (min-width: 768px) {
-  .nls-btn-show {
+  .row-btn-show {
     display: none;
     transition: 0.2s;
     position: absolute;
@@ -11,7 +15,7 @@
     transform: translateY(-50%);
   }
 
-  .earn-row-actions:hover .nls-btn-show {
+  .table-row-actions:hover .row-btn-show {
     transition: 0.2s;
 
     display: flex;
@@ -29,7 +33,7 @@
     transition: 0.2s opacity;
   }
 
-  .earn-row-actions:hover > div:last-of-type {
+  .table-row-actions:hover > div:last-of-type {
     opacity: 0;
   }
 }

src/components/atoms/tooltip/Tooltip.vue

@@ -58,11 +58,17 @@ function mouseover(event: MouseEvent) {
     const rect = parent.getBoundingClientRect();
     const elementRect = element.getBoundingClientRect();
 
-    const left = rect.left + window.scrollX - elementRect.width / 2 + rect.width / 2;
+    let left = rect.left + window.scrollX - elementRect.width / 2 + rect.width / 2;
     const top = rect.top + window.scrollY - elementRect.height - 10;
 
     const maxWidth = window.innerWidth;
 
+    // Adjust the tooltip's position based on the viewport's width
+    if (window.innerWidth < 768) {
+      // Adjust this value as needed
+      left = rect.left + window.scrollX - elementRect.width / 2;
+    }
+
     element.style.left = `${left}px`;
     element.style.top = `${top}px`;
 

src/components/molecules/table-rows/AssetsTableRow.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    :class="[{ 'earn-row-actions relative': rowButton }]"
+    :class="[{ 'table-row-actions relative': rowButton }]"
     class="flex border-b-[1px] border-border-color py-3"
   >
     <div
@@ -62,7 +62,7 @@
     </div>
     <Button
       v-if="rowButton"
-      class="nls-btn-show mt-6 w-full text-[14px] md:mt-0 md:w-auto"
+      class="row-btn-show mt-6 w-full text-[14px] md:mt-0 md:w-auto"
       severity="secondary"
       size="medium"
       v-bind="rowButton"

src/components/molecules/table-rows/EarningAssetsTableRow.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    :class="[{ 'earn-row-actions relative': rowButton }]"
+    :class="[{ 'table-row-actions relative': rowButton }]"
     class="flex flex-wrap border-b-[1px] border-border-color py-3"
   >
     <div
@@ -67,7 +67,7 @@
     </div>
     <Button
       v-if="rowButton"
-      class="nls-btn-show mt-6 w-full text-[14px] md:mt-0 md:w-auto"
+      class="row-btn-show mt-6 w-full text-[14px] md:mt-0 md:w-auto"
       severity="secondary"
       size="medium"
       v-bind="rowButton"