Do not make sidebar push content

app/lib/components/Room.jsx

@@ -82,12 +82,7 @@ class Room extends React.Component
 				<Appear duration={300}>
 					<div data-component='Room'>
 						<FullScreenView advancedMode={room.advancedMode} />
-						<div
-							className='room-wrapper'
-							style={{
-								width : toolAreaOpen ? '75%' : '100%'
-							}}
-						>
+						<div className='room-wrapper'>
 							<Notifications />
 
 							<ToolAreaButton />
@@ -161,10 +156,7 @@ class Room extends React.Component
 							/>
 						</div>
 						<div
-							className='toolarea-wrapper'
-							style={{
-								width : toolAreaOpen ? '25%' : '0%'
-							}}
+							className={classnames('toolarea-wrapper', { open: toolAreaOpen })}
 						>
 							{toolAreaOpen ?
 								<ToolArea

app/lib/components/ToolArea/ToolAreaButton.jsx

@@ -15,7 +15,7 @@ class ToolAreaButton extends React.Component
 		} = this.props;
 
 		return (
-			<div data-component='ToolAreaButton'>
+			<div data-component='ToolAreaButton' className={classnames({ on: toolAreaOpen })}>
 				<div
 					className={classnames('button toolarea-button room-controls', {
 						on      : toolAreaOpen,

app/stylus/components/Room.styl

@@ -7,7 +7,6 @@
 		left: 0;
 		height: 100%;
 		width: 100%;
-		transition: width 0.3s;
 
 		> .state {
 			position: fixed;
@@ -168,12 +167,16 @@
 
 	> .toolarea-wrapper {
 		position: fixed;
+		width: 0;
 		top: 0;
 		right: 0;
-		width: 20%;
 		height: 100%;
 		background-color: rgba(0,0,0,0.1);
 		transition: width 0.3s;
+
+		&.open {
+			width: 25%;
+		}
 	}
 }
 

app/stylus/components/ToolArea.styl

@@ -1,14 +1,19 @@
 [data-component='ToolAreaButton'] {
 	position: absolute;
 	z-index: 101;
-	top: 20px;
-	right: 20px;
+	right: 0;
 	height: 36px;
 	width: 36px;
+	padding: 2rem;
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
 	align-items: center;
+	transition: right 0.3s;
+
+	&.on {
+		right: 25%;
+	}
 
 	> .button {
 		flex: 0 0 auto;