site: fix home page horizontal scrollbar (ant-design#48804)

* site: fix home page horizontal scrollbar * Update .dumi/theme/slots/Header/index.tsx Co-authored-by: lijianan <[email protected]> Signed-off-by: afc163 <[email protected]> --------- Signed-off-by: afc163 <[email protected]> Co-authored-by: lijianan <[email protected]>
SongYeongEng · May 8, 2024 · 4384984 · 4384984
1 parent 3701f0a
commit 4384984
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 12 deletions.
diff --git a/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx b/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx
@@ -31,7 +31,7 @@ const useStyle = createStyles(({ token, css }) => ({
   history: css`
     position: absolute;
     top: 0;
-    inset-inline-end: 0;
+    inset-inline-end: ${token.marginXS}px;
   `,
 
   li: css`

diff --git a/.dumi/theme/common/Link.tsx b/.dumi/theme/common/Link.tsx
@@ -10,6 +10,8 @@ export interface LinkProps {
   onClick?: MouseEventHandler;
 }
 
+nprogress.configure({ showSpinner: false });
+
 const Link = forwardRef<HTMLAnchorElement, React.PropsWithChildren<LinkProps>>((props, ref) => {
   const { to, children, ...rest } = props;
   const [isPending, startTransition] = useTransition();

diff --git a/.dumi/theme/slots/Header/index.tsx b/.dumi/theme/slots/Header/index.tsx
@@ -54,12 +54,11 @@ const useStyle = createStyles(({ token, css }) => {
         border: none;
       }
 
-      .nav-search-wrapper {
-        display: flex;
-        flex: auto;
-      }
-
       .dumi-default-search-bar {
+        display: inline-flex;
+        align-items: center;
+        flex: auto;
+        margin: 0;
         border-inline-start: 1px solid rgba(0, 0, 0, 0.06);
 
         > svg {
@@ -70,6 +69,7 @@ const useStyle = createStyles(({ token, css }) => {
         > input {
           height: 22px;
           border: 0;
+          max-width: calc(100vw - 768px);
 
           &:focus {
             box-shadow: none;
@@ -85,6 +85,9 @@ const useStyle = createStyles(({ token, css }) => {
           background-color: rgba(150, 150, 150, 0.06);
           border-color: rgba(100, 100, 100, 0.2);
           border-radius: ${token.borderRadiusSM}px;
+          position: static;
+          top: unset;
+          transform: unset;
         }
 
         .dumi-default-search-popover {
@@ -103,12 +106,11 @@ const useStyle = createStyles(({ token, css }) => {
       align-items: center;
       margin: 0;
       column-gap: ${token.paddingSM}px;
+      padding-inline-end: ${token.padding}px;
+
       > * {
         flex: none;
         margin: 0;
-        &:last-child {
-          margin-inline-end: 40px;
-        }
       }
     `,
     dataDirectionIcon: css`
@@ -405,11 +407,11 @@ const Header: React.FC = () => {
         <Col {...colProps[0]}>
           <Logo {...sharedProps} location={location} />
         </Col>
-        <Col {...colProps[1]} className={styles.menuRow}>
-          <div className="nav-search-wrapper">
+        <Col {...colProps[1]}>
+          <div className={styles.menuRow}>
             <DumiSearchBar />
+            {!isMobile && menu}
           </div>
-          {!isMobile && menu}
         </Col>
       </Row>
     </header>