From 47b36718ec37f710de9816660ec12653b6699205 Mon Sep 17 00:00:00 2001
From: Mohit5Upadhyay <upadhyaym7060@gmail.com>
Date: Tue, 8 Jul 2025 22:28:55 +0530
Subject: [PATCH 1/3] fix(docs): add horizontal scroll wrapper to middleware
 diagram to prevent overflow on mobile (#1967)

---
 css/style.css                  | 13 ++++++++++++-
 en/guide/writing-middleware.md |  2 ++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/css/style.css b/css/style.css
index 86e124fe4b..a040ffcd7c 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1438,12 +1438,17 @@ h2 a {
 
 .callout {position: relative;}
 
+.mw-fig-scroll {
+  -webkit-overflow-scrolling: touch;
+  max-width: 100%;
+}
 #mw-fig { 
   border-collapse: separate; 
   padding: 0; 
   border: 0; 
   width: 960px; 
-  margin-bottom: 20px;}
+  margin-bottom: 20px;
+}
 #mw-fig-imgcell {
   margin: 0;
   padding: 0px;
@@ -1464,6 +1469,12 @@ h2 a {
   width: 550px;
 }
 
+@media all and (max-width: 800px) {
+  .mw-fig-scroll {
+    overflow-x: auto;
+  }
+}
+
 /* Blog page styles*/
 #blog-doc {
   margin: 0 1rem;
diff --git a/en/guide/writing-middleware.md b/en/guide/writing-middleware.md
index 61df8c660b..bc81b68989 100755
--- a/en/guide/writing-middleware.md
+++ b/en/guide/writing-middleware.md
@@ -24,6 +24,7 @@ If the current middleware function does not end the request-response cycle, it m
 
 The following figure shows the elements of a middleware function call:
 
+<div class="mw-fig-scroll">
 <table id="mw-fig">
 <tr><td id="mw-fig-imgcell">
 <img src="/images/express-mw.png" alt="Elements of a middleware function call" id="mw-fig-img" />
@@ -42,6 +43,7 @@ The following figure shows the elements of a middleware function call:
 <div class="callout" id="callout6">HTTP <a href="/{{ page.lang }}/4x/api.html#req">request</a> argument to the middleware function, called "req" by convention.</div>
 </td></tr>
 </table>
+</div>
 
 Starting with Express 5, middleware functions that return a Promise will call `next(value)` when they reject or throw an error. `next` will be called with either the rejected value or the thrown Error.
 

From c4326baa4ac68347d6e8f9ce24ce5cf0648d5049 Mon Sep 17 00:00:00 2001
From: Mohit5Upadhyay <upadhyaym7060@gmail.com>
Date: Tue, 15 Jul 2025 14:25:10 +0530
Subject: [PATCH 2/3] fix(docs): replace mw-fig-scroll with table-scroller as
 per review feedback (#1967)

---
 css/style.css                  | 10 ----------
 en/guide/writing-middleware.md |  2 +-
 2 files changed, 1 insertion(+), 11 deletions(-)

diff --git a/css/style.css b/css/style.css
index a040ffcd7c..7af7d5fbd4 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1438,10 +1438,6 @@ h2 a {
 
 .callout {position: relative;}
 
-.mw-fig-scroll {
-  -webkit-overflow-scrolling: touch;
-  max-width: 100%;
-}
 #mw-fig { 
   border-collapse: separate; 
   padding: 0; 
@@ -1469,12 +1465,6 @@ h2 a {
   width: 550px;
 }
 
-@media all and (max-width: 800px) {
-  .mw-fig-scroll {
-    overflow-x: auto;
-  }
-}
-
 /* Blog page styles*/
 #blog-doc {
   margin: 0 1rem;
diff --git a/en/guide/writing-middleware.md b/en/guide/writing-middleware.md
index bc81b68989..c4d070d368 100755
--- a/en/guide/writing-middleware.md
+++ b/en/guide/writing-middleware.md
@@ -24,7 +24,7 @@ If the current middleware function does not end the request-response cycle, it m
 
 The following figure shows the elements of a middleware function call:
 
-<div class="mw-fig-scroll">
+<div class="table-scroller">
 <table id="mw-fig">
 <tr><td id="mw-fig-imgcell">
 <img src="/images/express-mw.png" alt="Elements of a middleware function call" id="mw-fig-img" />

From e976cf99648e823038435c0884fa2a269afc7d96 Mon Sep 17 00:00:00 2001
From: shubham oulkar <91728992+ShubhamOulkar@users.noreply.github.com>
Date: Thu, 17 Jul 2025 08:45:26 +0530
Subject: [PATCH 3/3] apply scroller width for same cross browser behaviour

---
 css/style.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/css/style.css b/css/style.css
index 7af7d5fbd4..3fb1301c95 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1210,6 +1210,7 @@ h2 a {
   .table-scroller {
     width: 100%;
     overflow: scroll;
+    scrollbar-width: thin;
   }
 
   code {