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

@@ -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 {

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>