fix: make titlebar fully responsive (#1688)

Author: AlokYadavCodes

src/less/components/commands.less

@@ -4,6 +4,43 @@ header {
   box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.2), 0 0 0 rgba(16, 22, 26, 0), 0 1px 1px rgba(16, 22, 26, 0.4);
   background-color: @background-3;
   -webkit-app-region: drag;
+
+  #version-chooser .bp3-button-text::before {
+    content: "Electron v";
+  }
+
+  @media (max-width: 980px) {
+    #version-chooser .bp3-button-text::before{
+      content: "v";
+    }
+  }
+
+  @media (max-width: 800px) {
+    .bp3-button:not(#version-chooser){
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .bp3-button-text{
+        display: none;
+      }
+    }
+
+    .bp3-button > *{
+      margin-right: 0;
+    }
+
+    .bp3-button .bp3-icon-compressed{
+      margin-right: 7px;
+    }
+
+    .address-bar .bp3-input{
+      padding-right: 36px !important;
+    }
+  }
+}
+
+.address-bar .bp3-input{
+  padding-right: 116px !important;
 }
 
 .disabled-menu-tooltip {
@@ -69,7 +106,7 @@ header {
   }
 
   .address-bar {
-    width: 420px;
+    width: ~"min(max(200px, 30vw), 420px)";
     transition: width 0.4s;
 
     input,
@@ -78,7 +115,7 @@ header {
     }
 
     &.empty {
-      width: 300px;
+      width: ~"min(max(160px, 25vw), 300px)";
     }
 
     &:focus-within {
@@ -90,13 +127,14 @@ header {
   }
 
   & > .title {
+    display: inline-block;
+    max-width: 20vw;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
     align-self: stretch;
     flex-shrink: 0;
-
-    flex-flow: column nowrap;
-    justify-content: center;
     user-select: none;
-
-    margin: 0 10px;
+    margin: auto 10px;
   }
 }

src/renderer/components/version-select.tsx

@@ -256,7 +256,7 @@ export const VersionSelect = observer(
         >
           <Button
             id="version-chooser"
-            text={`Electron v${version}`}
+            text={version}
             icon={getItemIcon(currentVersion)}
             onContextMenu={(e: React.MouseEvent<HTMLButtonElement>) => {
               renderVersionContextMenu(e, version);