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/DesignSystem/design-system.css b/website/src/components/Playground/DesignSystem/design-system.css
index 1999d0358653..77fb2c0046f4 100644
--- a/website/src/components/Playground/DesignSystem/design-system.css
+++ b/website/src/components/Playground/DesignSystem/design-system.css
@@ -110,6 +110,7 @@ html[data-theme='dark'] .small.rt-TextFieldRoot:focus-within {
   transition: all 0.2s ease-in-out;    /* Quick animation for transitions */
   border-radius: 0;
   margin-bottom:0;
+  margin-top:-4px;
 }
 html[data-theme='dark'] .small.rt-TextFieldRoot {
   background: none;
diff --git a/website/src/components/Playground/styles.module.css b/website/src/components/Playground/styles.module.css
index 4dbd612b25b5..4fd4c08aae1d 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: 4px;
 }
 .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) {