[BE][HUD] Enhance navbar responsiveness (#6944)

### Summary

Made navbar responsive to prevent content cutoff at typical laptop
resolutions (~1300-1400px)


---

# Before:

laptop screen:
<img width="1416" height="132" alt="image"
src="https://github.com/user-attachments/assets/cf1ee8b3-0b97-41b1-af3d-dbb51bb6ae34"
/>

shrunk screen:
<img width="794" height="206" alt="image"
src="https://github.com/user-attachments/assets/23d658c8-440e-4a3d-b71b-43f7466d964a"
/>

mobile:
<img width="460" height="432" alt="image"
src="https://github.com/user-attachments/assets/75bfa2a8-4c59-4b50-a6d9-b7e71a0153e1"
/>



# After:

laptop screen:
<img width="1414" height="169" alt="image"
src="https://github.com/user-attachments/assets/b4050b06-dccb-482a-9a00-a54c715e246d"
/>

shrunk screen:
<img width="794" height="182" alt="image"
src="https://github.com/user-attachments/assets/8d372c19-e33b-472f-9a87-dd99a7dcbd58"
/>

mobile:
<img width="407" height="414" alt="image"
src="https://github.com/user-attachments/assets/38f402ad-e53b-42b2-9af5-e23c7b60aab7"
/>

Author: izaitsevfb

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);
@@ -11,10 +11,13 @@
   z-index: 1000;
   backdrop-filter: blur(1px);
   -webkit-backdrop-filter: blur(1px);
+  flex-wrap: wrap;
+  gap: clamp(0.5rem, 2vw, 1.5rem);
+  font-size: clamp(14px, 1vw, 16px);
 }
 
 .navbar li {
-  padding: 0.9rem 1rem;
+  padding: clamp(0.5rem, 0.8vw, 0.7rem) clamp(0.6rem, 1vw, 0.8rem);
   position: relative;
   display: flex;
   align-items: center;
@@ -53,7 +56,7 @@
 }
 
 .dropdowntitle {
-  padding: 0.7rem 1rem;
+  padding: clamp(0.4rem, 0.8vw, 0.6rem) clamp(0.6rem, 1vw, 0.8rem);
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -71,3 +74,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;
+  }
+}

torchci/components/layout/NavBar.tsx

@@ -291,7 +291,7 @@ function NavBar() {
           <li>
             <ThemeModePicker />
           </li>
-          <li style={{ padding: "0 1rem" }}>
+          <li>
             <LoginSection></LoginSection>
           </li>
         </ul>