From 022d695309bb7bc1ed7f113f37b66c7b2427546f Mon Sep 17 00:00:00 2001
From: Debanjum Singh Solanky <debanjum@gmail.com>
Date: Wed, 1 Nov 2023 16:39:11 -0700
Subject: [PATCH] Switch to narrow view below width of 700px on web client

This makes the dropdown menu align better to the profile picture in
mobile view
---
 src/khoj/interface/web/assets/khoj.css  | 2 +-
 src/khoj/interface/web/base_config.html | 4 ++--
 src/khoj/interface/web/chat.html        | 4 ++--
 src/khoj/interface/web/index.html       | 6 +++---
 src/khoj/interface/web/login.html       | 6 +++---
 5 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/khoj/interface/web/assets/khoj.css b/src/khoj/interface/web/assets/khoj.css
index 178bcdd8..25cf76af 100644
--- a/src/khoj/interface/web/assets/khoj.css
+++ b/src/khoj/interface/web/assets/khoj.css
@@ -183,7 +183,7 @@ p#khoj-banner {
     }
 }
 
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 700px) {
     div.khoj-header {
         display: grid;
         grid-auto-flow: column;
diff --git a/src/khoj/interface/web/base_config.html b/src/khoj/interface/web/base_config.html
index 46e0040f..3e9a604c 100644
--- a/src/khoj/interface/web/base_config.html
+++ b/src/khoj/interface/web/base_config.html
@@ -234,12 +234,12 @@
             height: 32px;
         }
 
-        @media screen and (max-width: 600px) {
+        @media screen and (max-width: 700px) {
             .section-cards {
                 grid-template-columns: 1fr;
             }
         }
-        @media only screen and (max-width: 600px) {
+        @media only screen and (max-width: 700px) {
             body {
                 display: grid;
                 grid-template-columns: 1fr;
diff --git a/src/khoj/interface/web/chat.html b/src/khoj/interface/web/chat.html
index e4739cd2..d36e8062 100644
--- a/src/khoj/interface/web/chat.html
+++ b/src/khoj/interface/web/chat.html
@@ -465,7 +465,7 @@
                 padding: 2px 4px;
             }
         }
-        @media only screen and (max-width: 600px) {
+        @media only screen and (max-width: 700px) {
             body {
                 grid-template-columns: 1fr;
                 grid-template-rows: auto auto minmax(80px, 100%) auto;
@@ -485,7 +485,7 @@
                 padding: 0;
             }
         }
-        @media only screen and (min-width: 600px) {
+        @media only screen and (min-width: 700px) {
             body {
                 grid-template-columns: auto min(70vw, 100%) auto;
                 grid-template-rows: auto auto minmax(80px, 100%) auto;
diff --git a/src/khoj/interface/web/index.html b/src/khoj/interface/web/index.html
index 8ea846e7..22cef185 100644
--- a/src/khoj/interface/web/index.html
+++ b/src/khoj/interface/web/index.html
@@ -300,7 +300,7 @@
     </body>
 
     <style>
-        @media only screen and (max-width: 600px) {
+        @media only screen and (max-width: 700px) {
             body {
                 display: grid;
                 grid-template-columns: 1fr;
@@ -311,7 +311,7 @@
                 grid-column: 1;
             }
         }
-        @media only screen and (min-width: 600px) {
+        @media only screen and (min-width: 700px) {
             body {
                 display: grid;
                 grid-template-columns: 1fr min(70vw, 100%) 1fr;
@@ -495,7 +495,7 @@
             box-shadow: 0 0 11px #aaa;
         }
 
-        @media only screen and (max-width: 600px) {
+        @media only screen and (max-width: 700px) {
             a.khoj-banner {
                 display: block;
             }
diff --git a/src/khoj/interface/web/login.html b/src/khoj/interface/web/login.html
index 1bab4221..89515617 100644
--- a/src/khoj/interface/web/login.html
+++ b/src/khoj/interface/web/login.html
@@ -58,7 +58,7 @@
     </body>
 
     <style>
-        @media only screen and (max-width: 600px) {
+        @media only screen and (max-width: 700px) {
             body {
                 display: grid;
                 grid-template-columns: 1fr;
@@ -69,7 +69,7 @@
                 grid-column: 1;
             }
         }
-        @media only screen and (min-width: 600px) {
+        @media only screen and (min-width: 700px) {
             body {
                 display: grid;
                 grid-template-columns: 1fr min(70vw, 100%) 1fr;
@@ -150,7 +150,7 @@
             font-size: x-large;
         }
 
-        @media only screen and (max-width: 600px) {
+        @media only screen and (max-width: 700px) {
             a.khoj-banner {
                 display: block;
             }