From fad98ca4bd0d7bdfba5c2c702e249cf01d50dfc9 Mon Sep 17 00:00:00 2001
From: Lily2point0 <lily.madar@ft.com>
Date: Tue, 13 Jun 2017 15:34:50 +0100
Subject: [PATCH] mobile margins

---
 src/js/oCrossword.js | 5 ++++-
 src/scss/_base.scss  | 3 ++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/js/oCrossword.js b/src/js/oCrossword.js
index c2e7d5a..b9c47da 100644
--- a/src/js/oCrossword.js
+++ b/src/js/oCrossword.js
@@ -487,7 +487,7 @@ OCrossword.prototype.assemble = function assemble() {
 		resetButton.textContent = 'Reset grid';
 		
 		this.addEventListener(resetButton, 'click', clearAnswers);
-		this.rootEl.insertBefore(resetButton, gridWrapper);	
+		this.rootEl.insertBefore(resetButton, wrapper);	
 
 		function constructInputIdentifier(data, direction) {
 			let identifier;
@@ -1086,6 +1086,8 @@ OCrossword.prototype.assemble = function assemble() {
 					clueDisplayer.style.height = clueDisplayerText.clientHeight + 50 +'px';
 					el.querySelector('.o-crossword-user-answer').style.top = clueDisplayerText.clientHeight + 'px';
 				}
+
+				gridEl.style.marginTop = clueDisplayer.style.height;
 			} else {
 				for (let i = 0; i < gridTDs.length; i++) {
 					let td = gridTDs[i];
@@ -1098,6 +1100,7 @@ OCrossword.prototype.assemble = function assemble() {
 				let desktopSize = gridTDs[0].getBoundingClientRect().width;
 				inputEl.style.width = desktopSize + "px";
 				inputEl.style.height = desktopSize + "px";
+				gridEl.style.marginTop = "initial";
 			}
 
 			d2 = gridEl.getBoundingClientRect();
diff --git a/src/scss/_base.scss b/src/scss/_base.scss
index 3d086d0..1a67367 100644
--- a/src/scss/_base.scss
+++ b/src/scss/_base.scss
@@ -322,7 +322,8 @@
 	}
 
 	.o-crossword-reset {
-		margin: 0 10px 20px;
+		margin: 20px 10px;
+		float: right;
 
 		@include oGridRespondTo(M) {
 			margin: 0;