From e88c1c0c8a24d893a41dad5cc39746644e4e8f4d Mon Sep 17 00:00:00 2001
From: Terry Sutton <saltcod@gmail.com>
Date: Wed, 1 Feb 2023 16:38:16 -0330
Subject: [PATCH] Mobile nudges

---
 apps/docs/components/Clippy/ClippyModal.tsx | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/apps/docs/components/Clippy/ClippyModal.tsx b/apps/docs/components/Clippy/ClippyModal.tsx
index 708431cc614..e96001c5e82 100644
--- a/apps/docs/components/Clippy/ClippyModal.tsx
+++ b/apps/docs/components/Clippy/ClippyModal.tsx
@@ -73,7 +73,7 @@ const ClippyModal: FC<Props> = ({ onClose }) => {
   return (
     <Modal size="xlarge" visible={true} onCancel={onClose} closable={false} hideFooter>
       <div
-        className={`mx-auto flex flex-col gap-4 rounded-lg pt-6 px-6 pb-2 w-full max-w-3xl shadow-2xl overflow-hidden border text-left border-scale-500 bg-scale-100 dark:bg-scale-300 cursor-auto relative`}
+        className={`mx-auto flex flex-col gap-4 rounded-lg p-4 md:pt-6 md:px-6 pb-2 w-full max-w-3xl shadow-2xl overflow-hidden border text-left border-scale-500 bg-scale-100 dark:bg-scale-300 cursor-auto relative min-w-[340px]`}
         onClick={(e) => e.stopPropagation()}
       >
         <div className="relative">
@@ -95,7 +95,7 @@ const ClippyModal: FC<Props> = ({ onClose }) => {
               }
             }}
           />
-          <div className="absolute right-0 top-0 mt-3 mr-4">
+          <div className="absolute right-0 top-0 mt-3 mr-4 hidden md:block">
             <Button type="default" size="tiny" onClick={onClose}>
               esc
             </Button>
@@ -107,7 +107,7 @@ const ClippyModal: FC<Props> = ({ onClose }) => {
             <div className="mt-2">
               <h2 className="text-xs text-scale-900">Not sure where to start?</h2>
 
-              <ul className="text-xs mt-4 text-scale-1000 flex gap-4 flex-wrap max-w-3xl">
+              <ul className="text-xs mt-4 text-scale-1000 grid md:flex gap-4 flex-wrap max-w-3xl">
                 {questions.map((question) => (
                   <li>
                     <button
@@ -132,7 +132,7 @@ const ClippyModal: FC<Props> = ({ onClose }) => {
           <div className="px-4 py-4 dark rounded-lg overflow-y-scroll">
             {answer.includes('Sorry, I don') ? (
               <p className="flex flex-col gap-4 items-center">
-                <div className="flex items-center gap-2 mt-4">
+                <div className="grid md:flex items-center gap-2 mt-4 text-center justify-items-center">
                   <IconAlertCircle />
                   <p>Sorry, I don&apos;t know how to help with that.</p>
                 </div>
@@ -164,15 +164,14 @@ const ClippyModal: FC<Props> = ({ onClose }) => {
         <div className="border-t border-scale-600 mt-4 text-scale-900">
           <div className="flex justify-between items-center py-2 text-xs">
             <div className="flex items-centerp gap-1 pt-3 pb-1">
-              Powered by OpenAI.{' '}
+              <span>Powered by OpenAI.</span>
               <a href="" className="underline">
                 Read the blog post
-              </a>{' '}
-              →
+              </a>
             </div>
             <div className="flex items-center gap-6 py-1">
               {isLoading || cantHelp ? (
-                <span className="bg-scale-400 rounded-lg py-1 px-2 flex items-center gap-2">
+                <span className="bg-scale-400 rounded-lg py-1 px-2 items-center gap-2 hidden md:flex">
                   {isLoading && <IconLoader size={14} className="animate-spin" />}
                   {status}
                 </span>