fix: slight layout improvement

website/src/repl/panel/PatternsTab.jsx

@@ -17,7 +17,8 @@ function classNames(...classes) {
 export function PatternsTab({ context }) {
   const { userPatterns, activePattern } = useSettings();
   return (
-    <div className="px-4 w-full text-foreground">
+    <div className="px-4 w-full text-foreground space-y-4">
+      <section>
         <h2 className="text-xl mb-2">My Patterns</h2>
         <div className="space-x-1">
           <button
@@ -25,7 +26,6 @@ export function PatternsTab({ context }) {
             onClick={() => {
               const name = newUserPattern();
               const { code } = getUserPattern(name);
-            console.log('code', code);
               context.handleUpdate(code);
             }}
           >
@@ -50,13 +50,15 @@ export function PatternsTab({ context }) {
             )}
             onClick={() => {
               const { code } = up;
-            context.handleUpdate(code);
               setActivePattern(key);
+              context.handleUpdate(code);
             }}
           >
             {key}
           </a>
         ))}
+      </section>
+      <section>
         <h2 className="text-xl mb-2">Examples</h2>
         {Object.entries(tunes).map(([key, tune]) => (
           <a
@@ -73,6 +75,7 @@ export function PatternsTab({ context }) {
             {key}
           </a>
         ))}
+      </section>
     </div>
   );
 }