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)
| Version |
+
{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)
+ }}
+ >
|
- |
+
|
+
{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..b0aacd4e549 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 {
@@ -263,47 +139,17 @@
}
}
-/* 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__drawer-heading {
+ margin: 0;
-.ccip-table__paused-badge {
- margin-left: var(--space-2x);
- font-size: 12px;
- opacity: 0.8;
- display: inline-flex;
- align-items: center;
- cursor: help;
-}
+ font-family: "Inter";
+ font-weight: 500;
-/* Ensure paused tokens still allow interaction for tooltips */
-.ccip-table__row--paused .ccip-table__network-name {
- pointer-events: auto;
-}
+ font-size: 22px;
+ line-height: 28px;
-/* Additional styling for capacity and rate cells in paused state */
-.ccip-table__row--paused td {
- color: var(--gray-400);
-}
+ color: var(--gray-900);
-.ccip-table__row--paused a {
- color: var(--gray-400);
- text-decoration: none;
- pointer-events: none;
+ /* 🔥 restore original spacing */
+ padding: var(--space-6x) var(--space-10x);
}
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;
}