css tweaks

components/events/Event.js

@@ -22,7 +22,7 @@ let Event = create({
     let event = this.props.event
     let state = ""
     let reply = ""
-    let element = "unsupported event"
+    let element = "unsupported event: " + event.type
     let parsedBody
 
     if (event.local) {

public/scss/style.scss

@@ -39,6 +39,9 @@ html, body {
   color: white;
   font-family: "Open Sans";
   font-size: 110%;
+  height: 100vh;
+  width: 100vw;
+  position: absolute;
 }
 
 .list {
@@ -57,8 +60,9 @@ html, body {
   }
 }
 
-.chat, .info, .input {
+.chat, .info, .input, .sidebar .filter {
   background: $bg1;
+  border-color: $bg1;
 }
 
 .input, .info {
@@ -75,13 +79,6 @@ body {
   display: flex;
 }
 
-#root {
-  height: 100vh;
-  width: 100vw;
-  display: flex;
-  justify-content: center;
-}
-
 .loginwrapper {
   margin-top: -15rem;
   display: flex;
@@ -162,11 +159,22 @@ body {
   }
 }
 
-.main {
+#root {
-  flex: 1 1 auto;
+  height: 100%;
+  width: 100%;
+  position: relative;
+  display: grid;
+  box-sizing: border-box;
+  grid-template-columns: 15% 85%;
+  justify-content: center;
 }
 
 .sidebar, .main {
+  position: relative;
+  box-sizing: border-box;
+  height: calc(100% - 2*$spacing);
+  width: calc(100% - 2*$spacing);
+  overflow-y: auto;
   margin: $spacing;
   display: flex;
   flex-direction: column;
@@ -195,6 +203,10 @@ body {
   }
 }
 
+.main {
+  flex: 1 1 auto;
+}
+
 .list {
   div {
     cursor: pointer;
@@ -258,8 +270,8 @@ body {
 
 .chat {
   padding: 0 $spacing;
-  position: relative;
   box-sizing: border-box;
+  word-wrap: anywhere;
 
   .events {
     display: flex;
@@ -274,8 +286,9 @@ body {
       grid-template-areas: "avatar content";
       margin-bottom: $spacing/2;
 
-      .name {
+      .user {
         font-weight: bold;
+        padding-left: $spacing;
       }
 
       #avatar {
@@ -295,7 +308,7 @@ body {
 
       .col {
         grid-area: content;
-        padding-left: $spacing * 1.2;
+        padding-left: $spacing/2;
 
         h1, h2, h3, h4, h5, h6 {
           margin: 0;
@@ -306,6 +319,8 @@ body {
         }
 
         .event {
+          padding-left: $spacing;
+
           .reply {
             border-left: $borderwidth solid $blue;
             padding-left: 1/2 * $spacing;
@@ -327,6 +342,10 @@ body {
             }
           }
 
+          code {
+            font-size: 1rem
+          }
+
           &:hover {
             border-radius: 0.1rem;
             background-color: hsla(0, 100%, 100%, 0.05);
@@ -362,10 +381,6 @@ body {
   }
 }
 
-.sidebar .filter, .info, .input {
-  border-color: $bg1;
-}
-
 .noselect {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;