From 9b6c5ddba42431e6a6ee44e566ed52879e31d63e Mon Sep 17 00:00:00 2001
From: Debanjum Singh Solanky <debanjum@gmail.com>
Date: Fri, 10 Nov 2023 16:32:22 -0800
Subject: [PATCH] Update action row padding in cards on config page of web app

---
 src/khoj/interface/web/base_config.html | 12 +++++---
 src/khoj/interface/web/config.html      | 40 ++++++++++++-------------
 2 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/src/khoj/interface/web/base_config.html b/src/khoj/interface/web/base_config.html
index 309fdba6..05119fad 100644
--- a/src/khoj/interface/web/base_config.html
+++ b/src/khoj/interface/web/base_config.html
@@ -109,7 +109,7 @@
             display: grid;
             grid-template-rows: repeat(3, 1fr);
             gap: 8px;
-            padding: 24px 16px;
+            padding: 24px 16px 8px;
             width: 320px;
             height: 180px;
             background: var(--background-color);
@@ -162,10 +162,13 @@
             color: grey;
             font-size: 16px;
         }
-        .card-button-row {
+        .card-description-row {
+            padding-top: 4px;
+        }
+        .card-action-row {
             display: grid;
-            grid-template-columns: auto;
-            text-align: right;
+            grid-auto-flow: row;
+            justify-content: left;
         }
         .card-button {
             border: none;
@@ -287,6 +290,7 @@
 
         select#chat-models {
             margin-bottom: 0;
+            padding: 8px;
         }
 
 
diff --git a/src/khoj/interface/web/config.html b/src/khoj/interface/web/config.html
index b2b7fbb3..34a4f642 100644
--- a/src/khoj/interface/web/config.html
+++ b/src/khoj/interface/web/config.html
@@ -29,12 +29,12 @@
                         {% endif %}
                         <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"></path></svg>
                     </a>
-                </div>
-                <div id="clear-computer" class="card-action-row"
-                    style="display: {% if not current_model_state.computer %}none{% endif %}">
-                    <button class="card-button" onclick="clearContentType('computer')">
-                        Disable
-                    </button>
+                    <div id="clear-computer" class="card-action-row"
+                        style="display: {% if not current_model_state.computer %}none{% endif %}">
+                        <button class="card-button" onclick="clearContentType('computer')">
+                            Disable
+                        </button>
+                    </div>
                 </div>
             </div>
              <div class="card">
@@ -61,13 +61,13 @@
                         {% endif %}
                         <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"></path></svg>
                     </a>
-                </div>
-                <div id="clear-github"
-                    class="card-action-row"
-                    style="display: {% if not current_model_state.github %}none{% endif %}">
-                    <button class="card-button" onclick="clearContentType('github')">
-                        Disable
-                    </button>
+                    <div id="clear-github"
+                        class="card-action-row"
+                        style="display: {% if not current_model_state.github %}none{% endif %}">
+                        <button class="card-button" onclick="clearContentType('github')">
+                            Disable
+                        </button>
+                    </div>
                 </div>
             </div>
             <div class="card">
@@ -94,13 +94,13 @@
                         {% endif %}
                         <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"></path></svg>
                     </a>
-                </div>
-                <div id="clear-notion"
-                    class="card-action-row"
-                    style="display: {% if not current_model_state.notion %}none{% endif %}">
-                    <button class="card-button" onclick="clearContentType('notion')">
-                        Disable
-                    </button>
+                    <div id="clear-notion"
+                        class="card-action-row"
+                        style="display: {% if not current_model_state.notion %}none{% endif %}">
+                        <button class="card-button" onclick="clearContentType('notion')">
+                            Disable
+                        </button>
+                    </div>
                 </div>
             </div>
         </div>