add support for wide drawer layout in CCIP components

Author: markshenouda

src/components/CCIP/Drawer/Drawer.css

@@ -48,8 +48,12 @@
 }
 
 @media (min-width: 768px) {
-  /* Full width minus ESC button width (--space-12x) and spacing (--space-8x for gaps on both sides) */
   .drawer__container {
+    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));
   }
 

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">

src/components/CCIP/Drawer/TokenDrawer.tsx

@@ -1,5 +1,5 @@
 import "../Tables/Table.css"
-import { drawerContentStore } from "../Drawer/drawerStore.ts"
+import { drawerContentStore, drawerWidthStore, DrawerWidth } from "../Drawer/drawerStore.ts"
 import TokenDetailsHero from "../ChainHero/TokenDetailsHero.tsx"
 import {
   Environment,
@@ -231,6 +231,7 @@ function TokenDrawer({
                           type="button"
                           className={`ccip-table__network-name ${tokenPaused ? "ccip-table__network-name--paused" : ""}`}
                           onClick={() => {
+                            drawerWidthStore.set(DrawerWidth.Wide)
                             drawerContentStore.set(() => (
                               <LaneDrawer
                                 environment={environment}

src/components/CCIP/Drawer/drawerStore.ts

@@ -2,4 +2,10 @@
 import { atom } from "nanostores"
 import type { JSX } from "preact"
 
+export enum DrawerWidth {
+  Default = "default",
+  Wide = "wide",
+}
+
 export const drawerContentStore = atom<(() => JSX.Element) | null>(null)
+export const drawerWidthStore = atom<DrawerWidth>(DrawerWidth.Default)

src/components/CCIP/Search/Search.tsx

@@ -4,7 +4,7 @@ import { clsx } from "~/lib/clsx/clsx.ts"
 import { useClickOutside } from "~/hooks/useClickOutside.tsx"
 import { Environment, LaneConfig, LaneFilter } from "~/config/data/ccip/types.ts"
 import { directoryToSupportedChain, getExplorer, fallbackTokenIconUrl } from "~/features/utils/index.ts"
-import { drawerContentStore } from "../Drawer/drawerStore.ts"
+import { drawerContentStore, drawerWidthStore, DrawerWidth } from "../Drawer/drawerStore.ts"
 import LaneDrawer from "../Drawer/LaneDrawer.tsx"
 import { ChainType, ExplorerInfo } from "~/config/types.ts"
 import type { WorkerMessage, WorkerResponse } from "~/workers/data-worker.ts"
@@ -236,7 +236,8 @@ function Search({ chains, tokens, small, environment, lanes }: SearchProps) {
                     <li key={lane.sourceNetwork.name + lane.destinationNetwork.key}>
                       <button
                         type="button"
-                        onClick={() =>
+                        onClick={() => {
+                          drawerWidthStore.set(DrawerWidth.Wide)
                           drawerContentStore.set(() => (
                             <LaneDrawer
                               environment={environment}
@@ -249,7 +250,7 @@ function Search({ chains, tokens, small, environment, lanes }: SearchProps) {
                               explorer={generateExplorerUrl(lane)}
                             />
                           ))
-                        }
+                        }}
                         aria-label={`View lane from ${lane.sourceNetwork.name} to ${lane.destinationNetwork.name}`}
                       >
                         <div className="ccip-hero__search-results__lane-images">

src/components/CCIP/Tables/ChainTable.tsx

@@ -4,7 +4,7 @@ import Tabs from "./Tabs.tsx"
 import TableSearchInput from "./TableSearchInput.tsx"
 import { useEffect, useState } from "react"
 import { getExplorerAddressUrl } from "~/features/utils/index.ts"
-import { drawerContentStore } from "../Drawer/drawerStore.ts"
+import { drawerContentStore, drawerWidthStore, DrawerWidth } from "../Drawer/drawerStore.ts"
 import LaneDrawer from "../Drawer/LaneDrawer.tsx"
 import { Environment, Version, LaneFilter } from "~/config/data/ccip/types.ts"
 import { getLane } from "~/config/data/ccip/data.ts"
@@ -130,6 +130,7 @@ function ChainTable({ lanes, explorer, sourceNetwork, environment }: TableProps)
                           version: Version.V1_2_0,
                         })
 
+                        drawerWidthStore.set(DrawerWidth.Wide)
                         drawerContentStore.set(() => (
                           <LaneDrawer
                             environment={environment}