From d7d68fe3a550e7df4e1d41a0ab5f4dd896f81fdb Mon Sep 17 00:00:00 2001
From: hamster1963 <1410514192@qq.com>
Date: Wed, 4 Dec 2024 14:16:18 +0800
Subject: [PATCH] fix: temperatures overflow

---
 src/components/ServerDetailOverview.tsx | 37 +++++++++++++------------
 1 file changed, 19 insertions(+), 18 deletions(-)

diff --git a/src/components/ServerDetailOverview.tsx b/src/components/ServerDetailOverview.tsx
index 1f8b560..7309243 100644
--- a/src/components/ServerDetailOverview.tsx
+++ b/src/components/ServerDetailOverview.tsx
@@ -221,24 +221,6 @@ export default function ServerDetailOverview({
             </section>
           </CardContent>
         </Card>
-        {server?.state.temperatures &&
-          server?.state.temperatures.length > 0 && (
-            <Card className="rounded-[10px] bg-transparent border-none shadow-none">
-              <CardContent className="px-1.5 py-1">
-                <section className="flex flex-col items-start gap-0.5">
-                  <p className="text-xs text-muted-foreground">{"温度"}</p>
-                  <section className="flex items-start gap-2">
-                    {server?.state.temperatures.map((item, index) => (
-                      <div className="text-xs flex items-center" key={index}>
-                        <p className=" font-semibold">{item.Name}</p>:{" "}
-                        {item.Temperature.toFixed(2)} °C
-                      </div>
-                    ))}
-                  </section>
-                </section>
-              </CardContent>
-            </Card>
-          )}
         <Card className="rounded-[10px] bg-transparent border-none shadow-none">
           <CardContent className="px-1.5 py-1">
             <section className="flex flex-col items-start gap-0.5">
@@ -268,6 +250,25 @@ export default function ServerDetailOverview({
           </CardContent>
         </Card>
       </section>
+      {server?.state.temperatures && server?.state.temperatures.length > 0 && (
+        <section className="flex flex-wrap gap-2 mt-1">
+          <Card className="rounded-[10px] bg-transparent border-none shadow-none">
+            <CardContent className="px-1.5 py-1">
+              <section className="flex flex-col items-start gap-0.5">
+                <p className="text-xs text-muted-foreground">{"温度"}</p>
+                <section className="flex items-start flex-wrap gap-2">
+                  {server?.state.temperatures.map((item, index) => (
+                    <div className="text-xs flex items-center" key={index}>
+                      <p className="font-semibold">{item.Name}</p>:{" "}
+                      {item.Temperature.toFixed(2)} °C
+                    </div>
+                  ))}
+                </section>
+              </section>
+            </CardContent>
+          </Card>
+        </section>
+      )}
     </div>
   );
 }