admin page css

2 files changed, 24 insertions, 15 deletions

diff --git a/public/admin.html b/public/admin.html
index f572d00..8cd2199 100644
--- a/public/admin.html
+++ b/public/admin.html
@@ -22,10 +22,12 @@
     <div id="admin" class="hidden">
         <div id="queryinput">
             <input type="text" name="query" id="query" placeholder="SQL Query">
-            <button class="submit" onclick="submit()">Submit</button>
-            <button class="view" onclick="posts()">View Posts</button>
-            <button class="view" onclick="users()">View Users</button>
-            <button class="view" onclick="sessions()">View Sessions</button>
+            <div id="buttons">
+                <button class="submit" onclick="submit()">Submit</button>
+                <button class="view" onclick="posts()">View Posts</button>
+                <button class="view" onclick="users()">View Users</button>
+                <button class="view" onclick="sessions()">View Sessions</button>
+            </div>
         </div>
         <table id="table"></table>
     </div>
diff --git a/public/css/admin.css b/public/css/admin.css
index 560c28f..de160ae 100644
--- a/public/css/admin.css
+++ b/public/css/admin.css
@@ -2,6 +2,7 @@ body {
     margin: 0;
     padding: 0;
     background-color: #181818;
+    overflow-x: hidden;
 }
 
 #header {
@@ -12,9 +13,11 @@ body {
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 100vw;
-    height: 100vh;
+    width: 100%;
+    height: 100%;
     flex-direction: column;
+    margin: 0;
+    padding: 0;
 }
 
 #error .logo {
@@ -39,20 +42,24 @@ input:focus {
 #admin {
     margin: 1.75em;
     margin-top: 5em;
-    width: calc(100vw - 1.75em * 2);
-    height: calc(100vh - 5em - 1.75em);
+    width: calc(100% - 1.75em * 2);
+    height: calc(100% - 5em - 1.75em);
     display: flex;
     flex-direction: column;
 }
 
 #queryinput {
-    display: flexbox;
-    width: 100%;
+    display: flex;
+    width: calc(100% - 2em);
+    justify-content: space-between;
+    flex-direction: row;
+    margin: 1em;
 }
 
 #queryinput #query {
     width: 50em;
     margin: 0;
+    flex: 10;
 }
 
 form {
@@ -62,7 +69,7 @@ form {
     align-content: center;
 }
 
-#queryinput .submit, .view {
+#buttons .submit, .view {
     all: unset;
     font-family: sfpro;
     margin: 0;
@@ -75,22 +82,22 @@ form {
     border: 1px solid #606770;
 }
 
-#queryinput .submit:active {
+#buttons .submit:active {
     background-color: #30ab5a;
 }
 
-#queryinput .view {
+#buttons .view {
     background-color: #242424;
     color: #707882;
     border: 1px solid #606770;
 }
 
-#queryinput .view:active {
+#buttons .view:active {
     background-color: #181818;
 }
 
 table {
-    margin-top: 3em;
+    margin: 1em 0em;
     border-collapse: separate;
     border-spacing: 15px;
     table-layout: fixed;