A few more styling fixes

public/index.html

@@ -36,31 +36,33 @@
       Enter peer ID: <input id="peer-id" type="text" value="" />
       <button id="peer-connect">Connect</button>
     </div>
-    <div class="top-bar">
-      <div class="dropdown">
-        <button class="dropdown-peers"><i class="fa fa-bars"></i></button>
-        <div class="peers">
-          <ul id="connected-peers"></ul>
+    <div id="top-panel">
+      <div class="top-bar">
+        <div class="dropdown">
+          <button class="dropdown-peers"><i class="fa fa-bars"></i></button>
+          <div class="peers">
+            <ul id="connected-peers"></ul>
+          </div>
+        </div>
+        <input
+          id="room-id"
+          type="text"
+          value=""
+          placeholder="Enter a room to connect to"
+          size="25"
+          color="gray"
+        />
+        <button id="room-connect">Connect <i class="fa fa-link"></i></button>
+      </div>
+      <div id="tools-panel">
+        <button id="pen-tool" class="selected">
+          <i class="fa fa-paint-brush"></i>
+        </button>
+        <button id="eraser-tool"><i class="fa fa-eraser"></i></button>
+        <div id="connected-room-info">
+          You are connected to a room: <span id="connected-room-id"></span>
         </div>
       </div>
-      <input
-        id="room-id"
-        type="text"
-        value=""
-        placeholder="Enter a room to connect to"
-        size="25"
-        color="gray"
-      />
-      <button id="room-connect">Connect <i class="fa fa-link"></i></button>
-    </div>
-    <div id="connected-room-info">
-      You are connected to a room: <span id="connected-room-id"></span>
-    </div>
-    <div style="display: none;">
-      <button id="pen-tool" class="selected">
-        <i class="fa fa-paint-brush"></i>
-      </button>
-      <button id="eraser-tool"><i class="fa fa-eraser"></i></button>
     </div>
 
     <svg id="canvas">

public/styles.css

 body {
   background-color: black;
+  margin: 0;
 }
 
 #canvas {
-  width: 100%;
+  width: calc(100vw - 8px);
   height: 100%;
-  position: absolute;
+  position: fixed;
   background-color: white;
   z-index: -1;
+
+  border: 4px solid red;
+}
+
+#tools-panel {
+  padding-top: 8px;
+  display: flex;
+  align-items: center;
 }
 
 #connected-room-info {
   display: none;
+  color: white;
+  flex: 1;
+  text-align: right;
 }
 
 button.selected {
   background-color: lightgray;
 }
 
+#top-panel {
+  padding: 8px;
+}
+
 .top-bar {
   background-color: black;
   width: 100%;
-  height: 36pt;
-  float: left;
+  height: 36px;
   display: flex;
-  align-items: center;
+  align-items: stretch;
   z-index: 999;
 }
 
 .dropdown {
   position: relative;
   display: inline-block;
-  padding: 0.2%;
 }
 
 .dropdown-peers {
@@ -42,6 +56,8 @@ button.selected {
   cursor: pointer;
   border-radius: 4px;
   transition-duration: 0.4s;
+  height: 100%;
+  width: 36px;
 }
 
 .peers {
@@ -92,15 +108,17 @@ button.selected {
 #room-id {
   flex: 1;
   padding: 10px;
+  margin: 0 8px;
   box-sizing: border-box;
   opacity: 0.8;
+  border-radius: 4px;
 }
 
 #room-connect {
   background-color: #2f2f2f;
   color: white;
-  padding: 12px;
-  font-size: 16px;
+  padding: 8px;
+  font-size: 12px;
   border: none;
   cursor: pointer;
   border-radius: 4px;