From c1a480c6d8b600923e6867b5ef743020bba5f7a5 Mon Sep 17 00:00:00 2001
From: Nathaniel Tucker <me@ntucker.me>
Date: Mon, 16 Sep 2024 14:57:25 -0400
Subject: [PATCH] docs: Refine todo list styles

---
 docs/core/api/useDebounce.md                                | 6 +++---
 .../src/components/Playground/DesignSystem/CancelButton.tsx | 4 ++--
 website/src/components/Playground/styles.module.css         | 2 ++
 website/src/css/customTheme.css                             | 1 +
 4 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/docs/core/api/useDebounce.md b/docs/core/api/useDebounce.md
index 5fcbd2fb351b..09bd5c69906f 100644
--- a/docs/core/api/useDebounce.md
+++ b/docs/core/api/useDebounce.md
@@ -76,8 +76,8 @@ function IssueList({ query, owner, repo }) {
   const q = `${query} repo:${owner}/${repo}`;
   const response = useSuspense(issueQuery, { q });
   return (
-    <div>
-      <small>{response.total_count} results</small>
+    <>
+      <small style={{display:'block'}}>{response.total_count} results</small>
       {response.items.slice(0, 5).map(issue => (
         <div key={issue.pk()}>
           <a href={issue.html_url} target="_blank">
@@ -85,7 +85,7 @@ function IssueList({ query, owner, repo }) {
           </a>
         </div>
       ))}
-    </div>
+    </>
   );
 }
 export default React.memo(IssueList) as typeof IssueList;
diff --git a/website/src/components/Playground/DesignSystem/CancelButton.tsx b/website/src/components/Playground/DesignSystem/CancelButton.tsx
index 8b66eb058103..19443c12c814 100644
--- a/website/src/components/Playground/DesignSystem/CancelButton.tsx
+++ b/website/src/components/Playground/DesignSystem/CancelButton.tsx
@@ -9,7 +9,7 @@ export function CancelButton({ onClick }: { onClick?: () => void }) {
         textAlign: 'right',
       }}
     >
-      <span
+      <div
         style={{ cursor: onClick ? 'pointer' : 'default' }}
         onClick={onClick}
       >
@@ -24,7 +24,7 @@ export function CancelButton({ onClick }: { onClick?: () => void }) {
             &nbsp;
           </div>
         }
-      </span>
+      </div>
     </div>
   );
 }
diff --git a/website/src/components/Playground/styles.module.css b/website/src/components/Playground/styles.module.css
index 4dbd612b25b5..d38d0312ea01 100644
--- a/website/src/components/Playground/styles.module.css
+++ b/website/src/components/Playground/styles.module.css
@@ -295,6 +295,8 @@ div > .playgroundHeader.subtabs {
 }
 .playgroundPreview :global(.listItem) > label {
   flex: 1 1 100%;
+  line-height: 1.1;
+  margin-bottom: .5ex;
 }
 .playgroundPreview :global(.listItem) > label input[type="text"] {
   width: calc(100% - 21px);
diff --git a/website/src/css/customTheme.css b/website/src/css/customTheme.css
index a919ba5a1078..c74d598107bf 100644
--- a/website/src/css/customTheme.css
+++ b/website/src/css/customTheme.css
@@ -113,6 +113,7 @@ html[data-theme='dark'] .docusaurus-highlight-code-line {
 small {
   /* google doesn't like anything smaller than 12 */
   font-size: 12px;
+  line-height: 1;
 }
 
 @media only screen and (max-width: 996px), (pointer: coarse) {