From 2834b7fe57b1c5f59cca8fd873fe21ff86c2d724 Mon Sep 17 00:00:00 2001
From: Ivan Li <ivanli2048@gmail.com>
Date: Tue, 8 Jul 2025 03:02:24 +0800
Subject: [PATCH] Optimize responsive layout for LED count control interface

- Improve grid layout responsiveness from md:grid-cols-2 to lg:grid-cols-2
- Add responsive LED control items with grid-cols-2 sm:grid-cols-4
- Reduce padding and spacing for better small window display
- Optimize button and input sizes with compact styling
- Add custom CSS for small screen handling (<640px and <600px)
- Implement auto-fit grid layout with minmax(280px, 1fr)
- Enhance main container with overflow-x-auto and responsive padding
- Reduce overall page spacing and card body padding for compact display
---
 src/App.tsx                                   |  2 +-
 .../led-count-control-panel.tsx               | 22 ++++++------
 .../led-strip-configuration.tsx               | 34 +++++++++----------
 src/styles.css                                | 24 ++++++++++++-
 4 files changed, 52 insertions(+), 30 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 1351d7e..8adca6d 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -81,7 +81,7 @@ function App() {
       </div>
 
       {/* Main Content with top padding to account for fixed navbar */}
-      <main class="container mx-auto p-4 pt-20">
+      <main class="container mx-auto px-2 sm:px-4 py-4 pt-20 max-w-full overflow-x-auto">
         <Routes>
           <Route path="/info" component={InfoIndex} />
           <Route path="/displays" component={DisplayStateIndex} />
diff --git a/src/components/led-strip-configuration/led-count-control-panel.tsx b/src/components/led-strip-configuration/led-count-control-panel.tsx
index deb0cb1..3877120 100644
--- a/src/components/led-strip-configuration/led-count-control-panel.tsx
+++ b/src/components/led-strip-configuration/led-count-control-panel.tsx
@@ -95,7 +95,7 @@ const LedCountControlItem: Component<LedCountControlItemProps> = (props) => {
 
   return (
     <div
-      class="card bg-base-100 border border-base-300/50 p-2 transition-all duration-200 cursor-pointer"
+      class="card bg-base-100 border border-base-300/50 p-1.5 transition-all duration-200 cursor-pointer"
       classList={{
         'ring-2 ring-primary bg-primary/20 border-primary':
           stripConfiguration.hoveredStripPart?.border === props.border &&
@@ -111,9 +111,9 @@ const LedCountControlItem: Component<LedCountControlItemProps> = (props) => {
           </span>
         </div>
 
-        <div class="flex items-center gap-1">
+        <div class="flex items-center gap-0.5">
           <button
-            class="btn btn-xs btn-circle btn-outline flex-shrink-0"
+            class="btn btn-xs btn-circle btn-outline flex-shrink-0 min-h-0 h-6 w-6"
             onClick={handleDecrease}
             disabled={!config() || (config()?.len || 0) <= 0}
             title="减少LED数量"
@@ -123,7 +123,7 @@ const LedCountControlItem: Component<LedCountControlItemProps> = (props) => {
 
           <input
             type="number"
-            class="input input-xs flex-1 text-center min-w-0 text-sm font-medium [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+            class="input input-xs flex-1 text-center min-w-0 text-xs font-medium [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none h-6 px-1"
             value={config()?.len || 0}
             min="0"
             max="1000"
@@ -136,7 +136,7 @@ const LedCountControlItem: Component<LedCountControlItemProps> = (props) => {
           />
 
           <button
-            class="btn btn-xs btn-circle btn-outline flex-shrink-0"
+            class="btn btn-xs btn-circle btn-outline flex-shrink-0 min-h-0 h-6 w-6"
             onClick={handleIncrease}
             disabled={!config() || (config()?.len || 0) >= 1000}
             title="增加LED数量"
@@ -147,7 +147,7 @@ const LedCountControlItem: Component<LedCountControlItemProps> = (props) => {
 
         <div class="mt-1">
           <select
-            class="select select-xs w-full text-xs"
+            class="select select-xs w-full text-xs h-6 min-h-0"
             value={config()?.led_type || LedType.RGB}
             onChange={handleLedTypeChange}
             title="LED类型"
@@ -177,13 +177,13 @@ export const LedCountControlPanel: Component<LedCountControlPanelProps> = (props
 
   return (
     <div {...rootProps} class={'card bg-base-200 shadow-lg border border-base-300 ' + (rootProps.class || '')}>
-      <div class="card-body p-4">
-        <div class="card-title text-base mb-3 flex items-center justify-between">
+      <div class="card-body p-3">
+        <div class="card-title text-sm mb-2 flex items-center justify-between">
           <span>LED数量控制</span>
-          <div class="badge badge-info badge-outline">显示器 {localProps.display.id}</div>
+          <div class="badge badge-info badge-outline text-xs">显示器 {localProps.display.id}</div>
         </div>
 
-        <div class="grid grid-cols-4 gap-2">
+        <div class="grid grid-cols-2 sm:grid-cols-4 gap-2">
           <For each={borders}>
             {(item) => (
               <LedCountControlItem
@@ -195,7 +195,7 @@ export const LedCountControlPanel: Component<LedCountControlPanelProps> = (props
           </For>
         </div>
 
-        <div class="text-xs text-base-content/50 mt-3 p-2 bg-base-300/50 rounded">
+        <div class="text-xs text-base-content/50 mt-2 p-1.5 bg-base-300/50 rounded">
           💡 提示：点击 +/- 按钮或直接输入数值来调整LED数量（范围：0-1000）
         </div>
       </div>
diff --git a/src/components/led-strip-configuration/led-strip-configuration.tsx b/src/components/led-strip-configuration/led-strip-configuration.tsx
index 39356d2..d9b05d7 100644
--- a/src/components/led-strip-configuration/led-strip-configuration.tsx
+++ b/src/components/led-strip-configuration/led-strip-configuration.tsx
@@ -104,13 +104,13 @@ export const LedStripConfiguration = () => {
   ];
 
   return (
-    <div class="space-y-6">
+    <div class="space-y-4">
       <div class="flex items-center justify-between">
-        <h1 class="text-2xl font-bold text-base-content">灯条配置</h1>
+        <h1 class="text-xl font-bold text-base-content">灯条配置</h1>
         <div class="stats shadow">
-          <div class="stat">
-            <div class="stat-title">显示器数量</div>
-            <div class="stat-value text-primary">{displayStore.displays.length}</div>
+          <div class="stat py-2 px-4">
+            <div class="stat-title text-xs">显示器数量</div>
+            <div class="stat-value text-primary text-lg">{displayStore.displays.length}</div>
           </div>
         </div>
       </div>
@@ -118,10 +118,10 @@ export const LedStripConfiguration = () => {
       <LedStripConfigurationContext.Provider value={ledStripConfigurationContextValue}>
         {/* LED Strip Sorter Panel */}
         <div class="card bg-base-200 shadow-lg">
-          <div class="card-body p-4">
-            <div class="card-title text-base mb-3">
+          <div class="card-body p-3">
+            <div class="card-title text-sm mb-2">
               <span>灯条排序</span>
-              <div class="badge badge-info badge-outline">实时预览</div>
+              <div class="badge badge-info badge-outline text-xs">实时预览</div>
             </div>
             <LedStripPartsSorter />
             <div class="text-xs text-base-content/50 mt-2">
@@ -132,12 +132,12 @@ export const LedStripConfiguration = () => {
 
         {/* Display Configuration Panel */}
         <div class="card bg-base-200 shadow-lg">
-          <div class="card-body p-4">
-            <div class="card-title text-base mb-3">
+          <div class="card-body p-3">
+            <div class="card-title text-sm mb-2">
               <span>显示器配置</span>
-              <div class="badge badge-secondary badge-outline">可视化编辑</div>
+              <div class="badge badge-secondary badge-outline text-xs">可视化编辑</div>
             </div>
-            <div class="h-96 mb-4">
+            <div class="h-80 mb-3">
               <DisplayListContainer>
                 {displayStore.displays.map((display) => (
                   <DisplayView display={display} />
@@ -151,12 +151,12 @@ export const LedStripConfiguration = () => {
         </div>
 
         {/* LED Count Control Panels */}
-        <div class="space-y-4">
-          <div class="flex items-center gap-2 mb-3">
-            <h2 class="text-lg font-semibold text-base-content">LED数量控制</h2>
-            <div class="badge badge-info badge-outline">实时调整</div>
+        <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="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div class="led-control-grid">
             {displayStore.displays.map((display) => (
               <LedCountControlPanel display={display} />
             ))}
diff --git a/src/styles.css b/src/styles.css
index 45f8e26..638479d 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,2 +1,24 @@
 @import "tailwindcss";
-@config "../tailwind.config.js";
\ No newline at end of file
+@config "../tailwind.config.js";
+
+/* Custom responsive styles for small windows */
+@media (max-width: 640px) {
+  .container {
+    max-width: 100%;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+}
+
+/* Ensure LED control panels are responsive */
+.led-control-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 0.75rem;
+}
+
+@media (max-width: 600px) {
+  .led-control-grid {
+    grid-template-columns: 1fr;
+  }
+}
\ No newline at end of file