From 17413978a80f441940fe0b1eb910d7b075d5a8c8 Mon Sep 17 00:00:00 2001
From: Tushar Thakur <171576246+tushar0i@users.noreply.github.com>
Date: Wed, 1 Jul 2026 04:06:59 +0530
Subject: [PATCH] fix(ui): resolve mobile layout arrangement and responsive
 navbar components issues

---
 website/src/css/custom.css | 47 +++++++++++++++++++++++++++++---------
 1 file changed, 36 insertions(+), 11 deletions(-)

diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index 285e1470..88e10424 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -113,7 +113,7 @@ body {
   width: calc(100% - 2rem);
   margin: 0 auto;
   min-height: 3.6rem;
-  padding: 0 0.75rem 0 0;
+  padding: 0 0.75rem 0 0.25rem;
   border: 1px solid rgba(183, 212, 255, 0.22);
   border-radius: 0.95rem;
   background: linear-gradient(95deg, rgba(8, 22, 44, 0.9), rgba(6, 20, 41, 0.76));
@@ -126,9 +126,9 @@ body {
 }
 
 .navbar__brand {
-  display: inline-flex;
+  display: flex;
+  flex: none;
   align-items: center;
-  align-self: stretch;
   margin-right: 1.25rem;
   padding: 0 0.9rem;
   border-radius: 0.85rem 0 0 0.85rem;
@@ -802,9 +802,11 @@ body {
     width: calc(100% - 1rem);
     min-height: 3.25rem;
     padding-right: 0.55rem;
+    padding-left: 0.55rem;
   }
 
   .navbar__brand {
+    max-width: 45vw;
     margin-right: 0.6rem;
     padding: 0 0.65rem;
   }
@@ -817,6 +819,10 @@ body {
     padding-inline: 0.45rem;
   }
 
+  .navbar-icon-link {
+    display: none;
+  }
+
   .navbar-owasp-badge span {
     display: none;
   }
@@ -906,6 +912,11 @@ body {
     padding-right: 0;
   }
 
+  /* hide Docusaurus search hint on narrow viewports */
+  [class*='searchHint_'] {
+    display: none;
+  }
+
   .site-shell {
     padding-top: 2.2rem;
   }
@@ -948,6 +959,27 @@ body {
   }
 }
 
+@media (max-width: 640px) {
+  .dependabot-callout .callout-banner {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
+@media (max-width: 480px) {
+  .press-bar {
+    flex-direction: column;
+  }
+
+  .command-stack {
+    display: flex;
+    flex-direction: column;
+    min-width: 100%;
+    white-space: pre-wrap;
+    overflow-x: auto;
+  }
+}
+
 /* Mermaid edge label padding */
 .edgeLabel .label {
   background-color: #1b2434 !important;
@@ -985,11 +1017,4 @@ body {
 
 .callout-banner-copy {
   flex: 1;
-}
-
-@media (max-width: 640px) {
-  .dependabot-callout .callout-banner {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-}
+}
\ No newline at end of file