Make "cookie settings" button clickable by getting Ask AI button out of the way. (#1351)

* Simplify containers of Ask AI button to stop overlapping cookie settings link.

* Remove tall z-index of What's New section.

Author: sfc-gh-tteixeira

components/navigation/chatSticky.js

@@ -5,11 +5,7 @@ import styles from "./chatSticky.module.css";
 const ChatSticky = () => {
   return (
     <div className={classNames(styles.Container)}>
-      <nav className={styles.Navigation} id="chat-sticky">
-        <section className={styles.NavigationContainer}>
-          <Kapa />
-        </section>
-      </nav>
+      <Kapa />
     </div>
   );
 };

components/navigation/chatSticky.module.css

@@ -1,11 +1,3 @@
 .Container {
-  @apply fixed bottom-[30px] w-full z-10;
-}
-
-.Navigation {
-  @apply container px-2 xl:px-4 flex items-center justify-between relative transition-all mx-auto h-full left-auto;
-}
-
-.NavigationContainer {
-  @apply flex flex-auto justify-end;
+  @apply fixed bottom-8 right-2 sm:right-8 z-30;
 }

components/utilities/kapa.js

@@ -15,28 +15,24 @@ const Kapa = () => {
     }
   };
   let kapaWidget = (
-    <div className={styles.FooterContainer}>
-      <section className={styles.AskButtonContainer}>
-        <button
-          id="kapa-ai"
-          type="button"
-          className={styles.AskButton}
-          onMouseOver={showTooltip}
-          onMouseOut={hideTooltip}
-        >
-          <i className={styles.AskIcon}>forum</i> Ask AI
-        </button>
-        {/* <div className={styles.Tooltip}>
-          <p>Try our new docs assistant!</p>
-        </div> */}
-        <script
-          src="https://widget.kapa.ai/kapa-widget.bundle.js"
-          data-website-id="e81c2b35-6c03-4576-a56c-3c825f866e06"
-          data-project-name="Streamlit"
-          data-project-color="#000000"
-          data-project-logo="https://docs.streamlit.io/logo.svg"
-          data-modal-title="Streamlit docs assistant (beta)"
-          data-modal-disclaimer="
+    <>
+      <button
+        id="kapa-ai"
+        type="button"
+        className={styles.AskButton}
+        onMouseOver={showTooltip}
+        onMouseOut={hideTooltip}
+      >
+        <i className={styles.AskIcon}>forum</i> Ask AI
+      </button>
+      <script
+        src="https://widget.kapa.ai/kapa-widget.bundle.js"
+        data-website-id="e81c2b35-6c03-4576-a56c-3c825f866e06"
+        data-project-name="Streamlit"
+        data-project-color="#000000"
+        data-project-logo="https://docs.streamlit.io/logo.svg"
+        data-modal-title="Streamlit docs assistant (beta)"
+        data-modal-disclaimer="
                 This AI chatbot is powered by kapa.ai and public Streamlit information.
                 Answers may be inaccurate, inefficient, or biased. Any use or decisions
                 based on such answers should include reasonable practices including
@@ -52,16 +48,15 @@ const Kapa = () => {
                 “Content”) may be used by Streamlit and kapa.ai to provide, maintain,
                 develop, and improve their respective offerings. For more information on how
                 kapa.ai may use your Content, see https://www.kapa.ai/content/terms-of-service."
-          data-button-hide="true"
-          data-modal-override-open-id="kapa-ai"
-          data-modal-lock-scroll="false"
-          data-modal-border-radius="6px"
-          data-modal-image-height="18px"
-          data-answer-feedback-button-active-border="1px solid #808495"
-          data-user-analytics-cookie-enabled="false"
-        ></script>
-      </section>
-    </div>
+        data-button-hide="true"
+        data-modal-override-open-id="kapa-ai"
+        data-modal-lock-scroll="false"
+        data-modal-border-radius="6px"
+        data-modal-image-height="18px"
+        data-answer-feedback-button-active-border="1px solid #808495"
+        data-user-analytics-cookie-enabled="false"
+      ></script>
+    </>
   );
 
   return kapaWidget;

components/utilities/kapa.module.css

@@ -22,12 +22,13 @@
   }
 }
 
-.AskButtonContainer {
-  @apply flex justify-end;
-}
-
 .AskButton {
-  @apply flex items-center justify-center p-0 rounded-md h-8 px-4 cursor-pointer bg-gray-100 text-white hover:opacity-90 hover:shadow-sm;
+  @apply flex items-center justify-center
+    rounded-md
+    h-8
+    py-0 px-4
+    cursor-pointer
+    bg-gray-100 text-white hover:opacity-90 hover:shadow-sm;
   animation: wiggle 2s 1;
 }