fix: clean up Live Preview frame and improve content centering

- Remove unnecessary gray frame that was appearing below the main frame
- Simplify frame structure by removing relative positioning and max-width constraints
- Fix content centering by using fixed width (200px) instead of responsive max-width
- Remove redundant wrapper divs that were causing layout issues
- Ensure proper centering with flex justify-center on the container
- Maintain 9:16 aspect ratio and 400px height for realistic mobile appearance
- Keep the black frame with rounded corners and shadow for professional look

The Live Preview now shows a clean, properly centered mobile frame without any extra gray elements.

Author: mmaxence

src/app/product/UX-patterns/page.tsx

@@ -452,9 +452,9 @@ const ComingSoonPattern = () => (
                               <h5 className="text-sm font-medium text-white">
                                 Live Preview
                               </h5>
-                              <div className="relative flex justify-center">
+                              <div className="flex justify-center">
                                 {/* Mobile Frame with 9:16 ratio (vertical phone) */}
-                                <div className="w-full max-w-[200px] bg-black rounded-[1.5rem] p-1 shadow-2xl">
+                                <div className="w-[200px] bg-black rounded-[1.5rem] p-1 shadow-2xl">
                                   <div className="bg-muted/20 rounded-[1.25rem] h-[400px] flex items-center justify-center" style={{ aspectRatio: '9/16' }}>
                                     <div className="text-center space-y-3 px-4">
                                       <Smartphone className="w-8 h-8 text-muted-foreground mx-auto" />