proper sizing for chat components

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}/>
-          <Chat client={this.state.client} roomId={this.state.roomId}/>
-        </div>
       </>
     )
   }

components/chat.js

@@ -57,9 +57,7 @@ let chat = create({
 
   render: function() {
     let empty = (
-      <div className="chat" ref={this.setRef}>
+      <div className="main">
-        <div className="events">
-        </div>
       </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>
     )
   }
 })

components/filterList.js

@@ -52,9 +52,7 @@ let FilterList = create({
       return React.createElement(this.props.element, props)
     })
     return <>
-      <div className="filter">
+      <input className="filter" ref={this.inputRef} placeholder="Search"/>
-        <input ref={this.inputRef} placeholder="Search"/>
-      </div>
       <div className="list">
         {items}
       </div>

public/scss/style.scss

@@ -183,18 +183,15 @@ body {
   max-width: 15vw;
 
   .filter {
+    border: none;
     border-bottom: $borderwidth solid $bg;
-
+    width: 100%;
-    input {
+    box-sizing: border-box;
-      width: 100%;
+    padding: $spacing;
-      box-sizing: border-box;
+    color: white;
-      padding: $spacing;
+    font-size: 1rem;
-      border: none;
+    margin: 0;
-      color: white;
+    font-weight: bold;
-      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 {