Fix animated curve3D model display width

source-academy · Sep 4, 2023 · 221a719 · 221a719
1 parent e337c4a
commit 221a719
Showing 1 changed file with 29 additions and 25 deletions.
diff --git 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>
  );
  }
 }