From 2755f138876732384b7c4084fdf5c84a450f945c Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Thu, 1 Apr 2021 12:20:41 +0300
Subject: [PATCH] Add media queries

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 src/renderer/components/+preferences/preferences.tsx |  5 +++++
 src/renderer/components/layout/page-layout.scss      | 12 +++++++-----
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/renderer/components/+preferences/preferences.tsx b/src/renderer/components/+preferences/preferences.tsx
index cb0eb0d9f4..8159445c19 100644
--- a/src/renderer/components/+preferences/preferences.tsx
+++ b/src/renderer/components/+preferences/preferences.tsx
@@ -66,6 +66,11 @@ export class Preferences extends React.Component {
           label="Application"
           active={this.activeTab == PreferencesTab.Application}
         />
+        <Tab
+          value={PreferencesTab.Proxy}
+          label="Proxy"
+          active={this.activeTab == PreferencesTab.Proxy}
+        />
         <Tab
           value={PreferencesTab.Kubernetes}
           label="Kubernetes"
diff --git a/src/renderer/components/layout/page-layout.scss b/src/renderer/components/layout/page-layout.scss
index 96af1a78e4..e9eb61e471 100644
--- a/src/renderer/components/layout/page-layout.scss
+++ b/src/renderer/components/layout/page-layout.scss
@@ -1,8 +1,7 @@
 .PageLayout {
-  --width: 60%;
+  --width: 75%;
   --nav-width: 180px;
   --nav-column-width: 30vw;
-  --spacing: calc(var(--unit) * 2);
 
   position: relative;
   width: 100%;
@@ -10,14 +9,17 @@
   display: grid !important;
   grid-template-columns: 1fr;
 
-  &.showNavigation {
-    --width: 75%;
+  @include media("<1000px") {
+    --width: 85%;
+  }
 
+  &.showNavigation {
     grid-template-columns: var(--nav-column-width) 1fr;
 
     > .content-wrapper {
       > .content {
         width: 100%;
+        max-width: 800px;
         padding-left: 1px; // Fix visual content crop
         padding-right: calc(var(--nav-column-width) - var(--nav-width));
       }
@@ -53,7 +55,6 @@
           font-weight: 800;
           line-height: 16px;
           text-transform: uppercase;
-          color: var(--textColorSecondary);
 
           &:first-child {
             padding-top: 0;
@@ -71,6 +72,7 @@
           font-size: 15px;
           line-height: 20px;
           cursor: pointer;
+          color: var(--textColorSecondary);
 
           &::after {
             content: none;