ui(installer): centre the one-liner box and add vertical breathing room (#367)

The `.max-w-xl` quick-install container sat flush-left against the
hero copy with only `mt-4` above it, so on wider viewports it
hugged the left gutter and crowded the subhead. Add `mx-auto` to
centre it within the `.wrap`, `my-8` to give it clear vertical
separation from the paragraph above and the demo gif below, and
`p-2` to pad the tab/command/caption stack away from the border.

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: JohnMcLear

src/components/InstallOneLiner.tsx

@@ -38,7 +38,7 @@ export const InstallOneLiner = () => {
         }
     };
 
-    return <div className="mt-4 rounded border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 overflow-hidden max-w-xl">
+    return <div className="my-8 mx-auto p-2 rounded border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 overflow-hidden max-w-xl">
         <div className="flex text-sm">
             {(Object.keys(ONE_LINERS) as OS[]).map((key) => {
                 const active = os === key;