From 0caaca7d7bf848167a5febb26b0b68045b1aa4e6 Mon Sep 17 00:00:00 2001 From: Grace Fletcher Date: Thu, 7 May 2026 10:31:38 -0700 Subject: [PATCH 1/2] enable full row clickability --- src/components/CCIP/Tables/ChainTable.tsx | 83 +++---- src/components/CCIP/Tables/Table.css | 205 ++---------------- .../CCIP/Tables/TableSearchInput.css | 14 +- 3 files changed, 69 insertions(+), 233 deletions(-) diff --git a/src/components/CCIP/Tables/ChainTable.tsx b/src/components/CCIP/Tables/ChainTable.tsx index d487faf20ee..0c2eb44ce80 100644 --- a/src/components/CCIP/Tables/ChainTable.tsx +++ b/src/components/CCIP/Tables/ChainTable.tsx @@ -51,26 +51,46 @@ function ChainTable({ lanes, explorer, sourceNetwork, environment }: TableProps) } }, [search]) + const openLane = (network: (typeof lanes)[number]) => { + const laneData = getLane({ + sourceChain: sourceNetwork.key as SupportedChain, + destinationChain: network.key as SupportedChain, + environment, + version: Version.V1_2_0, + }) + + drawerContentStore.set(() => ( + + )) + } + return ( <>
setInOutbound(key as LaneFilter)} /> +
+
+
@@ -112,45 +133,28 @@ function ChainTable({ lanes, explorer, sourceNetwork, environment }: TableProps) + {lanes ?.filter((network) => network.name.toLowerCase().includes(search.toLowerCase())) .slice(0, seeMore ? lanes.length : BEFORE_SEE_MORE) .map((network, index) => ( - + openLane(network)} + className="cursor-pointer hover:bg-muted/50" + tabIndex={0} + onKeyDown={(e) => { + if (e.key === "Enter") openLane(network) + }} + > + + ))}
Version
- + {inOutbound === LaneFilter.Outbound ? network.onRamp?.version : network.offRamp?.version}
+ {!seeMore && setSeeMore(!seeMore)} />} +
{lanes.filter((network) => network.name.toLowerCase().includes(search.toLowerCase())).length === 0 && ( <>No lanes found diff --git a/src/components/CCIP/Tables/Table.css b/src/components/CCIP/Tables/Table.css index b2207a0db75..cfc449dcbe8 100644 --- a/src/components/CCIP/Tables/Table.css +++ b/src/components/CCIP/Tables/Table.css @@ -3,6 +3,9 @@ text-align: start; table-layout: fixed; width: 100%; + + /* Prevent column collapse when search expands */ + min-width: 700px; } .ccip-table tbody tr:first-child { @@ -23,24 +26,26 @@ padding: var(--space-6x); } +/* Row interaction */ +.ccip-table tbody tr { + cursor: pointer; +} + .ccip-table tbody tr:hover { background-color: var(--gray-50); } .ccip-table thead th { - /* Body/Body Semi S */ font-family: "Inter"; font-style: normal; font-weight: 600; font-size: 14px; line-height: 22px; - /* identical to box height, or 157% */ text-align: start; background-color: transparent; padding: 0; color: var(--gray-700); padding-bottom: var(--space-4x); - align-content: baseline; } .ccip-table tbody td { @@ -50,17 +55,12 @@ } .ccip-table__network-name { - color: #000; display: flex; align-items: center; - cursor: pointer; border: none; background: none; width: 100%; text-align: left; - font-family: inherit; - font-size: inherit; - font-weight: inherit; padding: 0; margin: 0; } @@ -71,80 +71,11 @@ margin-right: var(--space-4x); } -.ccip-table__status { - display: inline-flex; - align-items: center; - gap: var(--space-1x); - font-size: 13px; - padding: 6px var(--space-3x); - background: #ddf8e6; - border-radius: var(--space-6x); - border: 1px solid var(--Page-Border-Border, #e4e8ed); - background: var(--Page-Background-Muted, #f5f7fa); - color: var(--gray-900); - text-transform: capitalize; -} -.ccip-table__status img { - width: var(--space-4x); - height: var(--space-4x); -} - -.ccip-table__status-operational { - border: 1px solid var(--Success-Border, #95e5b0); - background: var(--Success-Background, #ddf8e6); - color: var(--Success-Foreground, #1e633a); -} -.ccip-table__status-operational svg { - stroke: var(--Success-Foreground, #1e633a); -} - -.ccip-table__status-maintenance { - border: 1px solid var(--Warning-Border, #f8d34c); - background: var(--Warning-Background, #fef3c7); - color: var(--Warning-Foreground, #854d0e); -} -.ccip-table__status-maintenance svg { - stroke: var(--Warning-Foreground, #854d0e); -} - -.ccip-table__status-cursed { - border: 1px solid var(--Error-Border, #fca5a5); - background: var(--Error-Background, #fee2e2); - color: var(--Error-Foreground, #b91c1c); -} -.ccip-table__status-cursed svg { - stroke: var(--Error-Foreground, #b91c1c); -} - -.ccip-table__logoContainer { - position: relative; -} - -.ccip-table__smallLogo { - position: absolute; - top: 70%; - left: 70%; - transform: translate(-50%, -50%); - width: var(--space-4x); - height: var(--space-4x); - border-radius: 50%; - background-color: #fff; -} - -.ccip-table__drawer-heading { - font-style: normal; - font-weight: 500; - font-size: 22px; - line-height: 28px; - padding: var(--space-2x); - color: var(--gray-900); - margin-bottom: 0px; -} +/* --- Filters layout (correct model) --- */ .ccip-table__filters { display: flex; flex-wrap: wrap-reverse; - justify-content: space-between; align-items: center; gap: var(--space-4x); margin-bottom: var(--space-6x); @@ -152,71 +83,22 @@ padding-bottom: var(--space-4x); } -.ccip-table__filters-title { - color: var(--gray-900); - font-style: normal; - font-weight: var(--font-weight-medium); - font-size: 22px; - line-height: var(--space-10x); -} - -.ccip-table__filters-title span { - color: var(--gray-400); - font-weight: 600; - letter-spacing: 0.5px; -} - -.ccip-table__notFound { - font-weight: var(--font-weight-medium); - color: var(--gray-400); - text-align: center; - padding-top: var(--space-6x); -} - -@media screen and (min-width: 768px) { - .ccip-table__drawer-heading { - padding: var(--space-6x) var(--space-10x); - } - - .ccip-table__drawer-container { - padding: var(--space-10x); - } - - .ccip-table__wrapper { - max-width: 100%; - } -} - -.rate-tooltip-cell { - min-width: 150px; - white-space: nowrap; -} - -.rate-tooltip-cell img { - width: 16px !important; - height: 16px !important; - min-width: 16px !important; - min-height: 16px !important; - object-fit: contain !important; - display: inline-block !important; - vertical-align: middle !important; -} - -/* ChainTable specific filter layout */ +/* Keep single row on desktop */ .ccip-table__filters--chain { flex-wrap: nowrap; } +/* Push actions to the right */ .ccip-table__filters__actions { display: flex; align-items: center; gap: var(--space-3x); - flex-shrink: 0; + margin-left: auto; } +/* Search should not control layout */ .ccip-table__filters__search-container { - max-width: 150px; - flex-shrink: 0; + flex: 0 0 auto; } .ccip-table__filters__external-button { @@ -231,30 +113,24 @@ height: 1em; } -/* Responsive behavior for ChainTable */ +/* --- Responsive --- */ + @media (max-width: 768px) { .ccip-table__filters--chain { flex-direction: column; align-items: stretch; - gap: var(--space-3x); } .ccip-table__filters__actions { - justify-content: space-between; width: 100%; - } - - .ccip-table__filters__search-container { - min-width: 0; - max-width: none; - flex: 1; + justify-content: space-between; + margin-left: 0; } } @media (max-width: 480px) { .ccip-table__filters__actions { flex-direction: column; - gap: var(--space-3x); } .ccip-table__filters__external-button { @@ -262,48 +138,3 @@ justify-content: center; } } - -/* Paused token styles */ -.ccip-table__row--paused { - opacity: 0.6; - background-color: var(--gray-50); -} - -.ccip-table__row--paused:hover { - opacity: 0.8; - background-color: var(--gray-100); -} - -.ccip-table__network-name--paused { - color: var(--gray-400) !important; - filter: grayscale(0.7); -} - -.ccip-table__network-name--paused img { - filter: grayscale(0.8) opacity(0.7); -} - -.ccip-table__paused-badge { - margin-left: var(--space-2x); - font-size: 12px; - opacity: 0.8; - display: inline-flex; - align-items: center; - cursor: help; -} - -/* Ensure paused tokens still allow interaction for tooltips */ -.ccip-table__row--paused .ccip-table__network-name { - pointer-events: auto; -} - -/* Additional styling for capacity and rate cells in paused state */ -.ccip-table__row--paused td { - color: var(--gray-400); -} - -.ccip-table__row--paused a { - color: var(--gray-400); - text-decoration: none; - pointer-events: none; -} diff --git a/src/components/CCIP/Tables/TableSearchInput.css b/src/components/CCIP/Tables/TableSearchInput.css index f46d5b8b55d..13a61b647de 100644 --- a/src/components/CCIP/Tables/TableSearchInput.css +++ b/src/components/CCIP/Tables/TableSearchInput.css @@ -1,6 +1,7 @@ .tableSearchInput { display: flex; - justify-content: center; + align-items: center; + justify-content: flex-start; min-width: 40px; min-height: 40px; padding: 0 10px; @@ -10,18 +11,15 @@ gap: var(--space-4x); } +/* Do NOT expand to full width */ .tableSearchInput:has(input) { - width: 100%; + width: auto; } +/* Control expanded size */ .tableSearchInput input { padding: 0; border: none; outline: none; -} - -@media (min-width: 768px) { - .tableSearchInput:has(input) { - width: auto; - } + width: 140px; } From b930dd5d4e597d20094493e5d33d87b952e23160 Mon Sep 17 00:00:00 2001 From: Grace Fletcher Date: Thu, 7 May 2026 11:49:06 -0700 Subject: [PATCH 2/2] fix lane drawer header --- src/components/CCIP/Tables/Table.css | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/components/CCIP/Tables/Table.css b/src/components/CCIP/Tables/Table.css index cfc449dcbe8..b0aacd4e549 100644 --- a/src/components/CCIP/Tables/Table.css +++ b/src/components/CCIP/Tables/Table.css @@ -138,3 +138,18 @@ justify-content: center; } } + +.ccip-table__drawer-heading { + margin: 0; + + font-family: "Inter"; + font-weight: 500; + + font-size: 22px; + line-height: 28px; + + color: var(--gray-900); + + /* 🔥 restore original spacing */ + padding: var(--space-6x) var(--space-10x); +}