5 files changed, 17 insertions, 9 deletions
diff --git a/web/src/css/flowdetail.less b/web/src/css/flowdetail.less
index b6a7102b..200ec46d 100644
--- a/web/src/css/flowdetail.less
+++ b/web/src/css/flowdetail.less
@@ -14,8 +14,7 @@
     }
 
     section {
-        display: flex;
-        flex-direction: column;
+        overflow-y: scroll;
         >article{
             overflow: auto;
             padding: 5px 12px 0;
diff --git a/web/src/css/header.less b/web/src/css/header.less
index 042d6811..97c69930 100644
--- a/web/src/css/header.less
+++ b/web/src/css/header.less
@@ -113,5 +113,12 @@ header {
     .popover-content {
         max-height: 500px;
         overflow-y: auto;
+
+        tr {
+            cursor: pointer;
+            &:hover {
+                background-color: hsla(209, 52%, 84%, 0.5) !important;
+            }
+        }
     }
 }
diff --git a/web/src/js/components/Header/FilterDocs.jsx b/web/src/js/components/Header/FilterDocs.jsx
index 49fb5fbc..b471840b 100644
--- a/web/src/js/components/Header/FilterDocs.jsx
+++ b/web/src/js/components/Header/FilterDocs.jsx
@@ -37,7 +37,7 @@ export default class FilterDocs extends Component {
             <table className="table table-condensed">
                 <tbody>
                     {doc.commands.map(cmd => (
-                        <tr key={cmd[1]}>
+                        <tr key={cmd[1]} onClick={e => this.props.selectHandler(cmd[0].split(" ")[0] + " ")}>
                             <td>{cmd[0].replace(' ', '\u00a0')}</td>
                             <td>{cmd[1]}</td>
                         </tr>
diff --git a/web/src/js/components/Header/FilterInput.jsx b/web/src/js/components/Header/FilterInput.jsx
index e421f1a4..12479c10 100644
--- a/web/src/js/components/Header/FilterInput.jsx
+++ b/web/src/js/components/Header/FilterInput.jsx
@@ -21,6 +21,7 @@ export default class FilterInput extends Component {
         this.onKeyDown = this.onKeyDown.bind(this)
         this.onMouseEnter = this.onMouseEnter.bind(this)
         this.onMouseLeave = this.onMouseLeave.bind(this)
+        this.selectFilter = this.selectFilter.bind(this)
     }
 
     componentWillReceiveProps(nextProps) {
@@ -41,7 +42,7 @@ export default class FilterInput extends Component {
 
     getDesc() {
         if (!this.state.value) {
-            return <FilterDocs/>
+            return <FilterDocs selectHandler={this.selectFilter}/>
         }
         try {
             return Filt.parse(this.state.value).desc
@@ -85,6 +86,11 @@ export default class FilterInput extends Component {
         e.stopPropagation()
     }
 
+    selectFilter(cmd) {
+        this.setState({value: cmd})
+        ReactDOM.findDOMNode(this.refs.input).focus()
+    }
+
     blur() {
         ReactDOM.findDOMNode(this.refs.input).blur()
     }
diff --git a/web/src/js/flow/utils.js b/web/src/js/flow/utils.js
index cd174069..3c38058e 100644
--- a/web/src/js/flow/utils.js
+++ b/web/src/js/flow/utils.js
@@ -54,16 +54,12 @@ export var MessageUtils = {
 };
 
 export var RequestUtils = _.extend(MessageUtils, {
-    pretty_host: function (request) {
-        //FIXME: Add hostheader
-        return request.host;
-    },
     pretty_url: function (request) {
         var port = "";
         if (defaultPorts[request.scheme] !== request.port) {
             port = ":" + request.port;
         }
-        return request.scheme + "://" + this.pretty_host(request) + port + request.path;
+        return request.scheme + "://" + request.pretty_host + port + request.path;
     }
 });