More css:

* Make join button more buttony
 * Fix size of dropdown, allow search box to expand
 * Use flexbox within search box to input can fill the rest of the space

src/skins/vector/css/matrix-react-sdk/views/elements/DirectorySearchBox.css

@@ -21,12 +21,13 @@ limitations under the License.
 }
 
 .mx_DirectorySearchBox_container {
-    display: table;
+    display: flex;
     padding-left: 9px;
+    padding-right: 9px;
 }
 
 .mx_DirectorySearchBox_input {
-    display: table-cell;
+    flex-grow: 1;
     border: 0;
     padding: 0;
     font-weight: 300;
@@ -49,6 +50,8 @@ input[type=text].mx_DirectorySearchBox_input:focus {
     text-indent: 18px;
     font-weight: 600;
     font-size: 12px;
+    user-select: none;
+    cursor: pointer;
 }
 
 .mx_DirectorySearchBox_clear_wrapper {

src/skins/vector/css/vector-web/structures/RoomDirectory.css

@@ -53,6 +53,7 @@ limitations under the License.
 
 .mx_RoomDirectory_listheader {
     display: table;
+    table-layout: fixed;
     width: 100%;
     margin-top: 12px;
     margin-bottom: 12px;
@@ -65,7 +66,7 @@ limitations under the License.
 
 .mx_RoomDirectory_listheader .mx_NetworkDropdown {
     display: table-cell;
-    width: 100%;
+    width: 200px;
 }
 
 .mx_RoomDirectory_tableWrapper {