From 221a719148207e616306b9bf3918390fda303c6c Mon Sep 17 00:00:00 2001
From: sayomaki <willi123yao@gmail.com>
Date: Mon, 4 Sep 2023 21:59:49 +0800
Subject: [PATCH] Fix animated curve3D model display width

---
 src/tabs/Curve/3Dcurve_anim_canvas.tsx | 54 ++++++++++++++------------
 1 file changed, 29 insertions(+), 25 deletions(-)

diff --git a/src/tabs/Curve/3Dcurve_anim_canvas.tsx b/src/tabs/Curve/3Dcurve_anim_canvas.tsx
index 4e947a498..dee72228e 100644
--- a/src/tabs/Curve/3Dcurve_anim_canvas.tsx
+++ b/src/tabs/Curve/3Dcurve_anim_canvas.tsx
@@ -302,39 +302,43 @@ State
     );
 
     return (
-      <>
+      <div
+        style={{
+          width: '100%',
+        }}
+      >
         <div
           style={{
             display: 'flex',
-            flexDirection: 'column',
+            marginTop: '10px',
+            padding: '10px',
+            flexDirection: 'row',
+            justifyContent: 'stretch',
             alignContent: 'center',
-            justifyContent: 'center',
           }}
         >
-          <div
+          {buttons}
+          {sliders}
+          <Switch
             style={{
-              display: 'flex',
+              marginLeft: '20px',
+              marginRight: '20px',
               marginTop: '10px',
-              padding: '10px',
-              flexDirection: 'row',
-              justifyContent: 'stretch',
-              alignContent: 'center',
+              whiteSpace: 'nowrap',
             }}
-          >
-            {buttons}
-            {sliders}
-            <Switch
-              style={{
-                marginLeft: '20px',
-                marginRight: '20px',
-                marginTop: '10px',
-                whiteSpace: 'nowrap',
-              }}
-              label="Auto Play"
-              onChange={this.autoPlaySwitchChanged}
-              checked={this.state.autoPlay}
-            />
-          </div>
+            label="Auto Play"
+            onChange={this.autoPlaySwitchChanged}
+            checked={this.state.autoPlay}
+          />
+        </div>
+        <div
+          style={{
+            marginTop: '15px',
+            display: 'flex',
+            alignContent: 'center',
+            justifyContent: 'center',
+          }}
+        >
           <WebGLCanvas
             style={{
               flexGrow: 1,
@@ -344,7 +348,7 @@ State
             }}
           />
         </div>
-      </>
+      </div>
     );
   }
 }