From c52ed333fa3aa7cf7fe9bc8b8f1f962316dc770b Mon Sep 17 00:00:00 2001
From: Debanjum Singh Solanky <debanjum@gmail.com>
Date: Tue, 30 Apr 2024 18:08:20 +0530
Subject: [PATCH] Make content, cards on config pages occupy the whole middle
 column

- Make the config page content use  the same top level 3-column layout
  as the khoj-header-wrapper
  This ensures the content is aligned with heading pane width
- Let cards and other settings sections scale to the width of their
  grid element. This utilizes more of the screen space and does it
  consistently across the different settings pages
---
 src/khoj/interface/web/base_config.html | 10 ++++++----
 src/khoj/interface/web/config.html      |  1 -
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/khoj/interface/web/base_config.html b/src/khoj/interface/web/base_config.html
index ccd301c7..5636eca1 100644
--- a/src/khoj/interface/web/base_config.html
+++ b/src/khoj/interface/web/base_config.html
@@ -24,9 +24,11 @@
 
             <div class="filler"></div>
         </div>
-        <div class=”content”>
+        <div class="content khoj-header-wrapper">
+            <div class="filler"></div>
             {% block content %}
             {% endblock %}
+            <div class="filler"></div>
         </div>
     </body>
     <script>
@@ -62,7 +64,7 @@
         }
         .section {
             display: grid;
-            justify-self: center;
+            justify-self: normal;
         }
 
         div.section-manage-files,
@@ -118,7 +120,7 @@
             grid-template-rows: repeat(3, 1fr);
             gap: 8px;
             padding: 24px 16px 8px;
-            width: 320px;
+            width: 100%;
             height: 180px;
             background: var(--background-color);
             border: 1px solid rgb(229, 229, 229);
@@ -334,7 +336,7 @@
 
 
         div.api-settings {
-            width: 660px;
+            width: 100%;
         }
 
         img.api-key-action:hover {
diff --git a/src/khoj/interface/web/config.html b/src/khoj/interface/web/config.html
index 37a68e57..3e9d051b 100644
--- a/src/khoj/interface/web/config.html
+++ b/src/khoj/interface/web/config.html
@@ -369,7 +369,6 @@
     </div>
     {% endif %}
     <div class="section"></div>
-    </div>
     <div class="section" id="notification-banner-parent">
         <div id="notification-banner" style="display: none;"></div>
     </div>