From d92ed428f9463adcc924a2e187ccb7d1adb6fe17 Mon Sep 17 00:00:00 2001
From: Roman Hotsiy <gotsijroman@gmail.com>
Date: Thu, 22 Mar 2018 18:22:11 +0200
Subject: [PATCH] chore: fix deme on mobile

---
 demo/ComboBox.tsx                          |  6 ++++++
 demo/index.tsx                             | 12 +++++++++++-
 package.json                               |  2 +-
 src/components/ApiLogo/styled.elements.tsx |  2 +-
 src/theme.ts                               |  6 +++---
 5 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/demo/ComboBox.tsx b/demo/ComboBox.tsx
index 4f18e45740..807fbe98ec 100644
--- a/demo/ComboBox.tsx
+++ b/demo/ComboBox.tsx
@@ -89,6 +89,12 @@ const Button = styled.button`
   line-height: 1;
   outline: none;
   width: 80px;
+
+  white-space: nowrap;
+
+  @media screen and (max-width: 450px) {
+    display: none;
+  }
 `;
 
 export interface ComboBoxProps {
diff --git a/demo/index.tsx b/demo/index.tsx
index 54144ce6b4..b4b182dd7b 100644
--- a/demo/index.tsx
+++ b/demo/index.tsx
@@ -24,7 +24,7 @@ const DEFAULT_SPEC = 'openapi.yaml';
 class DemoApp extends React.Component<
   {},
   { specUrl: string; dropdownOpen: boolean; cors: boolean }
-  > {
+> {
   constructor(props) {
     super(props);
 
@@ -122,15 +122,21 @@ const ControlsContainer = styled.div`
 
 const CorsCheckbox = styled.div`
   margin-left: 10px;
+  white-space: nowrap;
 
   label {
     font-size: 13px;
   }
+
+  @media screen and (max-width: 550px) {
+    display: none;
+  }
 `;
 
 const Heading = styled.nav`
   position: sticky;
   top: 0;
+  width: 100%;
   height: 50px;
   box-sizing: border-box;
   background: white;
@@ -148,6 +154,10 @@ const Logo = styled.img`
   width: 124px;
   display: inline-block;
   margin-right: 15px;
+
+  @media screen and (max-width: 950px) {
+    display: none;
+  }
 `;
 
 render(<DemoApp />, document.getElementById('container'));
diff --git a/package.json b/package.json
index ab96f6dbbf..d50aa6a383 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,7 @@
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 1",
     "lint": "tslint --project tsconfig.json",
     "benchmark": "node ./benchmark/benchmark.js",
-    "start:demo": "webpack-dev-server --hot --config demo/webpack.config.ts",
+    "start:demo": "webpack-dev-server --hot --config demo/webpack.config.ts --mode=development",
     "compile:cli": "tsc cli/index.ts --target es6 --module commonjs --types yargs",
     "build:demo": "webpack --mode=production --config demo/webpack.config.ts",
     "deploy:demo": "npm run build:demo && deploy-to-gh-pages --update demo/dist"
diff --git a/src/components/ApiLogo/styled.elements.tsx b/src/components/ApiLogo/styled.elements.tsx
index 3c7260c876..e9cf1d7dd8 100644
--- a/src/components/ApiLogo/styled.elements.tsx
+++ b/src/components/ApiLogo/styled.elements.tsx
@@ -3,7 +3,7 @@ import styled from '../../styled-components';
 
 export const LogoImgEl = styled.img`
   max-height: ${props => props.theme.logo.maxHeight};
-  width: ${props => props.theme.logo.width};
+  max-width: ${props => props.theme.logo.maxWidth};
   display: block;
 `;
 
diff --git a/src/theme.ts b/src/theme.ts
index 5b498d0fa0..ae0b53f9cf 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -58,8 +58,8 @@ const defaultTheme: ThemeInterface = {
     backgroundColor: '#fafafa',
   },
   logo: {
-    maxHeight: 'none',
-    width: '100%',
+    maxHeight: ({ menu }) => menu.width,
+    maxWidth: ({ menu }) => menu.width,
   },
   rightPanel: {
     backgroundColor: '#263238',
@@ -162,7 +162,7 @@ export interface ResolvedThemeInterface {
   };
   logo: {
     maxHeight: string;
-    width: string;
+    maxWidth: string;
   };
   rightPanel: {
     backgroundColor: string;