🎨 répare les bugs d'affichage sur mobile

- overflow de la fiche de paie
- bouton rechercher

source/components/ResultView/PaySlip.css

@@ -8,7 +8,7 @@
 }
 .payslip__cotisationsSection {
 	display: grid;
-	grid-template-columns: auto 8.2em 8.2em;
+	grid-template-columns: auto auto auto;
 	grid-gap: 0.3em 0em;
 }
 
@@ -17,6 +17,7 @@
 	margin: 0;
 	margin-top: 1.5em;
 	padding-bottom: 0.5em;
+	padding-left: 0.5em;
 	align-self: end;
 	margin-bottom: 0.5em;
 }

source/components/ResultView/ResultView.css

@@ -1,5 +1,6 @@
 .result-view__tabs {
-	display: inline-block;
+	display: flex;
+	align-items: center;
 	box-shadow: 0 -1px 0 0 #d4d4d5, 1px 0 0 0 #d4d4d5, -1px 0 0 0 #d4d4d5;
 	border-top-right-radius: 0.6em;
 	border: none;

source/components/RulePage.css

@@ -3,9 +3,15 @@
 	padding: 1em;
 	margin: 0 auto;
 }
-
+.rule-page__header {
+	display: flex;
+	flex-direction: column;
+}
+.rule-page__search {
+	align-self: flex-end;
+}
 #toSimulation {
-	margin: 0.6em auto;
+	margin: 0.6em 0;
 	display: block;
 	color: white;
 	font-size: 180%;

source/components/RulePage.js

@@ -1,24 +1,24 @@
+import { encodeRuleName } from 'Engine/rules'
+import {
+	decodeRuleName,
+	findRuleByDottedName,
+	findRulesByName
+} from 'Engine/rules.js'
+import { compose, head, path } from 'ramda'
 import React, { Component } from 'react'
 import { Trans, translate } from 'react-i18next'
 import { connect } from 'react-redux'
-import { head, path, compose } from 'ramda'
-import {
-	decodeRuleName,
-	findRulesByName,
-	findRuleByDottedName
-} from 'Engine/rules.js'
-import { encodeRuleName } from 'Engine/rules'
 import { Link, Redirect } from 'react-router-dom'
 import { animateScroll } from 'react-scroll'
-import './RulePage.css'
-import SearchButton from './SearchButton'
+import {
+	flatRulesSelector,
+	noUserInputSelector
+} from 'Selectors/analyseSelectors'
+import { setExample } from '../actions'
 import Namespace from './rule/Namespace'
 import Rule from './rule/Rule'
-import { setExample } from '../actions'
-import {
-	noUserInputSelector,
-	flatRulesSelector
-} from 'Selectors/analyseSelectors'
+import './RulePage.css'
+import SearchButton from './SearchButton'
 
 @connect(state => ({
 	themeColours: state.themeColours,
@@ -51,19 +51,27 @@ export default class RulePage extends Component {
 	renderRule(dottedName) {
 		return (
 			<div id="RulePage">
-				{!this.props.noUserInputSelector && (
-					<BackToSimulation colour={this.props.themeColours.colour} />
-				)}
-				<SearchButton />
+				<div className="rule-page__header">
+					<SearchButton className="rule-page__search" />
+					{!this.props.noUserInputSelector && (
+						<BackToSimulation colour={this.props.themeColours.colour} />
+					)}
+				</div>
 				<Rule dottedName={dottedName} />
 			</div>
 		)
 	}
 }
 
-@connect(null, dispatch => ({
-	setExample: compose(dispatch, setExample)
-}))
+@connect(
+	null,
+	dispatch => ({
+		setExample: compose(
+			dispatch,
+			setExample
+		)
+	})
+)
 class BackToSimulation extends Component {
 	render() {
 		let { colour, setExample } = this.props

source/components/SearchButton.js

@@ -1,4 +1,3 @@
-import withColours from 'Components/withColours'
 import React, { Component } from 'react'
 import { Trans, translate } from 'react-i18next'
 import { connect } from 'react-redux'
@@ -11,7 +10,6 @@ import { SimpleButton } from './ui/Button'
 @connect(state => ({
 	flatRules: flatRulesSelector(state)
 }))
-@withColours
 @translate()
 export default class SearchButton extends Component {
 	componentDidMount() {
@@ -50,7 +48,8 @@ export default class SearchButton extends Component {
 		) : (
 			<SimpleButton
 				onClick={() => this.setState({ visible: true })}
-				style={{ color: this.props.colours.colour }}>
+				className={this.props.className}
+				style={this.props.style}>
 				<i
 					className="fa fa-search"
 					aria-hidden="true"