From 61f2f325913a728d827c52b2a1776ce49219529e Mon Sep 17 00:00:00 2001
From: Don Park <donpark@docuverse.com>
Date: Tue, 16 Jul 2019 16:45:52 -0700
Subject: [PATCH 1/3] remove nested anchor

---
 client/my-sites/theme/main.jsx | 19 -------------------
 1 file changed, 19 deletions(-)

diff --git a/client/my-sites/theme/main.jsx b/client/my-sites/theme/main.jsx
index 3fcfbcb7b8f0f..f36723291e838 100644
--- a/client/my-sites/theme/main.jsx
+++ b/client/my-sites/theme/main.jsx
@@ -228,24 +228,6 @@ class ThemeSheet extends React.Component {
 		return demo_uri && ! retired;
 	}
 
-	renderPreviewButton() {
-		return (
-			<a
-				className="theme__sheet-preview-link"
-				onClick={ this.previewAction }
-				data-tip-target="theme-sheet-preview"
-				href={ this.props.demo_uri }
-				rel="noopener noreferrer"
-			>
-				<span className="theme__sheet-preview-link-text">
-					{ i18n.translate( 'Open Live Demo', {
-						context: 'Individual theme live preview button',
-					} ) }
-				</span>
-			</a>
-		);
-	}
-
 	renderScreenshot() {
 		const { isWpcomTheme, name: themeName } = this.props;
 		const screenshotFull = isWpcomTheme ? this.getFullLengthScreenshot() : this.props.screenshot;
@@ -271,7 +253,6 @@ class ThemeSheet extends React.Component {
 					onClick={ this.previewAction }
 					rel="noopener noreferrer"
 				>
-					{ this.shouldRenderPreviewButton() && this.renderPreviewButton() }
 					{ img }
 				</a>
 			);

From 706aaabaaf622eb70a7249fe9054e39fdf5f8990 Mon Sep 17 00:00:00 2001
From: Don Park <donpark@docuverse.com>
Date: Thu, 18 Jul 2019 15:21:29 -0700
Subject: [PATCH 2/3] use div to avoid nested anchor warning

---
 client/my-sites/theme/main.jsx | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/client/my-sites/theme/main.jsx b/client/my-sites/theme/main.jsx
index f36723291e838..16d825f55abb6 100644
--- a/client/my-sites/theme/main.jsx
+++ b/client/my-sites/theme/main.jsx
@@ -228,6 +228,21 @@ class ThemeSheet extends React.Component {
 		return demo_uri && ! retired;
 	}
 
+	// Render "Open Live Demo" pseudo-button for mobiles.
+	// This is a legacy hack that shows the button under the preview screenshot for mobiles
+	// but not for desktop (becomes hidden behind the screenshot).
+	renderPreviewButton() {
+		return (
+			<div className="theme__sheet-preview-link" data-tip-target="theme-sheet-preview">
+				<span className="theme__sheet-preview-link-text">
+					{ i18n.translate( 'Open Live Demo', {
+						context: 'Individual theme live preview button',
+					} ) }
+				</span>
+			</div>
+		);
+	}
+
 	renderScreenshot() {
 		const { isWpcomTheme, name: themeName } = this.props;
 		const screenshotFull = isWpcomTheme ? this.getFullLengthScreenshot() : this.props.screenshot;
@@ -253,6 +268,7 @@ class ThemeSheet extends React.Component {
 					onClick={ this.previewAction }
 					rel="noopener noreferrer"
 				>
+					{ this.shouldRenderPreviewButton() && this.renderPreviewButton() }
 					{ img }
 				</a>
 			);

From 06dfc7c84057d9ae0c5317ef1cc18b68f66f90e8 Mon Sep 17 00:00:00 2001
From: Don Park <donpark@docuverse.com>
Date: Thu, 18 Jul 2019 16:49:17 -0700
Subject: [PATCH 3/3] tweak gradient to let more screenshot through

---
 client/my-sites/theme/style.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/my-sites/theme/style.scss b/client/my-sites/theme/style.scss
index 713eeedfdab3c..8936df7c8927d 100644
--- a/client/my-sites/theme/style.scss
+++ b/client/my-sites/theme/style.scss
@@ -137,7 +137,7 @@
 			height: 30%;
 			background: linear-gradient(
 				to bottom,
-				rgba( var( --color-neutral-0-rgb ), 1 ) 0%,
+				transparent 0,
 				rgba( var( --color-neutral-0-rgb ), 0.5 ) 40%,
 				var( --color-neutral-0 ) 93%
 			);