diff --git a/client/homebrew/navbar/metadata.navitem.jsx b/client/homebrew/navbar/metadata.navitem.jsx
index 9f25f1a0f..9f56e89e3 100644
--- a/client/homebrew/navbar/metadata.navitem.jsx
+++ b/client/homebrew/navbar/metadata.navitem.jsx
@@ -46,26 +46,28 @@ const MetadataNav = createClass({
 	renderMetaWindow : function(){
 		if(!this.state.showMetaWindow) return null;
 
-		return <div className='dropdown'>
-			<div className='row'>
-				<h4>Description</h4>
-				<p>{this.props.brew.description || 'No description.'}</p>
-			</div>
-			<div className='row'>
-				<h4>Authors</h4>
-				<p>{this.getAuthors()}</p>
-			</div>
-			<div className='row'>
-				<h4>Tags</h4>
-				<p>{this.getTags()}</p>
-			</div>
-			<div className='row'>
-				<h4>Systems</h4>
-				<p>{this.getSystems()}</p>
-			</div>
-			<div className='row'>
-				<h4>Last Updated</h4>
-				<p>{Moment(this.props.brew.updatedAt).fromNow()}</p>
+		return <div className='windowWrapper'>
+			<div className='window'>
+				<div className='row'>
+					<h4>Description</h4>
+					<p>{this.props.brew.description || 'No description.'}</p>
+				</div>
+				<div className='row'>
+					<h4>Authors</h4>
+					<p>{this.getAuthors()}</p>
+				</div>
+				<div className='row'>
+					<h4>Tags</h4>
+					<p>{this.getTags()}</p>
+				</div>
+				<div className='row'>
+					<h4>Systems</h4>
+					<p>{this.getSystems()}</p>
+				</div>
+				<div className='row'>
+					<h4>Last Updated</h4>
+					<p>{Moment(this.props.brew.updatedAt).fromNow()}</p>
+				</div>
 			</div>
 		</div>;
 	},
diff --git a/client/homebrew/navbar/navbar.less b/client/homebrew/navbar/navbar.less
index 036c8f574..85dc55732 100644
--- a/client/homebrew/navbar/navbar.less
+++ b/client/homebrew/navbar/navbar.less
@@ -173,43 +173,50 @@
 		i{
 			margin-right: 10px;
 		}
-		.dropdown{
-			position   : absolute;
-			top        : 18px;
-			left       : 0px;
-			z-index    : -1;
-			width      : 100%;
-			max-height : ~"calc(100vh - 28px)";
-			background-color : #333;
-    	    display: flex;
-			flex-flow: row wrap;
-			justify-content: flex-start;
-			align-content: baseline;
-			padding: 10px 10px 0px;
-			border-radius: 5px;
-			.row{
-				display   : flex;
-				flex-flow : row wrap;
-				width     : 100%;
-				h4{
-					display          : block;
-					box-sizing       : border-box;
-					padding          : 5px 0px;
-					color            : #bbb;
-					text-align       : center;
-					border-top       : 1px solid #888;
-					flex-basis       : 20%;
-					flex-grow        : 1;
-				}
-				p{
-					font-family      : 'Open Sans', sans-serif;
-					font-size        : 10px;
-					font-weight      : normal;
-					text-transform 	 : initial;
-					padding          : 5px 0;
-					flex-basis       : 80%;
-					flex-grow        : 1;
-					border-top       : 1px solid #888;
+		.windowWrapper{
+			position: fixed;
+			top: 18px;
+			left: 0px;
+			width: calc(100vw - 30px);
+			z-index: -1;
+			.window{
+				max-width : 764px;
+				width     : 80%;
+				min-width : 380px;
+				max-height : ~"calc(100vh - 28px)";
+				background-color : #333;
+				display: flex;
+				flex-flow: row wrap;
+				justify-content: flex-start;
+				align-content: baseline;
+				padding: 10px 10px 0px;
+				border-radius: 5px;
+				margin: 0 auto;
+				.row{
+					display   : flex;
+					flex-flow : row wrap;
+					width     : 100%;
+					h4{
+						display          : block;
+						box-sizing       : border-box;
+						padding          : 5px 0px;
+						color            : #bbb;
+						text-align       : center;
+						border-top       : 1px solid #888;
+						flex-basis       : 20%;
+						flex-grow        : 1;
+						min-width        : 76px;
+					}
+					p{
+						font-family      : 'Open Sans', sans-serif;
+						font-size        : 10px;
+						font-weight      : normal;
+						text-transform 	 : initial;
+						padding          : 5px 0;
+						flex-basis       : 80%;
+						flex-grow        : 1;
+						border-top       : 1px solid #888;
+					}
 				}
 			}
 		}