move action buttons to top

web/index.css

@@ -1,14 +1,36 @@
 *{
   box-sizing: border-box;
 }
-body{
+
+body {
   font-family: Arial, Helvetica, sans-serif;
-  }
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.main {
+  display: flex;
+  flex-direction: column;
+  margin: 0.2em;
+  overflow: hidden;
+}
+
+.tabPage{
+  overflow: auto;
+}
+
   .configForm {
       padding-bottom: 0.5em;
   }
   .configForm .buttons {
-      margin-top: 0.5em;
+      margin-bottom: 0.5em;
   }
   .configForm .content>div:nth-child(even) {
       background-color: rgb(211 211 211 / 43%);

web/index.html

@@ -48,19 +48,16 @@
   <button id="reset">Reset</button>
 </div>
 <div class="configForm tabPage hidden" id="configPage" >
-  <div class="configFormRows">
-
-  </div>
   <div class="buttons">
     <button id="resetForm">ReloadConfig</button>
     <button id="changeConfig">Save&Restart</button>
     <button id="factoryReset">FactoryReset</button>
   </div>
-</div>
-<div class="configForm tabPage hidden" id="xdrPage" >
   <div class="configFormRows">
 
   </div>
+</div>
+<div class="configForm tabPage hidden" id="xdrPage" >
   <div class="buttons">
     <button id="resetForm">ReloadConfig</button>
     <button id="changeConfig">Save&Restart</button>
@@ -68,6 +65,9 @@
     <button id="exportXdr">Export</button>
     <button id="importXdr">Import</button>
   </div>
+  <div class="configFormRows">
+
+  </div>
 </div>
 <div class="tabPage hidden" id="dashboardPage">