[FFmpeg-devel] [PATCH] prevent sidebar from causing horizontal page scroll on mobile

[FFmpeg-devel] [PATCH] prevent sidebar from causing horizontal page scroll on mobile

[Rito Rhymes via ffmpeg-devel]

When the sidebar is opened on mobile devices, it currently pushes the page content to the right, expanding the entire page width and causing horizontal scroll.

Horizontal page scrolling on mobile can be disorienting for users, impede a11y and lead to unpredictable browser behaviors.

This patch modifies the sidebar behavior on mobile to position it over / occluding the left side of the page, instead of pushing the content aside.

Additionally, because the sidebar now directly occludes page content and the hamburger icon:
- an additional overlay element covers the content to enforce separation and focus
- a close button is added to the sidebar (on mobile only) for clear dismissal

Tapping the overlay or the close button will close the sidebar and remove the overlay.

---
 htdocs/css/simple-sidebar.css | 56 ++++++++++++++++++++++++++++++-----
 src/template_footer2          | 12 +++++++-
 src/template_head2            |  3 ++
 3 files changed, 63 insertions(+), 8 deletions(-)

diff --git a/htdocs/css/simple-sidebar.css b/htdocs/css/simple-sidebar.css
index 71a8a39..d0d6306 100644
--- a/htdocs/css/simple-sidebar.css
+++ b/htdocs/css/simple-sidebar.css
@@ -89,6 +89,15 @@
   padding: 20px;
 }
 
+/* Overlay and close button - hidden on desktop */
+.sidebar-overlay {
+  display: none;
+}
+
+.sidebar-close {
+  display: none;
+}
+
 @media (max-width:767px) {
 
 #wrapper {
@@ -97,17 +106,50 @@
 
 #sidebar-wrapper {
   left: 0;
+  margin-left: 0;
+  height: 100vh;
+  transform: translateX(-200px);
+  transition: transform 0.3s ease;
+  z-index: 1001;
 }
 
-#wrapper.active {
-  position: relative;
-  left: 200px;
+#wrapper.active #sidebar-wrapper {
+  transform: translateX(0);
 }
 
-#wrapper.active #sidebar-wrapper {
-  left: 200px;
-  width: 200px;
-  transition: all 0.4s ease 0s;
+.sidebar-close {
+  display: block;
+  position: absolute;
+  top: 0;
+  right: 0;
+  color: #999;
+  font-size: 24px;
+  text-decoration: none;
+  z-index: 1001;
+  line-height: 1;
+  padding: 20px;
+}
+
+.sidebar-close:hover,
+.sidebar-close:active,
+.sidebar-close:focus {
+  color: #fff;
+  text-decoration: none;
+}
+
+.sidebar-overlay {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 999;
+}
+
+#wrapper.active .sidebar-overlay {
+  display: block;
 }
 
 #menu-toggle {
diff --git a/src/template_footer2 b/src/template_footer2
index 735d540..958b963 100644
--- a/src/template_footer2
+++ b/src/template_footer2
@@ -1,8 +1,18 @@
     <!-- Custom JavaScript for the Menu Toggle -->
     <script>
+      function openSidebar() {
+          $("#wrapper").addClass("active");
+      }
+      function closeSidebar() {
+          $("#wrapper").removeClass("active");
+      }
       $("#menu-toggle").click(function(e) {
           e.preventDefault();
-          $("#wrapper").toggleClass("active");
+          openSidebar();
+      });
+      $(".sidebar-close, .sidebar-overlay").click(function(e) {
+          e.preventDefault();
+          closeSidebar();
       });
     </script>
 
diff --git a/src/template_head2 b/src/template_head2
index 4f61b62..8277e3f 100644
--- a/src/template_head2
+++ b/src/template_head2
@@ -12,6 +12,7 @@
     <div id="wrapper">
 
       <nav id="sidebar-wrapper">
+        <a class="sidebar-close" href="#">&times;</a>
         <ul class="sidebar-nav">
           <li class="sidebar-brand"><a href=".">
               <img src="img/ffmpeg3d_white_20.png" alt="FFmpeg" />
@@ -54,6 +55,8 @@
         </ul>
       </nav>
 
+      <div class="sidebar-overlay"></div>
+
       <div id="page-content-wrapper">
         <header class="content-header">
           <h1>
-- 
2.51.0

_______________________________________________
ffmpeg-devel mailing list -- ffmpeg-devel@ffmpeg.org
To unsubscribe send an email to ffmpeg-devel-leave@ffmpeg.org

[FFmpeg-devel] Re: [PATCH] prevent sidebar from causing horizontal page scroll on mobile

[Michael Niedermayer via ffmpeg-devel]

[-- Attachment #1.1: Type: text/plain, Size: 563 bytes --]

Hi Rito

On Fri, Feb 06, 2026 at 07:26:01AM -0500, Rito Rhymes via ffmpeg-devel wrote:
> When the sidebar is opened on mobile devices, it currently pushes the page content to the right, expanding the entire page width and causing horizontal scroll.

And with this patch the user cannot scroll and 20% of the page is inaccessible
I dont think thats a good solution either

thx

[...]

-- 
Michael     GnuPG fingerprint: 9FF2128B147EF6730BADF133611EC787040B0FAB

Everything should be made as simple as possible, but not simpler.
-- Albert Einstein

[-- Attachment #1.2: signature.asc --]
[-- Type: application/pgp-signature, Size: 195 bytes --]

[-- Attachment #2: Type: text/plain, Size: 163 bytes --]

_______________________________________________
ffmpeg-devel mailing list -- ffmpeg-devel@ffmpeg.org
To unsubscribe send an email to ffmpeg-devel-leave@ffmpeg.org

[FFmpeg-devel] Re: [PATCH] prevent sidebar from causing horizontal page scroll on mobile

[Matthew Pellerito via ffmpeg-devel]

Thanks for reviewing it and your feedback.



Based on your UX concerns, I propose a middle ground:



A bottom drawer nav system.



- User clicks the hamburger button, a drawer rises from the bottom covering part of the viewport to reveal the menu.



- User vertically scrolls within the drawer to reveal different parts of the menu.



- Page content remains visible to read while drawer is open (smaller window).



- No horizontal overflow or other layout breakage.





I have an example of a similar system I built for the Kubernetes docs site you can see as a live demo at https://k8s.ritovision.com/docs 



Is this a direction you would like to see, and if so, do you have any specific requirements about the implementation?











---- On Mon, 09 Feb 2026 06:59:55 -0500 mailto:ffmpeg-devel@ffmpeg.org   wrote ----

Hi Rito 
 
On Fri, Feb 06, 2026 at 07:26:01AM -0500, Rito Rhymes via ffmpeg-devel wrote: 
> When the sidebar is opened on mobile devices, it currently pushes the page content to the right, expanding the entire page width and causing horizontal scroll. 
 
And with this patch the user cannot scroll and 20% of the page is inaccessible 
I dont think thats a good solution either 
 
thx 
 
[...] 
 
-- 
Michael     GnuPG fingerprint: 9FF2128B147EF6730BADF133611EC787040B0FAB 
 
Everything should be made as simple as possible, but not simpler. 
-- Albert Einstein 
_______________________________________________ 
ffmpeg-devel mailing list -- mailto:ffmpeg-devel@ffmpeg.org  
To unsubscribe send an email to mailto:ffmpeg-devel-leave@ffmpeg.org
_______________________________________________
ffmpeg-devel mailing list -- ffmpeg-devel@ffmpeg.org
To unsubscribe send an email to ffmpeg-devel-leave@ffmpeg.org

[FFmpeg-devel] Re: [PATCH] prevent sidebar from causing horizontal page scroll on mobile

[Rito Rhymes via ffmpeg-devel]

I realized I mistakenly sent an HTML reply the other 
week to this, so it may have gotten lost.

What I meant to say was, thank you for the feedback
and insight on your vision for the navigation interface.

I already sent a new patch series that implements a
bottom drawer UI architecture to effectively address
both:
1) the concern you raise about not being able to read 
and navigate page content while a menu is opened, and 
2) the a11y concern I raised about page overflow behavior
(for the current sidebar when opened).

I wanted to know if you preferred this direction or an 
alternative one; I decided to send a working series 
so you can see what it's like to use.

If you have any other specific requirements or possible 
features in mind that could be added to improve the mobile 
experience or navigation in general, do share.

-Rito
_______________________________________________
ffmpeg-devel mailing list -- ffmpeg-devel@ffmpeg.org
To unsubscribe send an email to ffmpeg-devel-leave@ffmpeg.org