From 4a3d7681d6772eabde1c7b0d8d310c9dae135811 Mon Sep 17 00:00:00 2001
From: Ivan Li <ivanli2048@gmail.com>
Date: Tue, 8 Jul 2025 03:19:06 +0800
Subject: [PATCH] Fix layout spacing issues in LED strip configuration

- Remove forced height expansion from display configuration panel
- Change layout from flex-based to space-based for natural content sizing
- Eliminate large empty spaces between configuration sections
- Improve overall UI compactness and visual flow
---
 src/App.tsx                                   |  8 +-
 .../display-list-container.tsx                |  2 +-
 .../led-strip-configuration.tsx               | 78 ++++++++++---------
 3 files changed, 45 insertions(+), 43 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 8adca6d..f2d812b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -46,9 +46,9 @@ function App() {
   });
 
   return (
-    <div class="min-h-screen bg-base-100" data-theme="dark">
+    <div class="h-screen bg-base-100 flex flex-col" data-theme="dark">
       {/* Fixed Navigation */}
-      <div class="navbar bg-base-200 shadow-lg fixed top-0 left-0 right-0 z-50">
+      <div class="navbar bg-base-200 shadow-lg flex-shrink-0 z-50">
         <div class="navbar-start">
           <div class="dropdown dropdown-hover">
             <div tabindex="0" role="button" class="btn btn-ghost lg:hidden" onClick={(e) => e.currentTarget.focus()}>
@@ -80,8 +80,8 @@ function App() {
         </div>
       </div>
 
-      {/* Main Content with top padding to account for fixed navbar */}
-      <main class="container mx-auto px-2 sm:px-4 py-4 pt-20 max-w-full overflow-x-auto">
+      {/* Main Content - fills remaining height */}
+      <main class="flex-1 container mx-auto px-2 sm:px-4 py-4 max-w-full overflow-x-auto min-h-0">
         <Routes>
           <Route path="/info" component={InfoIndex} />
           <Route path="/displays" component={DisplayStateIndex} />
diff --git a/src/components/led-strip-configuration/display-list-container.tsx b/src/components/led-strip-configuration/display-list-container.tsx
index e0fb3a2..fa9075f 100644
--- a/src/components/led-strip-configuration/display-list-container.tsx
+++ b/src/components/led-strip-configuration/display-list-container.tsx
@@ -75,7 +75,7 @@ export const DisplayListContainer: ParentComponent = (props) => {
   createEffect(() => {});
 
   return (
-    <section ref={root!} class="relative bg-gray-400/30" style={rootStyle()}>
+    <section ref={root!} class="relative bg-gray-400/30 h-full w-full" style={rootStyle()}>
       <ol class="absolute" style={olStyle()}>
         {props.children}
       </ol>
diff --git a/src/components/led-strip-configuration/led-strip-configuration.tsx b/src/components/led-strip-configuration/led-strip-configuration.tsx
index d9b05d7..9ec2e83 100644
--- a/src/components/led-strip-configuration/led-strip-configuration.tsx
+++ b/src/components/led-strip-configuration/led-strip-configuration.tsx
@@ -116,50 +116,52 @@ export const LedStripConfiguration = () => {
       </div>
 
       <LedStripConfigurationContext.Provider value={ledStripConfigurationContextValue}>
-        {/* LED Strip Sorter Panel */}
-        <div class="card bg-base-200 shadow-lg">
-          <div class="card-body p-3">
-            <div class="card-title text-sm mb-2">
-              <span>灯条排序</span>
-              <div class="badge badge-info badge-outline text-xs">实时预览</div>
-            </div>
-            <LedStripPartsSorter />
-            <div class="text-xs text-base-content/50 mt-2">
-              💡 提示：拖拽灯条段落来调整顺序，双击可反转方向
+        <div class="space-y-4">
+          {/* LED Strip Sorter Panel */}
+          <div class="card bg-base-200 shadow-lg">
+            <div class="card-body p-3">
+              <div class="card-title text-sm mb-2">
+                <span>灯条排序</span>
+                <div class="badge badge-info badge-outline text-xs">实时预览</div>
+              </div>
+              <LedStripPartsSorter />
+              <div class="text-xs text-base-content/50 mt-2">
+                💡 提示：拖拽灯条段落来调整顺序，双击可反转方向
+              </div>
             </div>
           </div>
-        </div>
 
-        {/* Display Configuration Panel */}
-        <div class="card bg-base-200 shadow-lg">
-          <div class="card-body p-3">
-            <div class="card-title text-sm mb-2">
-              <span>显示器配置</span>
-              <div class="badge badge-secondary badge-outline text-xs">可视化编辑</div>
-            </div>
-            <div class="h-80 mb-3">
-              <DisplayListContainer>
-                {displayStore.displays.map((display) => (
-                  <DisplayView display={display} />
-                ))}
-              </DisplayListContainer>
-            </div>
-            <div class="text-xs text-base-content/50">
-              💡 提示：悬停显示器查看详细信息，使用下方控制面板调整LED数量
+          {/* Display Configuration Panel - Auto height based on content */}
+          <div class="card bg-base-200 shadow-lg">
+            <div class="card-body p-3">
+              <div class="card-title text-sm mb-2">
+                <span>显示器配置</span>
+                <div class="badge badge-secondary badge-outline text-xs">可视化编辑</div>
+              </div>
+              <div class="mb-3">
+                <DisplayListContainer>
+                  {displayStore.displays.map((display) => (
+                    <DisplayView display={display} />
+                  ))}
+                </DisplayListContainer>
+              </div>
+              <div class="text-xs text-base-content/50">
+                💡 提示：悬停显示器查看详细信息，使用下方控制面板调整LED数量
+              </div>
             </div>
           </div>
-        </div>
 
-        {/* LED Count Control Panels */}
-        <div class="space-y-3">
-          <div class="flex items-center gap-2 mb-2">
-            <h2 class="text-base font-semibold text-base-content">LED数量控制</h2>
-            <div class="badge badge-info badge-outline text-xs">实时调整</div>
-          </div>
-          <div class="led-control-grid">
-            {displayStore.displays.map((display) => (
-              <LedCountControlPanel display={display} />
-            ))}
+          {/* LED Count Control Panels */}
+          <div class="flex-shrink-0">
+            <div class="flex items-center gap-2 mb-2">
+              <h2 class="text-base font-semibold text-base-content">LED数量控制</h2>
+              <div class="badge badge-info badge-outline text-xs">实时调整</div>
+            </div>
+            <div class="led-control-grid">
+              {displayStore.displays.map((display) => (
+                <LedCountControlPanel display={display} />
+              ))}
+            </div>
           </div>
         </div>
       </LedStripConfigurationContext.Provider>