Fix styling of Whatsapp card & notify banner in config page of web app

- Put Whatsapp card back in Client section.
  - Fixes side spacing on cards
  - Improve Whatsapp card row gaps

- Hide notification banner on web app load. Previously it showed up as
  a yellow dot on smaller displays

src/khoj/interface/web/base_config.html

@@ -85,15 +85,18 @@
         div.api-settings {
             grid-template-rows: 1fr 1fr auto;
         }
-
         #api-settings-card-description {
             margin: 8px 0 0 0;
         }
-
         #api-settings-keys-table {
             margin-bottom: 16px;
         }
 
+        #phone-number-input-card {
+            grid-template-rows: auto;
+            gap: 20px;
+        }
+
         div.instructions {
             font-size: large;
         }

src/khoj/interface/web/config.html

@@ -194,8 +194,6 @@
                 </button>
             </div>
         </div>
-    </div>
-    <div id="whatsapp" class="section">
         <div id="phone-number-input-card" class="api-settings">
             <div class="card-title-row">
                 <img class="card-icon" src="/static/assets/icons/whatsapp.svg" alt="WhatsApp icon">
@@ -294,7 +292,7 @@
     <div class="section"></div>
     </div>
     <div class="section" id="notification-banner-parent">
-        <div id="notification-banner"></div>
+        <div id="notification-banner" style="display: none;"></div>
     </div>
 </div>
 <script>