From 5bfbe2660cf7af0a40d331c8ccd02116fb36ec6b Mon Sep 17 00:00:00 2001
From: "Mark S. Shenouda" <mark@thisdot.co>
Date: Fri, 25 Oct 2024 15:27:43 +0300
Subject: [PATCH 1/4] fix: Limit status column to 150px

---
 src/components/CCIP/Tables/ChainTable.tsx | 4 ++--
 src/components/CCIP/Tables/Table.css      | 4 ++++
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/CCIP/Tables/ChainTable.tsx b/src/components/CCIP/Tables/ChainTable.tsx
index ef7b4c66d58..3e682570661 100644
--- a/src/components/CCIP/Tables/ChainTable.tsx
+++ b/src/components/CCIP/Tables/ChainTable.tsx
@@ -70,7 +70,7 @@ function ChainTable({ lanes, explorerUrl, sourceNetwork, environment }: TablePro
             <tr>
               <th>{inOutbound === LaneFilter.Outbound ? "Destination" : "Source"} network</th>
               <th>{inOutbound === LaneFilter.Outbound ? "OnRamp" : "OffRamp"} address</th>
-              <th>Status</th>
+              <th className="ccip-table__status-column">Status</th>
             </tr>
           </thead>
           <tbody>
@@ -120,7 +120,7 @@ function ChainTable({ lanes, explorerUrl, sourceNetwork, environment }: TablePro
                       )}
                     />
                   </td>
-                  <td>
+                  <td className="ccip-table__status-column">
                     <span
                       className={clsx(
                         "ccip-table__status",
diff --git a/src/components/CCIP/Tables/Table.css b/src/components/CCIP/Tables/Table.css
index 2e694352069..e3741dcbf21 100644
--- a/src/components/CCIP/Tables/Table.css
+++ b/src/components/CCIP/Tables/Table.css
@@ -18,6 +18,10 @@
   width: 200px;
 }
 
+.ccip-table .ccip-table__status-column {
+  width: 150px;
+}
+
 .ccip-table__drawer-container {
   padding: var(--space-6x);
 }

From 703ace8b3f1b48fd0e7b784ccf4a6c798b4de2eb Mon Sep 17 00:00:00 2001
From: "Mark S. Shenouda" <mark@thisdot.co>
Date: Fri, 25 Oct 2024 15:53:13 +0300
Subject: [PATCH 2/4] fix: change the width to 140px

---
 src/components/CCIP/Tables/Table.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/CCIP/Tables/Table.css b/src/components/CCIP/Tables/Table.css
index e3741dcbf21..2dcb91fbd70 100644
--- a/src/components/CCIP/Tables/Table.css
+++ b/src/components/CCIP/Tables/Table.css
@@ -19,7 +19,7 @@
 }
 
 .ccip-table .ccip-table__status-column {
-  width: 150px;
+  width: 140px;
 }
 
 .ccip-table__drawer-container {

From 000a7b3d45327a69c8103fae75e9ffc9cbe799f7 Mon Sep 17 00:00:00 2001
From: "Mark S. Shenouda" <mark@thisdot.co>
Date: Fri, 25 Oct 2024 16:08:04 +0300
Subject: [PATCH 3/4] fix: layout overflow

---
 src/components/CCIP/Chain/Chain.astro | 2 +-
 src/components/CCIP/Tables/Table.css  | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/CCIP/Chain/Chain.astro b/src/components/CCIP/Chain/Chain.astro
index 058483ed1b0..225b03e4f47 100644
--- a/src/components/CCIP/Chain/Chain.astro
+++ b/src/components/CCIP/Chain/Chain.astro
@@ -132,7 +132,7 @@ const searchLanes = getSearchLanes({ environment })
     }
   }
 
-  @media (min-width: 992px) {
+  @media (min-width: 1100px) {
     .layout {
       display: grid;
       --doc-padding: var(--space-10x);
diff --git a/src/components/CCIP/Tables/Table.css b/src/components/CCIP/Tables/Table.css
index 2dcb91fbd70..d8d349a20c7 100644
--- a/src/components/CCIP/Tables/Table.css
+++ b/src/components/CCIP/Tables/Table.css
@@ -18,10 +18,6 @@
   width: 200px;
 }
 
-.ccip-table .ccip-table__status-column {
-  width: 140px;
-}
-
 .ccip-table__drawer-container {
   padding: var(--space-6x);
 }
@@ -183,4 +179,8 @@
   .ccip-table td {
     width: auto;
   }
+
+  .ccip-table .ccip-table__status-column {
+    width: 140px;
+  }
 }

From 44ad06126b6f8e560b2c5f52b257ff890aabef45 Mon Sep 17 00:00:00 2001
From: "Mark S. Shenouda" <mark@thisdot.co>
Date: Fri, 25 Oct 2024 16:17:55 +0300
Subject: [PATCH 4/4] fix: set media query point to 70em

---
 src/components/CCIP/Chain/Chain.astro | 2 +-
 src/components/CCIP/Tables/Table.css  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/CCIP/Chain/Chain.astro b/src/components/CCIP/Chain/Chain.astro
index 225b03e4f47..058483ed1b0 100644
--- a/src/components/CCIP/Chain/Chain.astro
+++ b/src/components/CCIP/Chain/Chain.astro
@@ -132,7 +132,7 @@ const searchLanes = getSearchLanes({ environment })
     }
   }
 
-  @media (min-width: 1100px) {
+  @media (min-width: 992px) {
     .layout {
       display: grid;
       --doc-padding: var(--space-10x);
diff --git a/src/components/CCIP/Tables/Table.css b/src/components/CCIP/Tables/Table.css
index d8d349a20c7..cca5b44b6fe 100644
--- a/src/components/CCIP/Tables/Table.css
+++ b/src/components/CCIP/Tables/Table.css
@@ -162,7 +162,7 @@
   padding-top: var(--space-6x);
 }
 
-@media screen and (min-width: 768px) {
+@media screen and (min-width: 70em) {
   .ccip-table__drawer-heading {
     padding: var(--space-6x) var(--space-10x);
   }