From 20cd9839e731728f49fcb9661227366750aff71f Mon Sep 17 00:00:00 2001
From: Yashi <yashi.singhal410@gmail.com>
Date: Sat, 31 Oct 2026 17:06:58 +0530
Subject: [PATCH 1/2] fix(ui): prevent search bar clipping on mobile viewports

Ensure .td-sidebar__search .td-search shrinks flexibly with min-width: 0 and flex: 1 1 auto, set .td-sidebar__toggle to flex: 0 0 auto, and apply symmetric mobile padding and clear negative margins on .td-sidebar-nav to prevent horizontal overflow on mobile viewports.

Fixes #1366

Signed-off-by: Yashi <yashi.singhal410@gmail.com>
---
 .../scss/_resizable-bootstrap-overrides.scss  | 11 +++++++-
 assets/scss/_search_project.scss              | 26 +++++++++++++++++++
 assets/scss/_styles_project.scss              |  2 ++
 3 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/assets/scss/_resizable-bootstrap-overrides.scss b/assets/scss/_resizable-bootstrap-overrides.scss
index a385b0f20769..7f6fc4eebe57 100644
--- a/assets/scss/_resizable-bootstrap-overrides.scss
+++ b/assets/scss/_resizable-bootstrap-overrides.scss
@@ -72,7 +72,16 @@
 
   /* Inner + aside follow the auto height instead of the desktop 100vh. */
   [data-resizable-key="sidebar"] .resizable__inner { height: auto; overflow: visible; }
-  [data-resizable-key="sidebar"] .td-sidebar { height: auto; }
+  [data-resizable-key="sidebar"] .td-sidebar {
+    height: auto;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
+  }
+
+  .td-sidebar-nav {
+    margin-left: 0;
+    margin-right: 0;
+  }
 
   .row > main {
     flex: 1 1 100%;
diff --git a/assets/scss/_search_project.scss b/assets/scss/_search_project.scss
index b4a06bd04ad4..574373da7f8c 100644
--- a/assets/scss/_search_project.scss
+++ b/assets/scss/_search_project.scss
@@ -85,6 +85,32 @@
   }
 }
 
+.td-sidebar {
+  .td-sidebar__search {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
+
+    .td-search {
+      flex: 1 1 auto;
+      min-width: 0;
+      width: auto;
+      max-width: 100%;
+    }
+
+    .td-search__input {
+      width: 100%;
+      min-width: 0;
+    }
+
+    .td-sidebar__toggle {
+      flex: 0 0 auto;
+    }
+  }
+}
+
 // Offline search
 
 .td-search--offline {
diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss
index 5a198aa647e3..1fbd550ffc12 100644
--- a/assets/scss/_styles_project.scss
+++ b/assets/scss/_styles_project.scss
@@ -226,6 +226,8 @@ a:not([href]):not([class]):hover {
     height: auto;
     top: 0;
     padding-top: 0;
+    padding-left: 0.75rem;
+    padding-right: 0.75rem;
   }
 }
 

From 5d58f69fec7d0c064b85a45f6eebf035ea8b5aab Mon Sep 17 00:00:00 2001
From: Yashi <yashi.singhal410@gmail.com>
Date: Sat, 31 Oct 2026 19:00:22 +0530
Subject: [PATCH 2/2] fix(ui): scope sidebar search flex rules to mobile
 viewports

Wrap .td-sidebar__search flexbox rules in @media (max-width: 991.98px) to align with below-lg mobile scoping and avoid modifying desktop search styles.

Signed-off-by: Yashi <yashi.singhal410@gmail.com>
---
 assets/scss/_search_project.scss | 40 +++++++++++++++++---------------
 1 file changed, 21 insertions(+), 19 deletions(-)

diff --git a/assets/scss/_search_project.scss b/assets/scss/_search_project.scss
index 574373da7f8c..cb9668aab890 100644
--- a/assets/scss/_search_project.scss
+++ b/assets/scss/_search_project.scss
@@ -85,28 +85,30 @@
   }
 }
 
-.td-sidebar {
-  .td-sidebar__search {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    max-width: 100%;
-    box-sizing: border-box;
-
-    .td-search {
-      flex: 1 1 auto;
-      min-width: 0;
-      width: auto;
+@media (max-width: 991.98px) {
+  .td-sidebar {
+    .td-sidebar__search {
+      display: flex;
+      align-items: center;
+      width: 100%;
       max-width: 100%;
-    }
+      box-sizing: border-box;
 
-    .td-search__input {
-      width: 100%;
-      min-width: 0;
-    }
+      .td-search {
+        flex: 1 1 auto;
+        min-width: 0;
+        width: auto;
+        max-width: 100%;
+      }
 
-    .td-sidebar__toggle {
-      flex: 0 0 auto;
+      .td-search__input {
+        width: 100%;
+        min-width: 0;
+      }
+
+      .td-sidebar__toggle {
+        flex: 0 0 auto;
+      }
     }
   }
 }