Improve sidebar wrapping and GitHub link

Author: sanbuphy

docs/.vitepress/config.mts

@@ -4,6 +4,7 @@ import { withMermaid } from "vitepress-plugin-mermaid";
 
 const docsBase = "/learn-harness-engineering/";
 const brandLogo = 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23D95C41" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><line x1="12.1" y1="11.9" x2="18.9" y2="8.2" /><line x1="12.1" y1="12.1" x2="20.3" y2="12.9" /><line x1="12.2" y1="12.4" x2="16.6" y2="19.1" /><line x1="11.8" y1="12.4" x2="7.3" y2="19.2" /><line x1="11.9" y1="12.1" x2="3.7" y2="13.3" /><line x1="11.8" y1="11.7" x2="7.8" y2="4.4" /></svg>';
+const githubRepoTreeLink = "https://github.com/walkinglabs/learn-harness-engineering/tree/main";
 
 const zhLectureItems = [
   { text: "欢迎", link: "/zh/" },
@@ -92,7 +93,7 @@ export default withMermaid(
       search: {
         provider: "local"
       },
-      socialLinks: [{ icon: "github", link: "https://github.com/walkinglabs/learn-harness-engineering" }]
+      socialLinks: [{ icon: "github", link: githubRepoTreeLink }]
     },
     markdown: {
       theme: {
@@ -132,7 +133,7 @@ export default withMermaid(
             '/en/resources/': [{ text: "Resource Library", items: enResourceItems }],
             '/en/': [{ text: "Lectures", items: enLectureItems }]
           },
-          socialLinks: [{ icon: "github", link: "https://github.com/walkinglabs/learn-harness-engineering" }]
+          socialLinks: [{ icon: "github", link: githubRepoTreeLink }]
         }
       },
       zh: {
@@ -166,7 +167,7 @@ export default withMermaid(
           darkModeSwitchLabel: "主题",
           lightModeSwitchTitle: "切换到浅色模式",
           darkModeSwitchTitle: "切换到深色模式",
-          socialLinks: [{ icon: "github", link: "https://github.com/walkinglabs/learn-harness-engineering" }]
+          socialLinks: [{ icon: "github", link: githubRepoTreeLink }]
         }
       }
     }

docs/.vitepress/theme/style.css

@@ -20,6 +20,7 @@
   --vp-c-brand-soft: rgba(217, 92, 65, 0.1);
 
   /* Sidebar */
+  --vp-sidebar-width: 296px;
   --vp-sidebar-bg-color: #F4F3EE;
   --vp-c-divider: rgba(0, 0, 0, 0.08);
 
@@ -210,6 +211,9 @@
 
 /* ---------- Sidebar ---------- */
 .VPSidebar {
+  width: min(360px, calc(100vw - 24px));
+  max-width: calc(100vw - 24px);
+  padding: 28px 24px 96px;
   background-color: var(--vp-sidebar-bg-color) !important;
   border-right: 1px solid var(--vp-c-divider) !important;
 }
@@ -222,6 +226,7 @@
 
 .VPSidebar .VPSidebarItem .item .link {
   position: relative;
+  align-items: flex-start;
   border-radius: 8px !important;
   transition: background-color 0.2s, color 0.2s;
   color: var(--vp-c-text-2) !important;
@@ -230,6 +235,12 @@
   margin: 2px 0;
 }
 
+.VPSidebar .VPSidebarItem .item .text {
+  line-height: 1.55;
+  text-wrap: pretty;
+  line-break: loose;
+}
+
 .VPSidebar .VPSidebarItem .item .link:hover {
   color: var(--vp-c-text-1) !important;
   background-color: rgba(0, 0, 0, 0.04) !important;