From 16a15186e429dbb23bbb69c0d8f3d38822fa53b1 Mon Sep 17 00:00:00 2001
From: MichaelJenny <michael.jenny@projekt-und-partner.de>
Date: Tue, 13 Feb 2018 12:49:21 +0100
Subject: [PATCH] Prevent mobile views having elements that are being cut off.

Resolves #3396
---
 .../dashboard/client/components/actionView.js | 38 +++++++++----------
 .../client/containers/actionViewContainer.js  |  4 +-
 .../client/styles/dashboard/console.less      |  1 -
 3 files changed, 20 insertions(+), 23 deletions(-)

diff --git a/imports/plugins/core/dashboard/client/components/actionView.js b/imports/plugins/core/dashboard/client/components/actionView.js
index 5c16526b0d4..ec3b9bcb5e9 100644
--- a/imports/plugins/core/dashboard/client/components/actionView.js
+++ b/imports/plugins/core/dashboard/client/components/actionView.js
@@ -17,14 +17,14 @@ import { getComponent } from "@reactioncommerce/reaction-components";
 
 
 const getStyles = (props) => {
-  let viewSize = 400;
+  const minWidth = Math.min(props.viewportWidth, 400);
+  let viewSize = minWidth;
   const actionView = props.actionView || {};
   const provides = actionView.provides || [];
   // legacy provides could be a string, is an array since 1.5.0, check for either.
   // prototype.includes has the fortunate side affect of checking string equality as well as array inclusion.
   const isBigView = provides.includes("dashboard") ||
                     (provides.includes("shortcut") && actionView.container === "dashboard");
-
   if (isBigView) {
     viewSize = "90vw";
   }
@@ -35,7 +35,7 @@ const getStyles = (props) => {
     const isLgView = actionView.meta.actionView.dashboardSize === "lg";
 
     if (isSmView) {
-      viewSize = "400px";
+      viewSize = `${minWidth}px`;
     }
     if (isMdView) {
       viewSize = "50vw";
@@ -51,21 +51,17 @@ const getStyles = (props) => {
 
   return {
     base: {
-      "display": "flex",
-      "flexDirection": "row",
-      "height": "100vh",
-      "position": "relative",
-      "width": viewSize,
-      "minWidth": 400,
-      "@media only screen and (max-width: 949px)": {
-        width: "100vw"
-      },
-      "boxShadow": isBigView ? "0 0 40px rgba(0,0,0,.1)" : "",
-      "flex": "0 0 auto",
-      "backgroundColor": "white",
-      "overflow": "hidden",
-      "transition": "width 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955))",
-      "zIndex": 1050
+      display: "flex",
+      flexDirection: "row",
+      height: "100vh",
+      position: "relative",
+      width: viewSize,
+      boxShadow: isBigView ? "0 0 40px rgba(0,0,0,.1)" : "",
+      flex: "0 0 auto",
+      backgroundColor: "white",
+      overflow: "hidden",
+      transition: "width 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955))",
+      zIndex: 1050
     },
     header: {
       display: "flex",
@@ -92,8 +88,7 @@ const getStyles = (props) => {
     masterViewPanel: {
       display: "flex",
       flexDirection: "column",
-      flex: "1 1 auto",
-      width: "50%"
+      flex: "1 1 auto"
     },
     masterView: {
       flex: "1 1 auto",
@@ -144,7 +139,8 @@ class ActionView extends Component {
     handleActionViewDetailClose: PropTypes.func,
     isActionViewAtRootView: PropTypes.bool,
     isDetailViewAtRootView: PropTypes.bool,
-    language: PropTypes.string
+    language: PropTypes.string,
+    viewportWidth: PropTypes.number
   }
 
   constructor(props) {
diff --git a/imports/plugins/core/dashboard/client/containers/actionViewContainer.js b/imports/plugins/core/dashboard/client/containers/actionViewContainer.js
index 7a27cb1e188..f7239b330ac 100644
--- a/imports/plugins/core/dashboard/client/containers/actionViewContainer.js
+++ b/imports/plugins/core/dashboard/client/containers/actionViewContainer.js
@@ -51,6 +51,8 @@ function composer(props, onData) {
     tooltipPosition: "left middle"
   });
 
+  // calculated here and not in component, as environment dependent.
+  const viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
 
   onData(null, {
     isAdminArea: true,
@@ -60,9 +62,9 @@ function composer(props, onData) {
     buttons: items,
     isActionViewAtRootView: Reaction.isActionViewAtRootView(),
     isDetailViewAtRootView: Reaction.isActionViewDetailAtRootView(),
-
     actionViewIsOpen: Reaction.isActionViewOpen(),
     detailViewIsOpen: Reaction.isActionViewDetailOpen(),
+    viewportWidth,
 
     // Callbacks
     handleActionViewBack,
diff --git a/imports/plugins/included/default-theme/client/styles/dashboard/console.less b/imports/plugins/included/default-theme/client/styles/dashboard/console.less
index dc5510955e4..73b9d2433dc 100644
--- a/imports/plugins/included/default-theme/client/styles/dashboard/console.less
+++ b/imports/plugins/included/default-theme/client/styles/dashboard/console.less
@@ -148,7 +148,6 @@ html:not(.rtl) .rui.admin.action-view {
 
 .admin-controls-content {
   .flex(1 1 auto);
-  min-width: 400px;
   height: 100%;
   overflow-x: hidden;
   overflow-y: auto;