From eb5b1752138a2ae09d13d03cbb8dd16cfcbe1373 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 23 Sep 2016 15:58:11 +0100
Subject: [PATCH] Layout to support less hardcoded CSS

---
 .../views/elements/DirectorySearchBox.js      | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/components/views/elements/DirectorySearchBox.js b/src/components/views/elements/DirectorySearchBox.js
index c10295d247..56f0bfd134 100644
--- a/src/components/views/elements/DirectorySearchBox.js
+++ b/src/components/views/elements/DirectorySearchBox.js
@@ -83,14 +83,18 @@ export default class DirectorySearchBox extends React.Component {
         }
 
         return <span className={classnames(searchbox_classes)}>
-            <input type="text" size="64"
-                className="mx_DirectorySearchBox_input"
-                ref={this.collectInput}
-                onChange={this.onChange} onKeyUp={this.onKeyUp}
-                placeholder="Find a room by keyword or room ID (#matrix:matrix.org)"
-            />
-            {join_button}
-            <span className="mx_DirectorySearchBox_clear" onClick={this.onClearClick} />
+            <div className="mx_DirectorySearchBox_container">
+                <input type="text" size="64"
+                    className="mx_DirectorySearchBox_input"
+                    ref={this.collectInput}
+                    onChange={this.onChange} onKeyUp={this.onKeyUp}
+                    placeholder="Find a room by keyword or room ID (#matrix:matrix.org)"
+                />
+                {join_button}
+                <span className="mx_DirectorySearchBox_clear_wrapper">
+                    <span className="mx_DirectorySearchBox_clear" onClick={this.onClearClick} />
+                </span>
+            </div>
         </span>;
     }
 }