docs: Refine todo list styles

Author: ntucker

docs/core/api/useDebounce.md

@@ -76,16 +76,16 @@ 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">
             {issue.title}
           </a>
         </div>
       ))}
-    </div>
+    </>
   );
 }
 export default React.memo(IssueList) as typeof IssueList;

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>
   );
 }

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;

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);

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) {