(answer) branch test updated: fix: Fixed-layout navigation aligns with the width of the main content.

[shuai]

This is an automated email from the ASF dual-hosted git repository.

shuai pushed a commit to branch test
in repository https://gitbox.apache.org/repos/asf/answer.git


The following commit(s) were added to refs/heads/test by this push:
     new d7d692bb fix: Fixed-layout navigation aligns with the width of the 
main content.
d7d692bb is described below

commit d7d692bb37f2d83b49a2466800eddf4aade7f94e
Author: shuai <lishuail...@sifou.com>
AuthorDate: Wed Dec 31 15:37:38 2025 +0800

    fix: Fixed-layout navigation aligns with the width of the main content.
---
 ui/src/components/Header/index.scss | 21 +++++++++++++++++++++
 ui/src/components/Header/index.tsx  |  4 ++--
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/ui/src/components/Header/index.scss 
b/ui/src/components/Header/index.scss
index f1df512d..e9536b08 100644
--- a/ui/src/components/Header/index.scss
+++ b/ui/src/components/Header/index.scss
@@ -30,6 +30,11 @@
     max-height: 2rem;
   }
 
+  .fixed-width {
+    padding-left: 28px;
+    padding-right: 36px;
+  }
+
   .create-icon {
     color: var(--bs-nav-link-color);
   }
@@ -120,6 +125,9 @@
 
 @media (max-width: 1199.9px) {
   #header {
+    .fixed-width {
+      padding-right: 48px;
+    }
     .nav-grow {
       flex-grow: 1 !important;
     }
@@ -134,8 +142,21 @@
   }
 }
 
+@media screen and (max-width: 991px) {
+  #header {
+    .fixed-width {
+      padding-left: 40px;
+      padding-right: 48px;
+    }
+  }
+}
+
 @media screen and (max-width: 767px) {
   #header {
+    .fixed-width {
+      padding-left: 1.5rem;
+      padding-right: 1.5rem;
+    }
     .nav-text {
       flex: 1;
       white-space: nowrap;
diff --git a/ui/src/components/Header/index.tsx 
b/ui/src/components/Header/index.tsx
index 4e9c8189..22aad5aa 100644
--- a/ui/src/components/Header/index.tsx
+++ b/ui/src/components/Header/index.tsx
@@ -115,8 +115,8 @@ const Header: FC = () => {
       id="header">
       <div
         className={classnames(
-          'w-100 d-flex align-items-center px-3',
-          layout === 'Fixed-width' ? 'container-xxl' : '',
+          'w-100 d-flex align-items-center',
+          layout === 'Fixed-width' ? 'container-xxl fixed-width' : 'px-3',
         )}>
         <Navbar.Toggle
           className="answer-navBar me-2"