From bc0f8e6c54c136b2a3fec46d34ff0b688a8e580b Mon Sep 17 00:00:00 2001
From: f0x <f@0x52.eu>
Date: Fri, 19 Apr 2019 20:39:07 +0200
Subject: [PATCH] proper sizing for chat components

---
 app.js                   |  4 +---
 components/chat.js       | 10 ++++------
 components/filterList.js |  4 +---
 public/scss/style.scss   | 27 +++++++++++++--------------
 4 files changed, 19 insertions(+), 26 deletions(-)

diff --git a/app.js b/app.js
index d349741..858dabb 100644
--- a/app.js
+++ b/app.js
@@ -85,9 +85,7 @@ let App = create({
     return (
       <>
         <Sidebar client={this.state.client} rooms={this.state.rooms} selectRoom={(roomId) => {this.setState({roomId: roomId})}}/>
-        <div className="main">
-          <Chat client={this.state.client} roomId={this.state.roomId}/>
-        </div>
+        <Chat client={this.state.client} roomId={this.state.roomId}/>
       </>
     )
   }
diff --git a/components/chat.js b/components/chat.js
index 9647bc0..7346e15 100644
--- a/components/chat.js
+++ b/components/chat.js
@@ -57,9 +57,7 @@ let chat = create({
 
   render: function() {
     let empty = (
-      <div className="chat" ref={this.setRef}>
-        <div className="events">
-        </div>
+      <div className="main">
       </div>
     )
     if (this.props.roomId == undefined) {
@@ -106,15 +104,15 @@ let chat = create({
     }
     //TODO: replace with something that only renders events in view
     return (
-      <>
+      <div className="main">
         <Info room={room} />
         <div className="chat" ref={this.setRef}>
           <div className="events">
             {events}
           </div>
         </div>
-        <Input client={this.state.client} roomId={this.state.roomId}/>
-      </>
+        <Input client={this.props.client} roomId={this.props.roomId}/>
+      </div>
     )
   }
 })
diff --git a/components/filterList.js b/components/filterList.js
index cbdf96c..41ceaa8 100644
--- a/components/filterList.js
+++ b/components/filterList.js
@@ -52,9 +52,7 @@ let FilterList = create({
       return React.createElement(this.props.element, props)
     })
     return <>
-      <div className="filter">
-        <input ref={this.inputRef} placeholder="Search"/>
-      </div>
+      <input className="filter" ref={this.inputRef} placeholder="Search"/>
       <div className="list">
         {items}
       </div>
diff --git a/public/scss/style.scss b/public/scss/style.scss
index 8f6b602..2bc583c 100644
--- a/public/scss/style.scss
+++ b/public/scss/style.scss
@@ -183,18 +183,15 @@ body {
   max-width: 15vw;
 
   .filter {
+    border: none;
     border-bottom: $borderwidth solid $bg;
-
-    input {
-      width: 100%;
-      box-sizing: border-box;
-      padding: $spacing;
-      border: none;
-      color: white;
-      font-size: 1rem;
-      margin: 0;
-      font-weight: bold;
-    }
+    width: 100%;
+    box-sizing: border-box;
+    padding: $spacing;
+    color: white;
+    font-size: 1rem;
+    margin: 0;
+    font-weight: bold;
   }
 }
 
@@ -253,14 +250,16 @@ body {
 .info {
   padding: $spacing;
   color: $accent;
+  font-size: 1rem;
   font-weight: bold;
   border-bottom: $borderwidth solid $bg;
   box-sizing: border-box;
 }
 
 .chat {
-  padding: $spacing;
+  padding: 0 $spacing;
   position: relative;
+  box-sizing: border-box;
 
   .events {
     display: flex;
@@ -291,9 +290,9 @@ body {
         border: 0.2rem solid lighten($bg0, 10);
 
         position: sticky;
-        top: $spacing/4 - 0.2rem;
+        top: $spacing;
         //align-self: flex-end;
-        //bottom: $spacing/4 - 0.2rem;
+        //bottom: $spacing;
       }
 
       .col {