docs: Refine todo list styles

Author: ntucker

docs/core/api/useDebounce.md

@@ -76,16 +76,18 @@ 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;
@@ -103,6 +105,7 @@ export default function SearchIssues() {
   return (
     <div>
       <TextInput
+        spellCheck="false"
         placeholder="Search react issues"
         value={query}
         onChange={handleChange}

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/TextInput.tsx

@@ -22,7 +22,7 @@ export function TextInput({
       })}
     >
       {children}
-      <input spellCheck="false" className="rt-TextFieldInput" {...props} />
+      <input className="rt-TextFieldInput" {...props} />
       {label ?
         <label className="rt-TextFieldLabel">{label}</label>
       : null}

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;
@@ -155,7 +156,7 @@ html[data-theme='dark'] .small.rt-TextFieldRoot {
   resize: vertical; /* Allow vertical resizing */
   min-height: 4em; /* Set a minimum height */
   box-sizing: border-box;
-  margin-bottom: -8px;
+  margin-bottom: -4px;
 }
 
 

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