ui fixes (#41)

Author: ctate

apps/web/app/playground/layout.tsx

@@ -3,7 +3,5 @@ export default function PlaygroundLayout({
 }: {
   children: React.ReactNode;
 }) {
-  return (
-    <div className="h-screen flex flex-col overflow-hidden">{children}</div>
-  );
+  return <div className="h-dvh flex flex-col overflow-hidden">{children}</div>;
 }

apps/web/components/header.tsx

@@ -51,7 +51,8 @@ export function Header() {
             href="/playground"
             className="text-sm text-muted-foreground hover:text-foreground transition-colors"
           >
-            Playground
+            <span className="sm:hidden">Play</span>
+            <span className="hidden sm:inline">Playground</span>
           </Link>
           <Link
             href="/docs"

apps/web/components/playground.tsx

@@ -330,7 +330,7 @@ ${jsx}
           onChange={(e) => setInputValue(e.target.value)}
           onKeyDown={handleKeyDown}
           placeholder="Describe changes..."
-          className="w-full bg-background text-sm resize-none outline-none placeholder:text-muted-foreground/50"
+          className="w-full bg-background text-base sm:text-sm resize-none outline-none placeholder:text-muted-foreground/50"
           rows={2}
         />
         <div className="flex justify-between items-center mt-2">