chore: Better ShortInput styling and updated intro template

Author: PartMan7

src/components/ui/ShortInput.tsx

@@ -2,10 +2,8 @@ export function ShortInput({ onChange }: { onChange: (value: string) => void })
   return (
     <span
       contentEditable
-      className="border border-zinc-300 dark:border-zinc-600 min-w-16 h-auto inline-block"
+      className="border border-zinc-300 dark:border-zinc-600 h-auto px-2"
       onInput={e => onChange((e.target as HTMLDivElement).innerText)}
-    >
-      &nbsp;
-    </span>
+    />
   );
 }

src/index.html

@@ -9,10 +9,10 @@
     <script type="module" src="./Page.tsx" async></script>
     <style>
       :root {
-        --background: hsl(0 0% 100%);
+        --background: hsla(0 0% 100%);
       }
       .dark {
-        --background: hsl(240 10% 3.9%);
+        --background: hsla(240 10% 3.9%);
       }
       body {
         background-color: var(--background);

src/pages/Exercises.tsx

@@ -16,9 +16,11 @@ export function Exercises() {
           <ul>
             {exercises.map(exercise => (
               <li key={exercise}>
-                <Button value={exercise} size="sm">
-                  <a href={`/exercise/${exercise}`}>{exercise}</a>
-                </Button>
+                <a href={`/exercise/${exercise}`}>
+                  <Button value={exercise} size="sm" className="cursor-pointer">
+                    {exercise}
+                  </Button>
+                </a>
               </li>
             ))}
           </ul>

templates/intro.template.ts

@@ -1,7 +1,7 @@
 import type { Equal, Expect } from '@type-challenges/utils';
 
-type SimpleRecord</* SHORT_INPUT */> =
-/* LONG_INPUT */;
+type SimpleRecord</* SHORT_INPUT */> = {
+/* LONG_INPUT */};
 
 /* Test Cases */