From 973e0ea3f506a702264a0c74d589c880ea2ffdf2 Mon Sep 17 00:00:00 2001
From: Haitao Pan <manbuzhe2009@qq.com>
Date: Tue, 11 Nov 2025 13:13:00 +0800
Subject: [PATCH] refactor: adjust layout dimensions for consistent width and
 height
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### Changes:
1. **Hero Section Layout** (commonHome.tsx)
   - Changed `lg:items-start` → `lg:items-stretch` for equal height alignment
   - Added `min-h-full` to hero content column for full height
   - Ensures Sidebar height matches ProductMatrix height

2. **Content Section Layout** (commonHome.tsx)
   - When Sidebar present, uses matching grid structure from hero section
   - Grid: `grid-cols-[minmax(0,1fr)_360px]` (same as hero)
   - Content slots span full width with hidden spacer for visual balance
   - CommunityFeed now matches total width of (ProductMatrix + Sidebar)

3. **Sidebar Component** (Sidebar.tsx)
   - Added `h-full` and `flex flex-col` for full height support
   - Maintains sticky positioning while filling available space

4. **HomepageLanding** (page.tsx)
   - Applied same height adjustment: `lg:items-stretch` + `min-h-full`
   - Consistent with template version layout

### Result:
- Sidebar height = Hero section height (full height alignment)
- CommunityFeed width = ProductMatrix width + Sidebar width
- Visual consistency across hero and content sections
- Both homepage versions (template and direct) have identical layout

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 dashboard/src/components/home/Sidebar.tsx     |  2 +-
 dashboard/src/modules/homepage/page.tsx       |  4 +-
 .../modules/templates/layouts/commonHome.tsx  | 75 +++++++++++++------
 3 files changed, 57 insertions(+), 24 deletions(-)

diff --git a/dashboard/src/components/home/Sidebar.tsx b/dashboard/src/components/home/Sidebar.tsx
index a27c733..867cc6e 100644
--- a/dashboard/src/components/home/Sidebar.tsx
+++ b/dashboard/src/components/home/Sidebar.tsx
@@ -75,7 +75,7 @@ export default function Sidebar() {
   const data = sidebarContent[language]
 
   return (
-    <aside className="w-full space-y-6 rounded-2xl border border-brand-border bg-white p-6 text-brand-heading shadow-[0_4px_20px_rgba(0,0,0,0.04)] lg:sticky lg:top-0 lg:h-fit lg:w-[360px]">
+    <aside className="flex h-full w-full flex-col space-y-6 rounded-2xl border border-brand-border bg-white p-6 text-brand-heading shadow-[0_4px_20px_rgba(0,0,0,0.04)] lg:sticky lg:top-0 lg:h-fit lg:w-[360px]">
       {data.sections.map((section) => (
         <div key={section.slug} className="space-y-3">
           <h3 className="text-sm font-semibold text-slate-900">{section.title}</h3>
diff --git a/dashboard/src/modules/homepage/page.tsx b/dashboard/src/modules/homepage/page.tsx
index 8c35bf4..8bb39b0 100644
--- a/dashboard/src/modules/homepage/page.tsx
+++ b/dashboard/src/modules/homepage/page.tsx
@@ -79,8 +79,8 @@ export default function Homepage() {
       <section className="relative isolate overflow-hidden border-b border-slate-200 bg-white/90 py-20 shadow-sm sm:py-28">
         <div aria-hidden className="pointer-events-none absolute inset-x-0 top-0 mx-auto h-64 max-w-5xl rounded-full bg-gradient-to-r from-sky-50 via-indigo-50 to-sky-50 blur-3xl" />
         <div className={clsx('relative', designTokens.layout.container)}>
-          <div className="grid gap-14 lg:grid-cols-[minmax(0,1fr)_360px] lg:items-start">
-            <div className="space-y-8">
+          <div className="grid gap-14 lg:grid-cols-[minmax(0,1fr)_360px] lg:items-stretch">
+            <div className="min-h-full space-y-8">
               <span className="inline-flex w-fit items-center rounded-full border border-slate-200 bg-slate-50/70 px-4 py-1 text-xs font-semibold uppercase tracking-[0.28em] text-slate-500">
                 {content.eyebrow}
               </span>
diff --git a/dashboard/src/modules/templates/layouts/commonHome.tsx b/dashboard/src/modules/templates/layouts/commonHome.tsx
index ad1a3b4..8a49a7c 100644
--- a/dashboard/src/modules/templates/layouts/commonHome.tsx
+++ b/dashboard/src/modules/templates/layouts/commonHome.tsx
@@ -64,6 +64,8 @@ export function createCommonHomeTemplate(
       | ComponentType<any>
       | undefined
 
+    const hasSidebar = Boolean(SidebarComponent)
+
     return (
       <main className={clsx(config.rootClassName)}>
         <section className={clsx(config.hero.sectionClassName)}>
@@ -71,8 +73,8 @@ export function createCommonHomeTemplate(
           <div className={clsx(config.hero.containerClassName)}>
             <div className={clsx(config.hero.contentClassName)}>
               {SidebarComponent ? (
-                <div className="grid gap-14 lg:grid-cols-[minmax(0,1fr)_360px] lg:items-start">
-                  <div>{heroContent}</div>
+                <div className="grid gap-14 lg:grid-cols-[minmax(0,1fr)_360px] lg:items-stretch">
+                  <div className="min-h-full">{heroContent}</div>
                   <div className="lg:sticky lg:top-0 lg:h-fit lg:w-[360px]">
                     <SidebarComponent />
                   </div>
@@ -89,29 +91,60 @@ export function createCommonHomeTemplate(
           {renderOverlays(config.content.overlays)}
           <div className={clsx(config.content.containerClassName)}>
             <div className={clsx(config.content.contentClassName)}>
-              <div className={clsx(config.content.gridClassName)}>
-                {config.content.slots.map((slotConfig) => {
-                  const SlotComponent = (slots[slotConfig.key] ?? fallbacks[slotConfig.key]) as
-                    | ComponentType<any>
-                    | undefined
+              {hasSidebar ? (
+                // Match hero section grid width for consistent layout
+                <div className="grid gap-8 lg:grid-cols-[minmax(0,1fr)_360px] lg:gap-12">
+                  <div className="lg:col-span-1">
+                    {config.content.slots.map((slotConfig) => {
+                      const SlotComponent = (slots[slotConfig.key] ?? fallbacks[slotConfig.key]) as
+                        | ComponentType<any>
+                        | undefined
 
-                  if (!SlotComponent) {
-                    return null
-                  }
+                      if (!SlotComponent) {
+                        return null
+                      }
 
-                  const slotElement = <SlotComponent {...(slotConfig.props ?? {})} />
+                      const slotElement = <SlotComponent {...(slotConfig.props ?? {})} />
 
-                  if (slotConfig.wrapperClassName) {
-                    return (
-                      <div key={slotConfig.key} className={clsx(slotConfig.wrapperClassName)}>
-                        {slotElement}
-                      </div>
-                    )
-                  }
+                      if (slotConfig.wrapperClassName) {
+                        return (
+                          <div key={slotConfig.key} className={clsx(slotConfig.wrapperClassName)}>
+                            {slotElement}
+                          </div>
+                        )
+                      }
 
-                  return <Fragment key={slotConfig.key}>{slotElement}</Fragment>
-                })}
-              </div>
+                      return <Fragment key={slotConfig.key}>{slotElement}</Fragment>
+                    })}
+                  </div>
+                  {/* Spacer to match hero section width */}
+                  <div className="hidden lg:block" />
+                </div>
+              ) : (
+                <div className={clsx(config.content.gridClassName)}>
+                  {config.content.slots.map((slotConfig) => {
+                    const SlotComponent = (slots[slotConfig.key] ?? fallbacks[slotConfig.key]) as
+                      | ComponentType<any>
+                      | undefined
+
+                    if (!SlotComponent) {
+                      return null
+                    }
+
+                    const slotElement = <SlotComponent {...(slotConfig.props ?? {})} />
+
+                    if (slotConfig.wrapperClassName) {
+                      return (
+                        <div key={slotConfig.key} className={clsx(slotConfig.wrapperClassName)}>
+                          {slotElement}
+                        </div>
+                      )
+                    }
+
+                    return <Fragment key={slotConfig.key}>{slotElement}</Fragment>
+                  })}
+                </div>
+              )}
             </div>
           </div>
         </section>