From 75365f0bc5f6009ac4a11dfcfd6ca59f7b9f8a64 Mon Sep 17 00:00:00 2001
From: Brian Clifton <brian@clifton.me>
Date: Mon, 19 Sep 2016 17:22:40 -0700
Subject: [PATCH] Window can be as skinny as 480px wide on Windows now without
 issues. Works well with URL bar always showing and also with title mode.

---
 js/stores/appStore.js   |  2 +-
 less/navigationBar.less | 48 ++++++++++++++++++++++++++---------------
 less/variables.less     |  4 +++-
 3 files changed, 35 insertions(+), 19 deletions(-)

diff --git a/js/stores/appStore.js b/js/stores/appStore.js
index c69d8a73d4e..66589db6244 100644
--- a/js/stores/appStore.js
+++ b/js/stores/appStore.js
@@ -257,7 +257,7 @@ function windowDefaults () {
     show: false,
     width: appState.get('defaultWindowWidth'),
     height: appState.get('defaultWindowHeight'),
-    minWidth: isWindows ? 640 : 480, // Windows has caption buttons (min/max/close) which take extra space
+    minWidth: 480,
     minHeight: 300,
     minModalHeight: 100,
     minModalWidth: 100,
diff --git a/less/navigationBar.less b/less/navigationBar.less
index 3d14dd6204d..8620651885f 100644
--- a/less/navigationBar.less
+++ b/less/navigationBar.less
@@ -29,26 +29,40 @@
                  - (@navbarBraveButtonWidth + 2 * @navbarButtonSpacing);
 }
 
-// (Windows) Add extra padding to have spacing match the close button
-.platform--win32 .navigatorWrapper {
-  margin-left: @navbarLeftMarginWindows;
-}
-// (Windows) Style adjustments needed for slim titlebar to work properly
-.platform--win32 div#window.frameless {
-  border: 1px solid #000;
-  box-sizing: border-box;
-}
-// (Windows) Extension button not clickable unless it has no-drag
-.platform--win32 .extensionButton {
-  -webkit-app-region: no-drag !important;
-}
-// (Windows) remove margin next to brave button when lower than 720px
-.platform--win32 .navigatorWrapper .topLevelEndButtons {
-  @media (max-width: @windowsMinimumViewport) {
-    margin-left: 0;
+// Windows specific fixes
+.platform--win32 {
+  .navigatorWrapper {
+    margin-left: @navbarLeftMarginWindows;
+  }
+
+  div#window.frameless {
+    border: 1px solid #000;
+    box-sizing: border-box;
+  }
+
+  // Extension button not clickable unless it has no-drag
+  .extensionButton {
+    -webkit-app-region: no-drag !important;
+  }
+
+  // changes to ensure window can be as small as 480px wide
+  // and still be useable and have the caption buttons intact
+  @media (max-width: @breakpointExtensionButtonPadding) {
+    .navigatorWrapper .topLevelEndButtons {
+      margin-left: 0;
+    }
+  }
+  @media (max-width: @breakpointSmallWin32) {
+    .loadTime { display: none; }
+    #urlInput { max-width: 75px; }
+    #titleBar { width: 100px; }
+  }
+  @media (max-width: @breakpointTinyWin32) {
+    #urlInput { max-width: 50px; }
   }
 }
 
+// Styles had to be reworked to properly position the new caption buttons for Windows
 .navbarCaptionButtonContainer {
   display: flex;
   border-bottom: 1px solid #aaaaaa;
diff --git a/less/variables.less b/less/variables.less
index 73c5411dfc9..3ce797d11ea 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -128,7 +128,9 @@
 @zindexWindowFullScreenBanner: 4100;
 
 @breakpointNarrowViewport: 600px;
-@windowsMinimumViewport: 720px;
+@breakpointExtensionButtonPadding: 720px;
+@breakpointSmallWin32: 650px;
+@breakpointTinyWin32: 500px;
 @transitionDuration: 100ms;
 
 @transition: all 600ms linear;