From f229bcb6cad62fab5f8257aa8c5e0e8ae41db936 Mon Sep 17 00:00:00 2001
From: Mael <mael.thomas@data.gouv.fr>
Date: Tue, 15 Jan 2019 18:59:48 +0100
Subject: [PATCH] :art: Affichage du 'page utile ?' sur mobile

---
 source/components/Feedback/Feedback.css    |  2 ++
 source/components/Feedback/PageFeedback.js | 31 ++++++++++++----------
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/source/components/Feedback/Feedback.css b/source/components/Feedback/Feedback.css
index 6884449b5..5f7794da2 100644
--- a/source/components/Feedback/Feedback.css
+++ b/source/components/Feedback/Feedback.css
@@ -1,5 +1,7 @@
 .feedback-page {
 	align-items: flex-start;
 	display: flex;
+	align-items: flex-end;
+	justify-content: space-between;
 	padding: 0.6rem !important;
 }
diff --git a/source/components/Feedback/PageFeedback.js b/source/components/Feedback/PageFeedback.js
index 9aea0616e..01edffc6a 100644
--- a/source/components/Feedback/PageFeedback.js
+++ b/source/components/Feedback/PageFeedback.js
@@ -95,26 +95,29 @@ class PageFeedback extends Component<Props, State> {
 				<div className="feedback-page ui__ container notice">
 					{!this.state.showForm && !this.state.showThanks && (
 						<>
-							<div style={{ flex: 1 }}>
+							<div>
 								{this.props.customMessage || (
 									<Trans i18nKey="feedback.question">
-										Cette page vous a-t-elle été utile ?
+										Cette page vous est utile ?
 									</Trans>
 								)}{' '}
-								<button
-									style={{ marginLeft: '0.4rem' }}
-									className="ui__ link-button"
-									onClick={() => this.handleFeedback({ useful: true })}>
-									<Trans>Oui</Trans>
-								</button>{' '}
-								<button
-									style={{ marginLeft: '0.4rem' }}
-									className="ui__ link-button"
-									onClick={() => this.handleFeedback({ useful: false })}>
-									<Trans>Non</Trans>
-								</button>
+								<div style={{ display: 'inline-block' }}>
+									<button
+										style={{ marginLeft: '0.4rem' }}
+										className="ui__ link-button"
+										onClick={() => this.handleFeedback({ useful: true })}>
+										<Trans>Oui</Trans>
+									</button>{' '}
+									<button
+										style={{ marginLeft: '0.4rem' }}
+										className="ui__ link-button"
+										onClick={() => this.handleFeedback({ useful: false })}>
+										<Trans>Non</Trans>
+									</button>
+								</div>
 							</div>
 							<button
+								style={{ textAlign: 'right' }}
 								className="ui__ link-button"
 								onClick={this.handleErrorReporting}>
 								<Trans i18nKey="feedback.reportError">