fix: update layout and styling for network assets header and item components

Author: kvhnuke

packages/extension/src/ui/action/views/network-assets/components/network-assets-header.vue

@@ -3,7 +3,7 @@
     <div class="network-assets__header__token">
       <p>Token</p>
     </div>
-    <div>
+    <div class="network-assets__header__last24h">
       <p>Last 24h</p>
     </div>
     <div class="network-assets__header__price">
@@ -18,10 +18,10 @@
 @import '@action/styles/theme.less';
 .network-assets {
   &__header {
-    padding: 10px 20px 2px 20px;
+    padding: 10px 24px 2px 24px;
     position: relative;
     display: flex;
-    justify-content: space-between;
+    justify-content: flex-start;
     align-items: end;
     flex-direction: row;
     p {
@@ -34,14 +34,24 @@
       margin: 0;
     }
     &__token {
-      width: 196px;
+      flex: 1;
+      min-width: 0;
       p {
-        padding-left: 48px;
+        padding-left: 52px;
+      }
+    }
+
+    &__last24h {
+      width: 80px;
+      flex-shrink: 0;
+      p {
+        text-align: center;
       }
     }
 
     &__price {
-      width: 162px;
+      width: 90px;
+      flex-shrink: 0;
       p {
         text-align: end;
       }

packages/extension/src/ui/action/views/network-assets/components/network-assets-item.vue

@@ -289,8 +289,8 @@ const toggleDetail = () => {
     flex-direction: column;
     align-items: center;
     gap: 4px;
-    margin: 0 8px;
-    min-width: 64px;
+    width: 80px;
+    flex-shrink: 0;
   }
 
   &__change-badge {
@@ -304,7 +304,6 @@ const toggleDetail = () => {
     letter-spacing: 0.02em;
 
     &.is-positive {
-      background: rgba(34, 197, 94, 0.1);
       color: #16a34a;
 
       svg {
@@ -314,7 +313,6 @@ const toggleDetail = () => {
     }
 
     &.is-negative {
-      background: rgba(239, 68, 68, 0.1);
       color: #dc2626;
 
       svg {
@@ -332,7 +330,7 @@ const toggleDetail = () => {
   // Value Section
   &__value {
     text-align: right;
-    min-width: 90px;
+    width: 90px;
     flex-shrink: 0;
   }