fix: add horizontal scroller on middleware table to prevent overflow on the small screen

* fix(docs): add horizontal scroll wrapper to middleware diagram to prevent overflow on mobile (#1967)

* fix(docs): replace mw-fig-scroll with table-scroller as per review feedback (#1967)

* apply scroller width for same cross browser behaviour

---------

Co-authored-by: shubham oulkar <[email protected]>

Author: Mohit5Upadhyay

css/style.css

@@ -1211,6 +1211,7 @@ h2 a {
   .table-scroller {
     width: 100%;
     overflow: scroll;
+    scrollbar-width: thin;
   }
 
   code {
@@ -1436,7 +1437,8 @@ h2 a {
   padding: 0; 
   border: 0; 
   width: 960px; 
-  margin-bottom: 20px;}
+  margin-bottom: 20px;
+}
 #mw-fig-imgcell {
   margin: 0;
   padding: 0px;

en/guide/writing-middleware.md

@@ -23,6 +23,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="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" />
@@ -41,6 +42,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.