make responsive

src/App.jsx

@@ -57,8 +57,9 @@ function App() {
 
   return (
     <div className="App">
-      <StructureVisualizer cifText={cifText3D} />
-      <div style={{ margin: "10px" }}></div>
+      <div style={{ width: "450px", height: "450px", margin: "10px" }}>
+        <StructureVisualizer cifText={cifText3D} />
+      </div>
       <StructureVisualizer cifText={cifText2D} initSupercell={[3, 3, 1]} />
     </div>
   );

src/StructureVisualizer/ControlBox/index.css

@@ -1,18 +1,18 @@
 .control-box {
   position: relative;
   z-index: 1;
-  height: 100px;
-  width: 450px;
-  background: rgb(250, 250, 250);
+  width: 100%;
+  background: #f8f8f8;
   text-align: center;
   border: 1px solid #999;
   display: flex;
+  flex-wrap: wrap;
   flex-direction: column;
   justify-content: center;
   align-items: start;
-  margin-top: -20px;
-  padding: 30px 10px 10px 10px;
   border-radius: 5px;
+  margin-top: -5px;
+  padding: 15px 10px 10px 10px;
 }
 
 .supercell-container {
@@ -33,12 +33,13 @@
 
 .control-box-row {
   /* margin: 3px; */
-  padding: 4px 10px;
+  padding: 4px;
   width: 100%;
   line-height: inherit;
   /* background-color: pink; */
   display: flex;
-  justify-content: space-between;
+  flex-wrap: wrap;
+  justify-content: space-around;
   align-items: stretch;
 }
 
@@ -51,8 +52,8 @@
 }
 
 .camera-controls {
-  margin-left: auto;
-  margin-right: auto;
+  /* margin-left: auto;
+  margin-right: auto; */
   display: inline-flex;
   align-items: center;
   justify-items: center;

src/StructureVisualizer/StructureWindow/index.css

@@ -1,12 +1,21 @@
 .structure-window-outer {
   position: relative;
+  /* height: 100%; */
+  width: 100%;
+  flex: 1;
+  display: flex;
+  align-items: stretch;
+}
+
+.structure-window-click-handler {
+  width: 100%;
 }
 
 .structure-window {
   position: relative;
   z-index: 2;
-  height: 370px;
-  width: 450px;
+  height: 100%;
+  width: 100%;
   background: white;
   text-align: center;
   border: 1px solid #999;

src/StructureVisualizer/StructureWindow/index.jsx

@@ -21,7 +21,10 @@ class StructureWindow extends React.Component {
     }
     return (
       <div className="structure-window-outer">
-        <div onClick={() => this.props.setMouseEnabledState(true)}>
+        <div
+          className="structure-window-click-handler"
+          onClick={() => this.props.setMouseEnabledState(true)}
+        >
           <div className={swClassName}>
             <Visualizer3dmol
               ref={this.props.visualizerRef}

src/StructureVisualizer/index.css

@@ -1,4 +1,9 @@
 .structure-visualizer {
-  width: 450px;
+  width: 100%;
+  height: 100%;
+  min-height: 250px;
+  min-width: 250px;
   font-size: 16px;
+  display: flex;
+  flex-direction: column;
 }