From 76f2f4278bff2d6b69d9c36d25b219d8ab1f2ee0 Mon Sep 17 00:00:00 2001
From: wellenvogel <andreas@wellenvogel.de>
Date: Thu, 9 Dec 2021 12:02:34 +0100
Subject: [PATCH] move action buttons to top

---
 web/index.css  | 30 ++++++++++++++++++++++++++----
 web/index.html | 10 +++++-----
 2 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/web/index.css b/web/index.css
index 0b8ce2f..4c67b27 100644
--- a/web/index.css
+++ b/web/index.css
@@ -1,14 +1,36 @@
 *{
   box-sizing: border-box;
 }
-body{
-    font-family: Arial, Helvetica, sans-serif;
-  }
+
+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%);
diff --git a/web/index.html b/web/index.html
index e6fc841..7097914 100644
--- a/web/index.html
+++ b/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">