chore: fix deme on mobile

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 {

demo/index.tsx

@@ -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'));

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"

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;
 `;
 

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;