From 1759bfe9111aab5179933037d2d2e0c2bc688285 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ivar=20Conradi=20=C3=98sthus?= <ivarconr@gmail.com>
Date: Fri, 25 Sep 2020 22:09:18 +0200
Subject: [PATCH] fix: minor css tweaks for mobile

---
 .../feature/form/form-update-feature-component.jsx |  4 +++-
 frontend/src/component/feature/form/strategy.scss  | 12 ++++++++++++
 frontend/src/component/feature/view-component.jsx  | 14 ++++++++++----
 3 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/frontend/src/component/feature/form/form-update-feature-component.jsx b/frontend/src/component/feature/form/form-update-feature-component.jsx
index 2531dfe9fa..1b8942407c 100644
--- a/frontend/src/component/feature/form/form-update-feature-component.jsx
+++ b/frontend/src/component/feature/form/form-update-feature-component.jsx
@@ -2,6 +2,8 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import StrategiesSection from './strategies-section-container';
 
+import styles from './strategy.scss';
+
 import { FormButtons } from './../../common';
 
 class UpdateFeatureComponent extends Component {
@@ -32,7 +34,7 @@ class UpdateFeatureComponent extends Component {
 
         return (
             <form onSubmit={onSubmit(input, features)}>
-                <section style={{ padding: '16px' }}>
+                <section className={styles.paddingDesktop}>
                     <StrategiesSection
                         configuredStrategies={configuredStrategies}
                         featureToggleName={input.name}
diff --git a/frontend/src/component/feature/form/strategy.scss b/frontend/src/component/feature/form/strategy.scss
index 9193a05ce0..d6e54e2e84 100644
--- a/frontend/src/component/feature/form/strategy.scss
+++ b/frontend/src/component/feature/form/strategy.scss
@@ -64,3 +64,15 @@
     display: inline-block;
     vertical-align: bottom;
 }
+
+
+.paddingDesktop {
+    padding: 16px;
+}
+
+@media (max-width: 500px) {
+    .paddingDesktop {
+        padding: 0;
+    }
+}
+
diff --git a/frontend/src/component/feature/view-component.jsx b/frontend/src/component/feature/view-component.jsx
index f8f5ecfeda..dd2d86aaa8 100644
--- a/frontend/src/component/feature/view-component.jsx
+++ b/frontend/src/component/feature/view-component.jsx
@@ -205,7 +205,9 @@ export default class ViewFeatureToggleComponent extends React.Component {
                                 checked={featureToggle.enabled}
                                 onChange={() => toggleFeature(!featureToggle.enabled, featureToggle.name)}
                             >
-                                {featureToggle.enabled ? 'Enabled' : 'Disabled'}
+                                <span className="mdl-cell--hide-phone">
+                                    {featureToggle.enabled ? 'Enabled' : 'Disabled'}
+                                </span>
                             </Switch>
                         ) : (
                             <Switch disabled ripple checked={featureToggle.enabled}>
@@ -250,10 +252,14 @@ export default class ViewFeatureToggleComponent extends React.Component {
                     tabBarProps={{ style: { width: '100%' } }}
                     className="mdl-color--grey-100"
                 >
-                    <Tab onClick={() => this.goToTab('strategies', featureToggleName)}>Strategies</Tab>
+                    <Tab onClick={() => this.goToTab('strategies', featureToggleName)}>Activation</Tab>
                     <Tab onClick={() => this.goToTab('view', featureToggleName)}>Metrics</Tab>
-                    <Tab onClick={() => this.goToTab('variants', featureToggleName)}>Variants</Tab>
-                    <Tab onClick={() => this.goToTab('history', featureToggleName)}>History</Tab>
+                    <Tab onClick={() => this.goToTab('variants', featureToggleName)}>
+                        V<span className="mdl-cell--hide-phone">ariants</span>
+                    </Tab>
+                    <Tab onClick={() => this.goToTab('history', featureToggleName)}>
+                        L<span className="mdl-cell--hide-phone">og</span>
+                    </Tab>
                 </Tabs>
                 {tabContent}
             </Card>