table fixes

NEAR-DevHub · Jan 18, 2025 · 8b90357 · 8b90357
1 parent 5d29ec7
commit 8b90357
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 7 deletions.
diff --git a/instances/widgets.treasury-factory.near/widget/components/TokenAmount.jsx b/instances/widgets.treasury-factory.near/widget/components/TokenAmount.jsx
@@ -33,9 +33,9 @@ return (
         })}
       </span>
       {isNEAR ? (
-        <NearToken width={17} height={17} />
+        <NearToken width={16} height={16} />
       ) : (
-        <img width="17px" height="17px" src={ftMetadata.icon} />
+        <img width="16" height="16" src={ftMetadata.icon} />
       )}
     </div>
     {/* TODO later */}

diff --git a/instances/widgets.treasury-factory.near/widget/components/TokenIcon.jsx b/instances/widgets.treasury-factory.near/widget/components/TokenIcon.jsx
@@ -16,11 +16,11 @@ if (!isNEAR) {
 }
 
 return (
-  <div className="d-flex gap-1 align-items-center h6 mb-0 justify-content-center">
+  <div className="d-flex gap-1 align-items-center amount mb-0 justify-content-center">
     {isNEAR ? (
-      <NearToken width={18} height={18} />
+      <NearToken width={24} height={24} />
     ) : (
-      <img width="18px" height="18px" src={ftMetadata.icon} />
+      <img width="24" height="24" src={ftMetadata.icon} />
     )}
     {ftMetadata.symbol}
   </div>

diff --git a/instances/widgets.treasury-factory.near/widget/components/templates/AppLayout.jsx b/instances/widgets.treasury-factory.near/widget/components/templates/AppLayout.jsx
@@ -289,7 +289,7 @@ function AppLayout({ page, instance, children, treasuryDaoID, accountId }) {
 
     .custom-truncate {
       display: -webkit-box;
-      -webkit-line-clamp: 3;
+      -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -440,6 +440,10 @@ function AppLayout({ page, instance, children, treasuryDaoID, accountId }) {
       border-color: var(--border-color) !important;
       color: var(--text-color) !important;
       margin-bottom: 20px;
+
+      .amount {
+        font-size: 14px;
+      }
     }
 
     .table td:first-child {

diff --git a/instances/widgets.treasury-factory.near/widget/pages/dashboard/Portfolio.jsx b/instances/widgets.treasury-factory.near/widget/pages/dashboard/Portfolio.jsx
@@ -184,7 +184,9 @@ const PortfolioCard = ({
           <div className="d-flex align-items-center gap-2">
             {Icon ? <Icon /> : <img src={src} height={30} width={30} />}
             <div>
-              <div className="h6 mb-0">{symbol}</div>
+              <div style={{ maxWidth: "240px" }} className="h6 mb-0 text-truncate">
+                {symbol}
+              </div>
               <div className="text-sm text-secondary">
                 ${Big(price ?? "0").toFixed(2)}
               </div>

diff --git a/instances/widgets.treasury-factory.near/widget/pages/payments/Table.jsx b/instances/widgets.treasury-factory.near/widget/pages/payments/Table.jsx
@@ -66,6 +66,10 @@ const Container = styled.div`
     background: inherit;
   }
 
+  thead td {
+    text-wrap: nowrap;
+  }
+
   table {
     overflow-x: auto;
   }

diff --git a/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/Table.jsx b/instances/widgets.treasury-factory.near/widget/pages/stake-delegation/Table.jsx
@@ -92,6 +92,10 @@ const Container = styled.div`
 
   table {
     overflow-x: auto;
+
+    thead td {
+      text-wrap: nowrap;
+    }
   }
 
   .text-warning {