refactor: improve min-height and no-sidebar mode for content (#1794)

* refactor: remove content wrapper when disable sidebar

* refactor: improve min-height for page content

* refactor: correct dark border color for rtl switch

* refactor: improve dark mode color for horizontal line

* refactor: improve padding for rtl switch

* docs: improve header extra styles

.dumi/theme/slots/HeaderExtra/index.less

@@ -0,0 +1,16 @@
+@import (reference) '../../../../theme-default/styles/variables.less';
+
+.@{prefix}-lang-select.dumi-version-select {
+  border-inline-start: 1px solid @c-border;
+  margin-inline-start: 15px;
+  padding-inline-start: 5px;
+
+  @{dark-selector} & {
+    border-inline-start-color: @c-border-dark;
+  }
+
+  > select {
+    padding-top: 1px;
+    padding-bottom: 1px;
+  }
+}

.dumi/theme/slots/HeaderExtra/index.tsx

@@ -1,18 +1,11 @@
 import { ReactComponent as IconDown } from '@ant-design/icons-svg/inline-svg/outlined/down.svg';
 import React, { type FC } from 'react';
+import './index.less';
 
 const HeaderExtra: FC = () => {
   return (
-    <div
-      className="dumi-default-lang-select"
-      style={{
-        borderInlineStart: '1px solid #d0d5d8',
-        marginInlineStart: 15,
-        paddingInlineStart: 5,
-      }}
-    >
+    <div className="dumi-default-lang-select dumi-version-select">
       <select
-        style={{ paddingTop: 1, paddingBottom: 1 }}
         value={process.env.DUMI_VERSION}
         onChange={(e) => {
           if (e.target.value !== process.env.DUMI_VERSION) {

src/client/theme-default/layouts/DocLayout/index.tsx

@@ -92,7 +92,7 @@ const DocLayout: FC = () => {
       <main>
         {showSidebar && <Sidebar />}
         <Content>
-          {outlet}
+          <article>{outlet}</article>
           <Footer />
         </Content>
         {fm.toc === 'content' && (

src/client/theme-default/slots/Content/index.less

@@ -139,10 +139,21 @@
       visibility: hidden;
     }
   }
+
+  // horizontal line
+  hr {
+    background-color: @c-border-light;
+
+    @{dark-selector} & {
+      background-color: @c-border-less-dark;
+    }
+  }
 }
 
 .@{prefix}-content {
+  display: flex;
   flex: 1;
+  flex-direction: column;
   min-width: 0;
   max-width: 100%;
   box-sizing: border-box;
@@ -175,12 +186,16 @@
     }
   }
 
+  article {
+    flex: 1;
+  }
+
   .@{prefix}-header + main > &,
   .@{prefix}-doc-layout-mobile-bar + main > & {
     min-height: calc(100vh - @s-header-height);
 
     @media @mobile {
-      min-height: calc(100vh - @s-header-height-m);
+      min-height: calc(100vh - @s-header-height-m - 40px);
     }
   }
 

src/client/theme-default/slots/Content/index.tsx

@@ -1,16 +1,17 @@
-import { useSidebarData, useSiteData } from 'dumi';
+import { useRouteMeta, useSidebarData, useSiteData } from 'dumi';
 import React, { type FC, type ReactNode } from 'react';
 import './heti.scss';
 import './index.less';
 
 const Content: FC<{ children: ReactNode }> = (props) => {
   const sidebar = useSidebarData();
   const { themeConfig } = useSiteData();
+  const { frontmatter } = useRouteMeta();
 
   return (
     <div
       className="dumi-default-content"
-      data-no-sidebar={!sidebar || undefined}
+      data-no-sidebar={!sidebar || frontmatter.sidebar === false || undefined}
       data-no-footer={themeConfig.footer === false || undefined}
     >
       {props.children}

src/client/theme-default/slots/RtlSwitch/index.less

@@ -2,6 +2,7 @@
 
 .@{prefix}-rtl-switch {
   height: 16px;
+  padding: 0;
   appearance: none;
   border: 0;
   background-color: transparent;
@@ -13,6 +14,10 @@
     margin-inline-end: -15px;
     padding-inline: 15px;
     border-inline-start: 1px solid @c-border-light;
+
+    @{dark-selector} & {
+      border-inline-start-color: @c-border-less-dark;
+    }
   }
 
   > svg {