From 8e6cef7eba3608d6e4d10ee2cea8c4dd499ce5cd Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Tue, 18 Apr 2017 04:52:55 +1200
Subject: [PATCH] Account for overlay width

---
 src/js/components/FullPlayer.js  |  4 ++--
 src/scss/components/_player.scss | 19 +++++++++++++------
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/js/components/FullPlayer.js b/src/js/components/FullPlayer.js
index 4b5f6f96..8ca56c65 100755
--- a/src/js/components/FullPlayer.js
+++ b/src/js/components/FullPlayer.js
@@ -68,7 +68,7 @@ class FullPlayer extends React.Component{
 			!this.props.current_track.album || 
 			!this.props.current_track.album.images ){
 				return (
-					<span className="artwork">
+					<span className={this.props.radio_enabled ? 'artwork radio-enabled' : 'artwork'}>
 						{this.props.radio_enabled ? <img className="radio-overlay" src="assets/radio-overlay.png" /> : null}
 						<Thumbnail size="huge" />
 					</span>
@@ -78,7 +78,7 @@ class FullPlayer extends React.Component{
 		var link = null
 		if( this.props.current_track.album.uri ) link = '/album/'+this.props.current_track.album.uri
 		return (
-			<Link className="artwork" to={link} onContextMenu={e => this.handleContextMenu(e,this.props.current_track.album)}>
+			<Link className={this.props.radio_enabled ? 'artwork radio-enabled' : 'artwork'} to={link} onContextMenu={e => this.handleContextMenu(e,this.props.current_track.album)}>
 				{this.props.radio_enabled ? <img className="radio-overlay" src="assets/radio-overlay.png" /> : null}
 				<Thumbnail size="huge" images={this.props.current_track.album.images} canZoom />
 			</Link>
diff --git a/src/scss/components/_player.scss b/src/scss/components/_player.scss
index cb23f86c..2bdbba35 100755
--- a/src/scss/components/_player.scss
+++ b/src/scss/components/_player.scss
@@ -55,12 +55,19 @@
 	.artwork {
 		position: relative;
 
-		.radio-overlay {
-			position: absolute;
-			top: 0;
-			left: 0;
-			width: 100%;
-			z-index: 2;
+		&.radio-enabled {
+			.thumbnail {
+				box-sizing: border-box;
+				border: 45px solid transparent;
+			}
+
+			.radio-overlay {
+				position: absolute;
+				top: 0;
+				left: 0;
+				width: 100%;
+				z-index: 2;
+			}
 		}
 	}