Make dropdown open overflowing content below.

Automattic · Dec 10, 2015 · 7ad7e49 · 7ad7e49
1 parent db79348
commit 7ad7e49
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 25 deletions.
diff --git a/client/components/sites-dropdown/index.jsx b/client/components/sites-dropdown/index.jsx
@@ -61,25 +61,27 @@ export default React.createClass( {
 	render() {
 		return (
 			<div className={ classNames( 'sites-dropdown', { 'is-open': this.state.open } ) }>
-				<div
-					className="sites-dropdown__selected"
-					onClick={ () => this.setState( { open: ! this.state.open } ) }
-				>
-					<Site
-						site={ this.getSelectedSite() }
-					/>
-					<Gridicon icon={ this.state.open ? 'chevron-up' : 'chevron-down' } />
+				<div className="sites-dropdown__wrapper">
+					<div
+						className="sites-dropdown__selected"
+						onClick={ () => this.setState( { open: ! this.state.open } ) }
+					>
+						<Site
+							site={ this.getSelectedSite() }
+						/>
+						<Gridicon icon={ this.state.open ? 'chevron-up' : 'chevron-down' } />
+					</div>
+					{ this.state.open &&
+						<SiteSelector
+							sites={ sites }
+							autoFocus={ true }
+							onClose={ this.props.onClose }
+							onSiteSelect={ this.selectSite }
+							selected={ this.state.selected }
+							hideSelected={ true }
+						/>
+					}
 				</div>
-				{ this.state.open &&
-					<SiteSelector
-						sites={ sites }
-						autoFocus={ true }
-						onClose={ this.props.onClose }
-						onSiteSelect={ this.selectSite }
-						selected={ this.state.selected }
-						hideSelected={ true }
-					/>
-				}
 			</div>
 		);
 	}

diff --git a/client/components/sites-dropdown/style.scss b/client/components/sites-dropdown/style.scss
@@ -1,11 +1,7 @@
 .sites-dropdown {
-	background: $white;
-	border: 1px solid lighten( $gray, 20% );
-	border-width: 1px 1px 2px;
-	border-radius: 4px;
-	margin: 24px 0;
-	position: relative;
-	width: 300px;
+	&.is-open {
+		height: 69px;
+	}
 
 	.gridicons-chevron-down,
 	.gridicons-chevron-up {
@@ -16,6 +12,20 @@
 	}
 }
 
+.sites-dropdown__wrapper {
+	background: $white;
+	border: 1px solid lighten( $gray, 20% );
+	border-width: 1px 1px 2px;
+	border-radius: 4px;
+	margin: 0;
+	position: relative;
+	width: 300px;
+}
+
+.sites-dropdown.is-open .sites-dropdown__wrapper {
+	margin: 0;
+}
+
 .sites-dropdown__selected {
 	cursor: pointer;