style: increase width of notes area to max-w-6xl

src/components/MarkdownView.tsx

@@ -5,10 +5,85 @@ import rehypeKatex from "rehype-katex";
 
 export default function MarkdownView({ children }: { children: string }) {
   return (
-    <div className="prose-invert-tight max-w-none">
+    <div className="max-w-6xl mx-auto py-8 px-4 sm:px-12 bg-slate-900/30 rounded-2xl border border-slate-800/50 backdrop-blur-sm shadow-2xl">
       <ReactMarkdown
         remarkPlugins={[remarkGfm, remarkMath]}
         rehypePlugins={[rehypeKatex]}
+        components={{
+          h1: ({ children }) => (
+            <div className="text-center mb-12 mt-4">
+              <h1 className="text-4xl sm:text-5xl font-bold tracking-tight text-white inline-block relative pb-4">
+                {children}
+                <span className="absolute bottom-0 left-1/4 right-1/4 h-1 bg-primary rounded-full opacity-60" />
+              </h1>
+            </div>
+          ),
+          h2: ({ children }) => (
+            <h2 className="text-2xl sm:text-3xl font-bold mt-12 mb-6 text-white flex items-center gap-3 group">
+              <span className="w-1.5 h-8 bg-primary rounded-full group-hover:scale-y-110 transition-transform" />
+              {children}
+            </h2>
+          ),
+          h3: ({ children }) => (
+            <h3 className="text-xl font-semibold mt-8 mb-4 text-slate-100 flex items-center gap-2">
+              <span className="w-1 h-1 rounded-full bg-primary/60" />
+              {children}
+            </h3>
+          ),
+          p: ({ children }) => (
+            <p className="text-slate-300 leading-relaxed mb-6 text-lg font-light">
+              {children}
+            </p>
+          ),
+          blockquote: ({ children }) => (
+            <div className="my-8 p-6 bg-primary/5 border-l-4 border-primary rounded-r-xl backdrop-blur-md">
+              <div className="text-primary-foreground/90 italic text-lg leading-relaxed font-medium">
+                {children}
+              </div>
+            </div>
+          ),
+          ul: ({ children }) => (
+            <ul className="space-y-3 mb-8 ml-4">
+              {children}
+            </ul>
+          ),
+          li: ({ children }) => (
+            <li className="flex items-start gap-3 text-slate-300 text-lg">
+              <span className="mt-2.5 w-1.5 h-1.5 rounded-full bg-primary/40 shrink-0" />
+              <span>{children}</span>
+            </li>
+          ),
+          table: ({ children }) => (
+            <div className="my-10 overflow-hidden rounded-xl border border-slate-800 shadow-xl bg-slate-900/50">
+              <table className="w-full border-collapse text-left">
+                {children}
+              </table>
+            </div>
+          ),
+          thead: ({ children }) => (
+            <thead className="bg-slate-800/80 text-slate-200">
+              {children}
+            </thead>
+          ),
+          th: ({ children }) => (
+            <th className="px-6 py-4 font-bold uppercase tracking-wider text-xs border-b border-slate-700">
+              {children}
+            </th>
+          ),
+          td: ({ children }) => (
+            <td className="px-6 py-4 border-b border-slate-800 text-slate-300 text-sm">
+              {children}
+            </td>
+          ),
+          strong: ({ children }) => (
+            <strong className="font-bold text-primary/90 underline decoration-primary/30 underline-offset-4">
+              {children}
+            </strong>
+          ),
+          hr: () => (
+            <hr className="my-12 border-t border-slate-800/80" />
+          ),
+        }}
       >
         {children}
       </ReactMarkdown>