Restyle main window

Add gap to some widgets
Bettew auto layout

package-lock.json

@@ -2326,7 +2326,7 @@
       }
     },
     "mammoth": {
-      "version": "git+file:///home/forks/work/mammoth-lib.git#a386361efc3477a7c83573b708ffe29e47b9a36c",
+      "version": "git+file:///home/forks/work/mammoth-lib.git#792583b47619104af20e51480c57d9ca2dc77bae",
       "requires": {
         "@types/chokidar": "1.7.4",
         "@types/history": "4.6.2",

src/main-view/container.tsx

@@ -3,6 +3,21 @@ import { connect, Dispatch } from "react-redux";
 import { StMainView, StAppWithMainView } from ".";
 import { Grid, Row, Col, Table, ButtonToolbar, Button, Panel, FormControl, Checkbox } from "react-bootstrap";
 import { Led } from "mammoth/ui/led";
+import jss from "jss";
+
+const sheet = jss.createStyleSheet({
+  pnl: {
+    height: "calc(100% - 20px)",
+  },
+  topRow: {
+    maxHeight: "20vh",
+    paddingTop: 10,
+    paddingBottom: 10,
+  },
+  gap: {
+    marginBottom: 5,
+  }
+}).attach();
 
 interface Props { };
 
@@ -10,10 +25,10 @@ interface Callbacks { };
 
 function mainView(props: Props & Callbacks) {
   return <Grid>
-    <Row style={{ height: "20vh" }}>
+    <Row className={sheet.classes.topRow}>
       <Col lg={3}>
-        <Led text="0.00" />
-        <ButtonToolbar>
+        <Led className={sheet.classes.gap} text="0.00" />
+        <ButtonToolbar className={sheet.classes.gap}>
           <Button>启用称重</Button>
           <Button disabled>停止称重</Button>
         </ButtonToolbar>
@@ -39,7 +54,7 @@ function mainView(props: Props & Callbacks) {
     <Row>
       <Col lg={8}>
         <Row style={{ height: "40vh" }}>
-          <Panel header="烫褪">
+          <Panel className={sheet.classes.pnl} header="烫褪">
             <Col lg={6} >
               <Table >
                 <thead>
@@ -62,7 +77,7 @@ function mainView(props: Props & Callbacks) {
           </Panel>
         </Row>
         <Row style={{ height: "40vh" }} >
-          <Panel header="毛剥">
+          <Panel className={sheet.classes.pnl} header="毛剥">
             <Col lg={6}>
               <Table>
                 <thead>
@@ -86,7 +101,7 @@ function mainView(props: Props & Callbacks) {
         </Row>
       </Col>
       <Col lg={4} style={{ height: "80vh" }} >
-        <Panel header="记录">
+        <Panel className={sheet.classes.pnl} header="记录">
           <Table>
             <thead>
               <tr>