3 changed files with 78 additions and 107 deletions
--- a/src/snek/static/base.css
+++ b/src/snek/static/base.css
@ -5,10 +5,6 @@
  box-sizing: border-box;
 }

-html {
-  height: 100%;
-}
-
 .gallery {
  padding: 50px;
  height: auto;
@ -29,27 +25,24 @@ body {
  background-color: #000000;
  color: #e6e6e6;
  line-height: 1.5;
-  display: grid;
-  grid-template-columns: auto 1fr;
-  grid-template-rows: auto 1fr;
-  grid-template-areas:
-    "header header"
-    "sidebar chat-area";
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
  min-width: 100%;
-  height: 100%;
 }

 main {
  display: flex;
  flex: 1;
  overflow: hidden;
-  grid-area: chat-area;
 }

 header {
  background-color: #000000;
-  grid-area: header;
-  padding: 10px 20px;
+  padding-top: 10px;
+  padding-left: 20px;
+  padding-right: 20px;
+    padding-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
@ -142,11 +135,6 @@ footer {
  background: #000000;
 }

-.chat-messages {
-  display: flex;
-  flex-direction: column;
-}
-
 .container {
  flex: 1;
  padding: 10px;
@ -163,11 +151,9 @@ footer {
  }

 }
-
 .chat-messages picture img {    
    cursor: pointer;
 }
-
 .chat-messages::-webkit-scrollbar {
  display: none;
 }
@ -362,7 +348,6 @@ a {
  padding-right: 20px;
  padding-top: 10px;
  overflow-y: auto;
-  grid-area: sidebar;
 }

 .sidebar h2 {
@ -407,30 +392,27 @@ a {
 }


+
@media only screen and (max-width: 768px) {
    
-  header {
+    header{
        top: 0;
        left: 0;
            text-overflow: ellipsis;
-    width: 100%;
+        width:100%;
        display: flex;
        flex-direction: column;
-
        .logo {
-      display: block;
+            display:block;
            flex: 1;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
-
            h2 {
                font-size: 14px;
            }
-
            text-align: center;
        }
-
        nav {
            text-align: right;
            flex: 1;
@ -439,7 +421,7 @@ a {
        }
    }    
    
-  /*
+/*
    body {
        justify-content: flex-start;
    }
@ -512,23 +494,13 @@ dialog .dialog-button {


@keyframes dialogFadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
+  from { opacity: 0; }
+  to { opacity: 1; }
 }

@keyframes dialogScaleIn {
-  from {
-    transform: scale(0.95) translate(-50%, -50%);
-    opacity: 0;
-  }
-  to {
-    transform: scale(1) translate(-50%, -50%);
-    opacity: 1;
-  }
+  from { transform: scale(0.95) translate(-50%, -50%); opacity: 0; }
+  to { transform: scale(1) translate(-50%, -50%); opacity: 1; }
 }

 dialog .dialog-button.primary {
--- a/src/snek/templates/app.html
+++ b/src/snek/templates/app.html
@ -2,7 +2,7 @@
 <html lang="en">
 <head>
  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="manifest" href="/manifest.json" />
  <title>Snek</title>
  <style>{{highlight_styles}}</style>
@ -50,11 +50,10 @@
    </nav>

  </header>
-
+  <main style="max-height: 100vh;overflow-y: none">
    {% block sidebar %}
    {% include "sidebar_channels.html" %}
    {% endblock %}
-  <main>
    
    {% block main %}
    <chat-window class="chat-area"></chat-window>
--- a/src/snek/templates/base.html
+++ b/src/snek/templates/base.html
@ -21,7 +21,7 @@
    <script src="/html-frame.js" type="module"></script>
    <script src="/generic-form.js?rid={{ rid }}" type="module"></script>
    <link rel="stylesheet" href="/html-frame.css">
-    <script async defer src="https://umami.molodetz.nl/script.js" data-website-id="d127c3e4-dc70-4041-a1c8-bcc32c2492ea"></script>
+    <script defer src="https://umami.molodetz.nl/script.js" data-website-id="d127c3e4-dc70-4041-a1c8-bcc32c2492ea"></script>
    {% block head %}
    {% endblock %}
 </head>