Update lane side panel

src/components/CCIP/ChainHero/ChainHero.css

@@ -1,5 +1,5 @@
 .ccip-chain-hero {
-  background-color: var(--gray-100);
+  background: var(--Page-Background-Alt);
   border-bottom: 1px solid var(--gray-200);
   min-height: 241px;
 }

src/components/CCIP/ChainHero/LaneDetailsHero.css

@@ -1,5 +1,5 @@
 .lane-details-hero {
-  background-color: var(--gray-100);
+  background: var(--Page-Background-Alt);
   padding: var(--space-6x);
   border-bottom: 1px solid var(--gray-200);
 }
@@ -42,9 +42,16 @@
 }
 
 .lane-details-hero__details {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: var(--space-6x);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-10x);
+}
+
+.lane-details-hero__details__item {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4x);
+  min-width: var(--space-45x);
 }
 
 .lane-details-hero__details__label {
@@ -61,10 +68,6 @@
     padding: var(--space-6x) var(--space-10x) var(--space-10x);
   }
 
-  .lane-details-hero__details {
-    grid-template-columns: 1fr 2fr;
-  }
-
   .lane-details-hero__networks {
     flex-direction: row;
     align-items: center;

src/components/CCIP/ChainHero/LaneDetailsHero.tsx

@@ -19,8 +19,8 @@
   }
   onRamp: string
   offRamp: string
+  sourceAddress: string
   destinationAddress: string
-  enforceOutOfOrder?: boolean
   explorer: ExplorerInfo
   inOutbound: LaneFilter
 }
@@ -69,32 +69,26 @@
   clipboardType?: string
   tooltip?: React.ReactNode
 }) => (
-  <>
+  <div className="lane-details-hero__details__item">
     <div className="lane-details-hero__details__label">
       {label}
       {tooltip}
     </div>
     <div data-clipboard-type={clipboardType}>{children}</div>
-  </>
+  </div>
 )
 
 function LaneDetailsHero({
   sourceNetwork,
   destinationNetwork,
   onRamp,
   offRamp,
+  sourceAddress,
   destinationAddress,
-  enforceOutOfOrder,
   explorer,
   inOutbound,
 }: LaneDetailsHeroProps) {
-  // Map boolean values to display strings
-  const getOutOfOrderText = (value?: boolean) => {
-    if (value === true) return "Required"
-    if (value === false) return "Optional"
-    return "N/A"
-  }
 
   return (
     <div className="lane-details-hero">
       {/* Display networks with direction based on lane type */}
@@ -115,44 +109,41 @@
       </div>
 
       <div className="lane-details-hero__details">
-        {/* Display address information based on lane type */}
-        {inOutbound === LaneFilter.Inbound ? (
-          <DetailItem label="OffRamp address" clipboardType="offramp">
-            <AddressComponent
-              address={offRamp}
-              endLength={6}
-              contractUrl={getExplorerAddressUrl(explorer, destinationNetwork.chainType)(offRamp)}
-            />
-          </DetailItem>
-        ) : (
-          <DetailItem
-            label="OnRamp address"
-            clipboardType="onramp"
-            tooltip={sourceNetwork.chainType === "solana" ? <StyledTooltip tip="Same as Router." /> : undefined}
-          >
-            <AddressComponent
-              address={onRamp}
-              endLength={6}
-              contractUrl={getExplorerAddressUrl(explorer, sourceNetwork.chainType)(onRamp)}
-            />
-          </DetailItem>
-        )}
+        <DetailItem
+          label="OnRamp address"
+          clipboardType="onramp"
+          tooltip={sourceNetwork.chainType === "solana" ? <StyledTooltip tip="Same as Router." /> : undefined}
+        >
+          <AddressComponent
+            address={onRamp}
+            endLength={6}
+            contractUrl={getExplorerAddressUrl(explorer, sourceNetwork.chainType)(onRamp)}
+          />
+        </DetailItem>
 
-        <DetailItem label="Destination chain selector" clipboardType="destination-chain-selector">
-          {destinationAddress ? <CopyValue value={destinationAddress} /> : "n/a"}{" "}
+        <DetailItem label="OffRamp address" clipboardType="offramp">
+          <AddressComponent
+            address={offRamp}
+            endLength={6}
+            contractUrl={getExplorerAddressUrl(explorer, destinationNetwork.chainType)(offRamp)}
+          />
         </DetailItem>
 
-        {inOutbound === LaneFilter.Outbound && (
-          <DetailItem
-            label="Out of Order Execution"
-            clipboardType="out-of-order-execution"
-            tooltip={
-              <StyledTooltip tip="Controls the execution order of your messages on the destination blockchain. Setting this to true allows messages to be executed in any order. Setting it to false ensures messages are executed in sequence, so a message will only be executed if the preceding one has been executed. On lanes where 'Out of Order Execution' is required, you must set this to true; otherwise, the transaction will revert." />
-            }
-          >
-            {getOutOfOrderText(enforceOutOfOrder)}
-          </DetailItem>
-        )}
+        <DetailItem
+          label="Source chain selector"
+          clipboardType="source-chain-selector"
+          tooltip={<StyledTooltip tip="Unique identifier for the source blockchain network." />}
+        >
+          {sourceAddress ? <CopyValue value={sourceAddress} /> : "n/a"}
+        </DetailItem>
+
+        <DetailItem
+          label="Destination chain selector"
+          clipboardType="destination-chain-selector"
+          tooltip={<StyledTooltip tip="Unique identifier for the destination blockchain network." />}
+        >
+          {destinationAddress ? <CopyValue value={destinationAddress} /> : "n/a"}
+        </DetailItem>
       </div>
     </div>
   )

src/components/CCIP/Drawer/Drawer.css

@@ -52,6 +52,11 @@
     width: 75%;
   }
 
+  /* Wide drawer for lane details - full width minus ESC button width and spacing */
+  .drawer__container--wide {
+    width: calc(100% - var(--space-12x) - var(--space-8x));
+  }
+
   .drawer__closeMobile {
     display: none;
   }

src/components/CCIP/Drawer/Drawer.tsx

@@ -1,6 +1,6 @@
 import { useStore } from "@nanostores/react"
 import "./Drawer.css"
-import { drawerContentStore } from "./drawerStore.ts"
+import { drawerContentStore, drawerWidthStore, DrawerWidth } from "./drawerStore.ts"
 import { useRef, useEffect, useState } from "react"
 import { clsx } from "~/lib/clsx/clsx.ts"
 import type { ReactNode } from "react"
@@ -9,6 +9,7 @@ function Drawer() {
   const drawerRef = useRef<HTMLDivElement>(null)
   const drawerContentRef = useRef<HTMLDivElement>(null)
   const $drawerContent = useStore(drawerContentStore) as (() => ReactNode) | ReactNode | null
+  const $drawerWidth = useStore(drawerWidthStore)
   const [isOpened, setIsOpened] = useState(false)
 
   // exit when press esc
@@ -47,6 +48,7 @@ function Drawer() {
     // Use transitionend event instead of setTimeout for better performance
     const handleTransitionEnd = () => {
       drawerContentStore.set(null)
+      drawerWidthStore.set(DrawerWidth.Default)
       drawerRef.current?.removeEventListener("transitionend", handleTransitionEnd)
     }
 
@@ -62,7 +64,12 @@ function Drawer() {
       ref={drawerRef}
       onClick={handleClickOutside}
     >
-      <div className="drawer__container" ref={drawerContentRef}>
+      <div
+        className={clsx("drawer__container", {
+          "drawer__container--wide": $drawerWidth === DrawerWidth.Wide,
+        })}
+        ref={drawerContentRef}
+      >
         <div className="drawer__close">
           <button id="drawer-exit" onClick={handleClose} aria-label="Close drawer">
             <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">