fix: Boxed layout + description + default templates

## ✅ All 3 Issues Fixed!

### 1. Boxed Layout ✅
**Before:** Full-width (inconsistent with settings pages)
**After:** Max-width container (max-w-7xl)

- Header section boxed
- Subject input boxed
- Body/tabs boxed
- Consistent with other settings pages
- Better visual hierarchy

### 2. Added Description ✅
**Before:** Just title + event/channel
**After:** Title + event/channel + helpful description

Added:
```
"Customize the notification template. Use variables like {customer_name} to personalize messages."
```

- Provides context
- Helps users understand purpose
- Professional UX

### 3. Default Templates ✅
**Already implemented!** Templates have rich default content:

**Order Placed (Admin):**
- Card 1: New order notification
- Card 2: Customer details
- Card 3: View order CTA

**Order Processing (Customer):**
- Card 1: Success card with confirmation
- Card 2: Order summary
- Card 3: Track order CTA

**All templates:**
- ✅ Best practice content
- ✅ Card-based design
- ✅ Professional formatting
- ✅ Clear CTAs
- ✅ Ready to use out-of-box

Store owners can start immediately without setup! 🎉

---

**Layout Structure:**
```
┌─────────────────────────────────┐
│   [max-w-7xl container]         │
│   ┌───────────────────────┐     │
│   │ Back | Title          │     │
│   │ Description            │     │
│   │ Subject Input          │     │
│   │ [Editor | Preview]     │     │
│   └───────────────────────┘     │
└─────────────────────────────────┘
```

Perfect consistency with settings pages! ✨

admin-spa/src/routes/Settings/Notifications/EditTemplate.tsx

@@ -186,7 +186,8 @@ export default function EditTemplate() {
     <div className="flex flex-col h-full">
       {/* Header */}
       <div className="border-b bg-background sticky top-0 z-10">
-        <div className="flex items-center justify-between px-6 py-4">
+        <div className="max-w-7xl mx-auto w-full px-6 py-4">
+          <div className="flex items-center justify-between">
             <div className="flex items-center gap-4">
               <Button
                 variant="ghost"
@@ -201,9 +202,12 @@ export default function EditTemplate() {
                 <h1 className="text-2xl font-bold">
                   {__('Edit Template')}
                 </h1>
-              <p className="text-sm text-muted-foreground">
+                <p className="text-sm text-muted-foreground mt-1">
                   {template?.event_label} - {template?.channel_label}
                 </p>
+                <p className="text-xs text-muted-foreground mt-1">
+                  {__('Customize the notification template. Use variables like {customer_name} to personalize messages.')}
+                </p>
               </div>
             </div>
             <div className="flex items-center gap-2">
@@ -226,9 +230,10 @@ export default function EditTemplate() {
             </Button>
             </div>
           </div>
+        </div>
 
         {/* Subject */}
-        <div className="px-6 pb-4">
+        <div className="max-w-7xl mx-auto w-full px-6 pb-4">
           <Label htmlFor="subject" className="text-sm">{__('Subject / Title')}</Label>
           <Input
             id="subject"
@@ -241,7 +246,8 @@ export default function EditTemplate() {
       </div>
 
       {/* Body - Tabs */}
-      <div className="flex-1 overflow-y-auto px-6 py-6">
+      <div className="flex-1 overflow-y-auto">
+        <div className="max-w-7xl mx-auto w-full px-6 py-6">
         <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
           <TabsList className="grid w-full max-w-md grid-cols-2">
             <TabsTrigger value="editor" className="flex items-center gap-2">
@@ -294,5 +300,6 @@ export default function EditTemplate() {
         </Tabs>
         </div>
       </div>
+    </div>
   );
 }