From 111a21ea08b2df3fff896f463adf8353157fdc5b Mon Sep 17 00:00:00 2001
From: Wei Gao <wgao19@gmail.com>
Date: Sat, 8 Jun 2019 00:32:52 +0800
Subject: [PATCH] fix(v2): browser window styles on smaller screen (#1586)

---
 website/components/BrowserWindow/index.js     | 17 +++++-----
 .../BrowserWindow/styles.module.css           | 33 ++++++++++---------
 2 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/website/components/BrowserWindow/index.js b/website/components/BrowserWindow/index.js
index f1318ed24f..ad12238055 100644
--- a/website/components/BrowserWindow/index.js
+++ b/website/components/BrowserWindow/index.js
@@ -6,24 +6,23 @@
  */
 
 import React from 'react';
-import classnames from 'classnames';
 
 import styles from './styles.module.css';
 
 function BrowserWindow({children, minHeight, url}) {
   return (
-    <div className={styles.container} style={{minHeight}}>
-      <div className={styles.row}>
-        <div className={classnames(styles.column, styles.left)}>
+    <div className={styles.browserWindow} style={{minHeight}}>
+      <div className={styles.browserWindowHeader}>
+        <div className={styles.buttons}>
           <span className={styles.dot} style={{background: '#f25f58'}} />
           <span className={styles.dot} style={{background: '#fbbe3c'}} />
           <span className={styles.dot} style={{background: '#58cb42'}} />
         </div>
-        <div className={classnames(styles.column, styles.middle)}>
-          <input disabled={true} type="text" value={url} readOnly />
+        <div className={styles.browserWindowAddressBar}>
+          <input disabled type="text" value={url} readOnly />
         </div>
-        <div className={classnames(styles.column, styles.right)}>
-          <div style={{float: 'right'}}>
+        <div className={styles.browserWindowMenuIcon}>
+          <div>
             <span className={styles.bar} />
             <span className={styles.bar} />
             <span className={styles.bar} />
@@ -31,7 +30,7 @@ function BrowserWindow({children, minHeight, url}) {
         </div>
       </div>
 
-      <div className={styles.content}>{children}</div>
+      <div className={styles.browserWindowBody}>{children}</div>
     </div>
   );
 }
diff --git a/website/components/BrowserWindow/styles.module.css b/website/components/BrowserWindow/styles.module.css
index 7cd928aae5..c4b6e374ad 100644
--- a/website/components/BrowserWindow/styles.module.css
+++ b/website/components/BrowserWindow/styles.module.css
@@ -1,13 +1,14 @@
-.container {
+.browserWindow {
   border: 3px solid var(--ifm-color-emphasis-alpha-10);
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
+  border-top-left-radius: var(--ifm-global-radius);
+  border-top-right-radius: var(--ifm-global-radius);
 }
 
-.row {
-  display: flex;
+.browserWindowHeader {
+  align-items: center;
   background: var(--ifm-color-emphasis-alpha-10);
-  padding: 0.5rem;
+  display: flex;
+  padding: 0.5rem 1rem;
 }
 
 .row:after {
@@ -16,12 +17,8 @@
   clear: both;
 }
 
-.column {
-  float: left;
-}
-
-.left {
-  width: 15%;
+.buttons {
+  white-space: nowrap;
 }
 
 .right {
@@ -29,8 +26,10 @@
   width: 10%;
 }
 
-.middle {
-  width: 75%;
+.browserWindowAddressBar {
+  flex: 1 0 auto;
+  margin-left: 0.5rem;
+  margin-right: 1rem;
 }
 
 .dot {
@@ -54,6 +53,10 @@ input[type='text'] {
   padding: 5px 15px;
 }
 
+.browserWindowMenuIcon {
+  margin-left: auto;
+}
+
 .bar {
   width: 17px;
   height: 3px;
@@ -62,6 +65,6 @@ input[type='text'] {
   display: block;
 }
 
-.content {
+.browserWindowBody {
   padding: 1rem;
 }