chore(ai-help): improve History banner on mobile

mdn · Dec 11, 2023 · 5a4f14e · 5a4f14e
1 parent b21bed2
commit 5a4f14e
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 24 deletions.
diff --git a/client/src/plus/ai-help/history.scss b/client/src/plus/ai-help/history.scss
@@ -183,4 +183,29 @@
       }
     }
   }
+
+  @media screen and (max-width: $screen-md) {
+    margin: 0.5rem;
+    padding: 1rem 1.5rem;
+
+    figure {
+      align-items: center;
+      display: flex;
+      flex-direction: row;
+      gap: 1.5rem;
+
+      .icons-highlighted {
+        margin-top: -0.75rem;
+      }
+
+      p {
+        margin: 0.25rem;
+        text-align: left;
+      }
+
+      a[href] {
+        display: inline-block;
+      }
+    }
+  }
 }
diff --git a/client/src/plus/ai-help/history.tsx b/client/src/plus/ai-help/history.tsx
@@ -256,29 +256,29 @@ export function AIHelpHistoryActivation() {
   const gleanClick = useGleanClick();
 
   return (
-    <aside className="ai-help-history-activation" tabIndex={-1}>
-      <section>
-        <p>
-          <HighlightedIcon name="history" />
-        </p>
-        <p>
-          <strong>Answer History</strong>
-        </p>
-        <p>
-          <span className="teaser">
-            You can now effortlessly revisit and continue past conversations
-          </span>
-        </p>
-        <p>
-          <Button
-            type="link"
-            href={`/${locale}/plus/settings#ai-help--history-enable`}
-            onClickHandler={() => gleanClick(`${AI_HELP}: history enable`)}
-          >
-            Enable History
-          </Button>
-        </p>
-      </section>
-    </aside>
+    <section className="ai-help-history-activation">
+      <figure>
+        <HighlightedIcon name="history" />
+        <figcaption>
+          <p>
+            <strong>Answer History</strong>
+          </p>
+          <p>
+            <span className="teaser">
+              You can now effortlessly revisit and continue past conversations
+            </span>
+          </p>
+          <p>
+            <Button
+              type="link"
+              href={`/${locale}/plus/settings#ai-help--history-enable`}
+              onClickHandler={() => gleanClick(`${AI_HELP}: history enable`)}
+            >
+              Enable History
+            </Button>
+          </p>
+        </figcaption>
+      </figure>
+    </section>
   );
 }