fix: improve positions table column alignment and PnL layout

Use percentage-based widths with flex-none for all desktop columns
so headers and cell content align perfectly. Split PnL into two
lines (percentage + dollar amount) for better readability.

Author: kostovster

src/common/components/TableNumber.vue

@@ -1,6 +1,6 @@
 <template>
   <Tooltip :content="tooltip">
-    <div class="flex flex-col">
+    <div class="flex w-full flex-col">
       <div class="flex justify-end">{{ value }}</div>
       <div class="flex flex-1 justify-end text-12 font-normal">{{ subValue }}</div>
     </div>

src/common/components/TablePnl.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="flex w-full flex-col">
+    <div
+      class="flex items-center justify-end gap-1 text-14 font-normal"
+      :class="positive ? 'text-typography-success' : 'text-typography-error'"
+    >
+      <div
+        class="flex w-[20px] items-center justify-center rounded p-0.5"
+        :class="positive ? '!bg-success-muted' : '!bg-error-muted'"
+      >
+        <SvgIcon
+          name="arrow"
+          size="xs"
+          :class="positive ? 'fill-icon-success' : 'rotate-180 fill-icon-error'"
+        />
+      </div>
+      {{ percent }}
+    </div>
+    <div
+      class="flex justify-end text-12 font-normal"
+      :class="positive ? 'text-typography-success' : 'text-typography-error'"
+    >
+      {{ amount }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { SvgIcon } from "web-components";
+
+defineProps<{
+  percent: string;
+  amount: string;
+  positive: boolean;
+}>();
+</script>

src/modules/leases/components/Leases.vue

@@ -103,7 +103,7 @@ import {
 
 import { RouteNames } from "@/router";
 
-import BigNumber, { type IBigNumber } from "@/common/components/BigNumber.vue";
+import BigNumber from "@/common/components/BigNumber.vue";
 import ListHeader from "@/common/components/ListHeader.vue";
 import EmptyState from "@/common/components/EmptyState.vue";
 import SharePnLDialog from "@/modules/leases/components/single-lease/SharePnLDialog.vue";
@@ -133,6 +133,7 @@ import { useRouter } from "vue-router";
 import type { IAction } from "./single-lease/Action.vue";
 import Action from "./single-lease/Action.vue";
 import TableNumber from "@/common/components/TableNumber.vue";
+import TablePnl from "@/common/components/TablePnl.vue";
 import type { LeaseInfo } from "@/common/api";
 
 const leasesStore = useLeasesStore();
@@ -174,13 +175,13 @@ const columns = computed<TableColumnProps[]>(() =>
         { label: "", class: "!flex-none w-[40px]" }
       ]
     : [
-        { label: i18n.t("message.lease"), variant: "left", class: "max-w-[150px]" },
-        { label: i18n.t("message.asset"), variant: "left" },
-        { label: i18n.t("message.type"), variant: "left", class: "max-w-[45px]" },
-        { label: i18n.t("message.pnl"), class: "max-w-[200px]" },
-        { label: i18n.t("message.lease-size") },
-        { label: i18n.t("message.liquidation-lease-table"), class: "max-w-[200px]" },
-        { label: "", class: "max-w-[220px]" }
+        { label: i18n.t("message.lease"), variant: "left", class: "flex-[1.1_1_0%]" },
+        { label: i18n.t("message.asset"), variant: "left", class: "flex-[1.7_1_0%]" },
+        { label: i18n.t("message.type"), variant: "left", class: "flex-[0.6_1_0%]" },
+        { label: i18n.t("message.pnl"), class: "flex-[1.6_1_0%]" },
+        { label: i18n.t("message.lease-size"), class: "flex-[1.7_1_0%]" },
+        { label: i18n.t("message.liquidation-lease-table"), class: "flex-[1.5_1_0%]" },
+        { label: "", class: "flex-[1.8_1_0%]" }
       ]
 );
 
@@ -294,10 +295,13 @@ const leasesData = computed<TableRowItemProps[]>(() => {
         }
 
         const liquidation = loading
-          ? { component: () => h("div", { class: "skeleton-box mb-2 rounded-[4px] w-[70px] h-[20px]" }) }
+          ? {
+              component: () => h("div", { class: "skeleton-box mb-2 rounded-[4px] w-[70px] h-[20px]" }),
+              class: "flex-[1.5_1_0%]"
+            }
           : {
               value: formatPriceUsd(displayData.liquidationPrice.toString()),
-              class: "max-w-[200px]"
+              class: "flex-[1.5_1_0%]"
             };
 
         const actions: Component[] = getActions(item, displayData);
@@ -311,36 +315,32 @@ const leasesData = computed<TableRowItemProps[]>(() => {
               click: () => {
                 router.push(`/${RouteNames.LEASES}/${item.address}`);
               },
-              class: "text-typography-link font-semibold max-w-[150px] cursor-pointer"
+              class: "text-typography-link font-semibold flex-[1.1_1_0%] cursor-pointer"
             },
             {
               image: getAssetIcon(item),
               imageClass: "w-[32px] h-[32px]",
               value: asset?.shortName ?? "",
               subValue: asset?.name ?? "",
               variant: "left",
-              textClass: "line-clamp-1 [display:-webkit-box]"
+              textClass: "line-clamp-1 [display:-webkit-box]",
+              class: "flex-[1.7_1_0%]"
             },
             {
               value: positionType,
               variant: "left",
-              class: "max-w-[45px]"
+              class: "flex-[0.6_1_0%]"
             },
             {
               component: () =>
                 loading
                   ? h("div", { class: "skeleton-box mb-2 rounded-[4px] w-[70px] h-[20px]" })
-                  : h<IBigNumber>(BigNumber, {
-                      pnlStatus: {
-                        positive: pnlData.status,
-                        value: `${pnlData.status ? "+" : ""}${pnlData.percent}% (${hide.value ? "****" : pnlData.amount})`,
-                        badge: {
-                          content: pnlData.percent,
-                          base: false
-                        }
-                      }
+                  : h(TablePnl, {
+                      percent: `${pnlData.status ? "+" : ""}${pnlData.percent}%`,
+                      amount: hide.value ? "****" : pnlData.amount,
+                      positive: pnlData.status
                     }),
-              class: "max-w-[200px]"
+              class: "flex-[1.6_1_0%] [&>div]:w-full [&>div>div]:w-full"
             },
             {
               component: () =>
@@ -351,12 +351,12 @@ const leasesData = computed<TableRowItemProps[]>(() => {
                       subValue: value.subValue,
                       tooltip: value.tooltip
                     }),
-              class: "font-semibold break-all"
+              class: "flex-[1.7_1_0%] font-semibold break-all [&>div]:w-full [&>div>div]:w-full"
             },
             liquidation,
             {
               component: () => [...actions],
-              class: "max-w-[220px] pr-4 cursor-pointer"
+              class: "flex-[1.8_1_0%] pr-4 cursor-pointer"
             }
           ]
         };