From 50762ff9a485d31533fdd1373c3cc21fac5dcec6 Mon Sep 17 00:00:00 2001
From: Ivan Zaitsev <ivanzaitsev@fb.com>
Date: Fri, 18 Jul 2025 15:42:17 -0700
Subject: [PATCH 1/2] [BE][HUD] Enhance navbar responsiveness

---
 torchci/components/layout/NavBar.module.css | 22 +++++++++++++++++++--
 torchci/components/layout/NavBar.tsx        |  2 +-
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/torchci/components/layout/NavBar.module.css b/torchci/components/layout/NavBar.module.css
index 5ce127091b..eb6a39d91f 100644
--- a/torchci/components/layout/NavBar.module.css
+++ b/torchci/components/layout/NavBar.module.css
@@ -11,10 +11,12 @@
   z-index: 1000;
   backdrop-filter: blur(1px);
   -webkit-backdrop-filter: blur(1px);
+  flex-wrap: wrap;
+  gap: 1rem;
 }
 
 .navbar li {
-  padding: 0.9rem 1rem;
+  padding: 0.7rem 0.8rem;
   position: relative;
   display: flex;
   align-items: center;
@@ -53,7 +55,7 @@
 }
 
 .dropdowntitle {
-  padding: 0.7rem 1rem;
+  padding: 0.6rem 0.8rem;
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -71,3 +73,19 @@
   display: none;
   border-radius: 4px;
 }
+
+/* Responsive wrapping */
+@media screen and (max-width: 1350px) {
+  .navbar > div:first-child {
+    width: 100%;
+    margin-bottom: 0.5rem;
+  }
+
+  .navbar > div:last-child {
+    width: 100%;
+  }
+
+  .navbarlinkslist {
+    flex-wrap: wrap;
+  }
+}
diff --git a/torchci/components/layout/NavBar.tsx b/torchci/components/layout/NavBar.tsx
index c5fb081a27..5cb6c41833 100644
--- a/torchci/components/layout/NavBar.tsx
+++ b/torchci/components/layout/NavBar.tsx
@@ -291,7 +291,7 @@ function NavBar() {
           <li>
             <ThemeModePicker />
           </li>
-          <li style={{ padding: "0 1rem" }}>
+          <li>
             <LoginSection></LoginSection>
           </li>
         </ul>

From c399582a68b8bd74aa980d9d9c736e07fcdd0ef4 Mon Sep 17 00:00:00 2001
From: Ivan Zaitsev <ivanzaitsev@fb.com>
Date: Fri, 18 Jul 2025 16:46:07 -0700
Subject: [PATCH 2/2] + dynamic scaling

---
 torchci/components/layout/NavBar.module.css | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/torchci/components/layout/NavBar.module.css b/torchci/components/layout/NavBar.module.css
index eb6a39d91f..37ba56b31e 100644
--- a/torchci/components/layout/NavBar.module.css
+++ b/torchci/components/layout/NavBar.module.css
@@ -1,6 +1,6 @@
 .navbar {
   display: flex;
-  padding: 0 1rem;
+  padding: 0 clamp(0.5rem, 1vw, 1rem);
   font: bold;
   background: var(--navbar-bg);
   box-shadow: var(--navbar-shadow);
@@ -12,11 +12,12 @@
   backdrop-filter: blur(1px);
   -webkit-backdrop-filter: blur(1px);
   flex-wrap: wrap;
-  gap: 1rem;
+  gap: clamp(0.5rem, 2vw, 1.5rem);
+  font-size: clamp(14px, 1vw, 16px);
 }
 
 .navbar li {
-  padding: 0.7rem 0.8rem;
+  padding: clamp(0.5rem, 0.8vw, 0.7rem) clamp(0.6rem, 1vw, 0.8rem);
   position: relative;
   display: flex;
   align-items: center;
@@ -55,7 +56,7 @@
 }
 
 .dropdowntitle {
-  padding: 0.6rem 0.8rem;
+  padding: clamp(0.4rem, 0.8vw, 0.6rem) clamp(0.6rem, 1vw, 0.8rem);
   cursor: pointer;
   display: flex;
   align-items: center;