From 7ff429502d3959f3f99eae4048fe712bdc90b91d Mon Sep 17 00:00:00 2001
From: Dwindi Ramadhana <dwindown@DwMacMiniM4.local>
Date: Sat, 28 Feb 2026 20:40:34 +0700
Subject: [PATCH] style: Standardize dialog paddings across Admin SPA

---
 .../src/components/ui/markdown-toolbar.tsx    |  10 +-
 .../Pages/components/CreatePageModal.tsx      |   2 +-
 .../src/routes/Marketing/Campaigns/Edit.tsx   |   4 +-
 admin-spa/src/routes/Products/Attributes.tsx  |   8 +-
 admin-spa/src/routes/Products/Categories.tsx  |   2 +-
 .../Products/SoftwareVersions/index.tsx       |   2 +-
 admin-spa/src/routes/Products/Tags.tsx        |   2 +-
 .../Settings/Notifications/ChannelConfig.tsx  | 174 +++++++++---------
 admin-spa/src/routes/Settings/Tax.tsx         |   4 +-
 9 files changed, 104 insertions(+), 104 deletions(-)

diff --git a/admin-spa/src/components/ui/markdown-toolbar.tsx b/admin-spa/src/components/ui/markdown-toolbar.tsx
index a42c8e1..c157152 100644
--- a/admin-spa/src/components/ui/markdown-toolbar.tsx
+++ b/admin-spa/src/components/ui/markdown-toolbar.tsx
@@ -53,7 +53,7 @@ export function MarkdownToolbar({ onInsert }: MarkdownToolbarProps) {
     const cardTemplate = selectedCardType === 'default'
       ? '[card]\n\n## Your heading here\n\nYour content here...\n\n[/card]'
       : `[card:${selectedCardType}]\n\n## Your heading here\n\nYour content here...\n\n[/card]`;
-    
+
     onInsert(cardTemplate, '');
     setShowCardDialog(false);
   };
@@ -93,7 +93,7 @@ export function MarkdownToolbar({ onInsert }: MarkdownToolbarProps) {
               Choose a card type to insert into your template
             </DialogDescription>
           </DialogHeader>
-          <div className="space-y-4 py-4">
+          <div className="space-y-4 px-6 py-4">
             <div className="space-y-2">
               <label className="text-sm font-medium">Card Type</label>
               <Select value={selectedCardType} onValueChange={setSelectedCardType}>
@@ -140,7 +140,7 @@ export function MarkdownToolbar({ onInsert }: MarkdownToolbarProps) {
               Choose a button style to insert
             </DialogDescription>
           </DialogHeader>
-          <div className="space-y-4 py-4">
+          <div className="space-y-4 px-6 py-4">
             <div className="space-y-2">
               <label className="text-sm font-medium">Button Style</label>
               <Select value={buttonStyle} onValueChange={setButtonStyle}>
@@ -191,7 +191,7 @@ export function MarkdownToolbar({ onInsert }: MarkdownToolbarProps) {
               Insert an image using standard Markdown syntax
             </DialogDescription>
           </DialogHeader>
-          <div className="space-y-4 py-4">
+          <div className="space-y-4 px-6 py-4">
             <div className="text-sm text-muted-foreground">
               <p>Syntax: <code className="px-1 py-0.5 bg-muted rounded">![Alt text](image-url)</code></p>
               <p className="mt-2">Example: <code className="px-1 py-0.5 bg-muted rounded">![Logo](https://example.com/logo.png)</code></p>
@@ -220,7 +220,7 @@ export function MarkdownToolbar({ onInsert }: MarkdownToolbarProps) {
           <tool.icon className="h-4 w-4" />
         </Button>
       ))}
-      
+
       <div className="flex-1" />
       <div className="flex items-center gap-2 text-xs text-muted-foreground">
         <span className="hidden sm:inline">Quick formatting:</span>
diff --git a/admin-spa/src/routes/Appearance/Pages/components/CreatePageModal.tsx b/admin-spa/src/routes/Appearance/Pages/components/CreatePageModal.tsx
index 251f924..141bd29 100644
--- a/admin-spa/src/routes/Appearance/Pages/components/CreatePageModal.tsx
+++ b/admin-spa/src/routes/Appearance/Pages/components/CreatePageModal.tsx
@@ -147,7 +147,7 @@ export function CreatePageModal({ open, onOpenChange, onCreated }: CreatePageMod
                     </DialogDescription>
                 </DialogHeader>
 
-                <div className="space-y-6 py-4 px-1">
+                <div className="space-y-6 px-6 py-4">
                     {/* Page Type Selection */}
                     <RadioGroup value={pageType} onValueChange={(v) => setPageType(v as 'page' | 'template')} className="grid grid-cols-2 gap-4">
                         <div
diff --git a/admin-spa/src/routes/Marketing/Campaigns/Edit.tsx b/admin-spa/src/routes/Marketing/Campaigns/Edit.tsx
index 5182e9d..51302bc 100644
--- a/admin-spa/src/routes/Marketing/Campaigns/Edit.tsx
+++ b/admin-spa/src/routes/Marketing/Campaigns/Edit.tsx
@@ -327,7 +327,7 @@ export default function CampaignEdit() {
                         <DialogTitle>{__('Email Preview')}</DialogTitle>
                         <DialogDescription>{__('Preview how your email will look to subscribers')}</DialogDescription>
                     </DialogHeader>
-                    <div className="border rounded-lg overflow-hidden bg-gray-100">
+                    <div className="border rounded-lg overflow-hidden bg-gray-100 mx-6 mb-6">
                         <iframe
                             srcDoc={previewHtml}
                             className="w-full min-h-[600px] bg-white"
@@ -344,7 +344,7 @@ export default function CampaignEdit() {
                         <DialogTitle>{__('Send Test Email')}</DialogTitle>
                         <DialogDescription>{__('Send a test email to verify your campaign before sending to all subscribers')}</DialogDescription>
                     </DialogHeader>
-                    <div className="space-y-4 p-4">
+                    <div className="space-y-4 px-6 py-4">
                         <div className="space-y-2">
                             <Label htmlFor="test-email">{__('Email Address')}</Label>
                             <Input
diff --git a/admin-spa/src/routes/Products/Attributes.tsx b/admin-spa/src/routes/Products/Attributes.tsx
index 6b8683f..4b2631b 100644
--- a/admin-spa/src/routes/Products/Attributes.tsx
+++ b/admin-spa/src/routes/Products/Attributes.tsx
@@ -25,9 +25,9 @@ export default function ProductAttributes() {
   const [search, setSearch] = useState('');
   const [dialogOpen, setDialogOpen] = useState(false);
   const [editingAttribute, setEditingAttribute] = useState<Attribute | null>(null);
-  const [formData, setFormData] = useState({ 
-    name: '', 
-    label: '', 
+  const [formData, setFormData] = useState({
+    name: '',
+    label: '',
     type: 'select',
     orderby: 'menu_order',
     public: 1
@@ -205,7 +205,7 @@ export default function ProductAttributes() {
               {editingAttribute ? __('Update attribute information') : __('Create a new product attribute')}
             </DialogDescription>
           </DialogHeader>
-          <form onSubmit={handleSubmit} className="space-y-4">
+          <form onSubmit={handleSubmit} className="space-y-4 px-6 py-4">
             <div>
               <Label htmlFor="label">{__('Label')}</Label>
               <Input
diff --git a/admin-spa/src/routes/Products/Categories.tsx b/admin-spa/src/routes/Products/Categories.tsx
index a2570ec..e1b9ca7 100644
--- a/admin-spa/src/routes/Products/Categories.tsx
+++ b/admin-spa/src/routes/Products/Categories.tsx
@@ -198,7 +198,7 @@ export default function ProductCategories() {
               {editingCategory ? __('Update category information') : __('Create a new product category')}
             </DialogDescription>
           </DialogHeader>
-          <form onSubmit={handleSubmit} className="space-y-4">
+          <form onSubmit={handleSubmit} className="space-y-4 px-6 py-4">
             <div>
               <Label htmlFor="name">{__('Name')}</Label>
               <Input
diff --git a/admin-spa/src/routes/Products/SoftwareVersions/index.tsx b/admin-spa/src/routes/Products/SoftwareVersions/index.tsx
index a685024..4358ded 100644
--- a/admin-spa/src/routes/Products/SoftwareVersions/index.tsx
+++ b/admin-spa/src/routes/Products/SoftwareVersions/index.tsx
@@ -239,7 +239,7 @@ export default function SoftwareVersions() {
                                                 {__('Release a new version of')} {selectedProductData?.name}
                                             </DialogDescription>
                                         </DialogHeader>
-                                        <div className="space-y-4 py-4">
+                                        <div className="space-y-4 px-6 py-4">
                                             <div className="space-y-2">
                                                 <Label htmlFor="version">{__('Version Number')}</Label>
                                                 <Input
diff --git a/admin-spa/src/routes/Products/Tags.tsx b/admin-spa/src/routes/Products/Tags.tsx
index d9435ff..da2b82f 100644
--- a/admin-spa/src/routes/Products/Tags.tsx
+++ b/admin-spa/src/routes/Products/Tags.tsx
@@ -196,7 +196,7 @@ export default function ProductTags() {
               {editingTag ? __('Update tag information') : __('Create a new product tag')}
             </DialogDescription>
           </DialogHeader>
-          <form onSubmit={handleSubmit} className="space-y-4">
+          <form onSubmit={handleSubmit} className="space-y-4 px-6 py-4">
             <div>
               <Label htmlFor="name">{__('Name')}</Label>
               <Input
diff --git a/admin-spa/src/routes/Settings/Notifications/ChannelConfig.tsx b/admin-spa/src/routes/Settings/Notifications/ChannelConfig.tsx
index 2e24428..d2f46a4 100644
--- a/admin-spa/src/routes/Settings/Notifications/ChannelConfig.tsx
+++ b/admin-spa/src/routes/Settings/Notifications/ChannelConfig.tsx
@@ -36,7 +36,7 @@ export default function ChannelConfig({ open, onClose, channelId, channelLabel }
             </DialogDescription>
           </DialogHeader>
 
-          <div className="space-y-4 py-4">
+          <div className="space-y-4 px-6 py-4 mb-4">
             <p className="text-sm text-muted-foreground">
               {__(
                 'Email notifications are powered by WooCommerce. You can configure SMTP settings, email templates, and sender information in the WooCommerce settings.'
@@ -128,112 +128,112 @@ export default function ChannelConfig({ open, onClose, channelId, channelLabel }
               <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
             </div>
           ) : (
-            <div className="space-y-6 py-4">
-            {/* Branding */}
-            <div className="space-y-3">
-              <Label>{__('Notification Branding')}</Label>
+            <div className="space-y-6 px-6 py-4">
+              {/* Branding */}
               <div className="space-y-3">
-                <div className="flex items-center justify-between">
-                  <div className="space-y-0.5">
-                    <Label htmlFor="use-logo">{__('Use Store Logo')}</Label>
-                    <p className="text-xs text-muted-foreground">
-                      {__('Display your store logo in push notifications')}
-                    </p>
+                <Label>{__('Notification Branding')}</Label>
+                <div className="space-y-3">
+                  <div className="flex items-center justify-between">
+                    <div className="space-y-0.5">
+                      <Label htmlFor="use-logo">{__('Use Store Logo')}</Label>
+                      <p className="text-xs text-muted-foreground">
+                        {__('Display your store logo in push notifications')}
+                      </p>
+                    </div>
+                    <Switch
+                      id="use-logo"
+                      checked={settings.use_logo}
+                      onCheckedChange={(checked) => setSettings({ ...settings, use_logo: checked })}
+                    />
                   </div>
-                  <Switch 
-                    id="use-logo" 
-                    checked={settings.use_logo}
-                    onCheckedChange={(checked) => setSettings({...settings, use_logo: checked})}
-                  />
-                </div>
 
-                <div className="flex items-center justify-between">
-                  <div className="space-y-0.5">
-                    <Label htmlFor="use-product-image">{__('Use Product Images')}</Label>
-                    <p className="text-xs text-muted-foreground">
-                      {__('Show product images in order notifications')}
-                    </p>
+                  <div className="flex items-center justify-between">
+                    <div className="space-y-0.5">
+                      <Label htmlFor="use-product-image">{__('Use Product Images')}</Label>
+                      <p className="text-xs text-muted-foreground">
+                        {__('Show product images in order notifications')}
+                      </p>
+                    </div>
+                    <Switch
+                      id="use-product-image"
+                      checked={settings.use_product_images}
+                      onCheckedChange={(checked) => setSettings({ ...settings, use_product_images: checked })}
+                    />
                   </div>
-                  <Switch 
-                    id="use-product-image" 
-                    checked={settings.use_product_images}
-                    onCheckedChange={(checked) => setSettings({...settings, use_product_images: checked})}
-                  />
-                </div>
 
-                <div className="flex items-center justify-between">
-                  <div className="space-y-0.5">
-                    <Label htmlFor="use-gravatar">{__('Use Customer Gravatar')}</Label>
-                    <p className="text-xs text-muted-foreground">
-                      {__('Display customer avatar when available')}
-                    </p>
+                  <div className="flex items-center justify-between">
+                    <div className="space-y-0.5">
+                      <Label htmlFor="use-gravatar">{__('Use Customer Gravatar')}</Label>
+                      <p className="text-xs text-muted-foreground">
+                        {__('Display customer avatar when available')}
+                      </p>
+                    </div>
+                    <Switch
+                      id="use-gravatar"
+                      checked={settings.use_gravatar}
+                      onCheckedChange={(checked) => setSettings({ ...settings, use_gravatar: checked })}
+                    />
                   </div>
-                  <Switch 
-                    id="use-gravatar" 
-                    checked={settings.use_gravatar}
-                    onCheckedChange={(checked) => setSettings({...settings, use_gravatar: checked})}
-                  />
                 </div>
               </div>
-            </div>
 
-            {/* Behavior */}
-            <div className="space-y-3">
-              <Label>{__('Notification Behavior')}</Label>
+              {/* Behavior */}
               <div className="space-y-3">
-                <div className="space-y-2">
-                  <Label htmlFor="click-action">{__('Click Action URL')}</Label>
-                  <Input
-                    id="click-action"
-                    placeholder={__('https://yourstore.com/orders')}
-                    value={settings.click_action}
-                    onChange={(e) => setSettings({...settings, click_action: e.target.value})}
-                  />
-                  <p className="text-xs text-muted-foreground">
-                    {__('Where users are redirected when clicking the notification')}
-                  </p>
-                </div>
-
-                <div className="flex items-center justify-between">
-                  <div className="space-y-0.5">
-                    <Label htmlFor="require-interaction">{__('Require Interaction')}</Label>
+                <Label>{__('Notification Behavior')}</Label>
+                <div className="space-y-3">
+                  <div className="space-y-2">
+                    <Label htmlFor="click-action">{__('Click Action URL')}</Label>
+                    <Input
+                      id="click-action"
+                      placeholder={__('https://yourstore.com/orders')}
+                      value={settings.click_action}
+                      onChange={(e) => setSettings({ ...settings, click_action: e.target.value })}
+                    />
                     <p className="text-xs text-muted-foreground">
-                      {__('Notification stays until user dismisses it')}
+                      {__('Where users are redirected when clicking the notification')}
                     </p>
                   </div>
-                  <Switch 
-                    id="require-interaction" 
-                    checked={settings.require_interaction}
-                    onCheckedChange={(checked) => setSettings({...settings, require_interaction: checked})}
-                  />
-                </div>
 
-                <div className="flex items-center justify-between">
-                  <div className="space-y-0.5">
-                    <Label htmlFor="silent">{__('Silent Notifications')}</Label>
-                    <p className="text-xs text-muted-foreground">
-                      {__('Disable notification sound')}
-                    </p>
+                  <div className="flex items-center justify-between">
+                    <div className="space-y-0.5">
+                      <Label htmlFor="require-interaction">{__('Require Interaction')}</Label>
+                      <p className="text-xs text-muted-foreground">
+                        {__('Notification stays until user dismisses it')}
+                      </p>
+                    </div>
+                    <Switch
+                      id="require-interaction"
+                      checked={settings.require_interaction}
+                      onCheckedChange={(checked) => setSettings({ ...settings, require_interaction: checked })}
+                    />
+                  </div>
+
+                  <div className="flex items-center justify-between">
+                    <div className="space-y-0.5">
+                      <Label htmlFor="silent">{__('Silent Notifications')}</Label>
+                      <p className="text-xs text-muted-foreground">
+                        {__('Disable notification sound')}
+                      </p>
+                    </div>
+                    <Switch
+                      id="silent"
+                      checked={settings.silent}
+                      onCheckedChange={(checked) => setSettings({ ...settings, silent: checked })}
+                    />
                   </div>
-                  <Switch 
-                    id="silent" 
-                    checked={settings.silent}
-                    onCheckedChange={(checked) => setSettings({...settings, silent: checked})}
-                  />
                 </div>
               </div>
-            </div>
 
-            <div className="bg-muted/50 rounded-lg p-4">
-              <p className="text-xs text-muted-foreground">
-                💡 {__('Note: These settings will be saved and applied to all push notifications. Individual templates can override the icon and image.')}
-              </p>
-            </div>
+              <div className="bg-muted/50 rounded-lg p-4">
+                <p className="text-xs text-muted-foreground">
+                  💡 {__('Note: These settings will be saved and applied to all push notifications. Individual templates can override the icon and image.')}
+                </p>
+              </div>
             </div>
           )
           }
 
-          <div className="flex justify-end gap-2">
+          <div className="flex justify-end gap-2 px-6 pb-4">
             <Button variant="outline" onClick={onClose} disabled={saveMutation.isPending}>
               {__('Cancel')}
             </Button>
@@ -264,13 +264,13 @@ export default function ChannelConfig({ open, onClose, channelId, channelLabel }
           </DialogDescription>
         </DialogHeader>
 
-        <div className="space-y-4 py-4">
+        <div className="space-y-4 px-6 py-4">
           <p className="text-sm text-muted-foreground">
             {__('Configuration for this channel is provided by the addon.')}
           </p>
         </div>
 
-        <div className="flex justify-end">
+        <div className="flex justify-end px-6 pb-4">
           <Button variant="outline" onClick={onClose}>
             {__('Close')}
           </Button>
diff --git a/admin-spa/src/routes/Settings/Tax.tsx b/admin-spa/src/routes/Settings/Tax.tsx
index 8db6274..0ef64f0 100644
--- a/admin-spa/src/routes/Settings/Tax.tsx
+++ b/admin-spa/src/routes/Settings/Tax.tsx
@@ -136,7 +136,7 @@ export default function TaxSettings() {
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     const formData = new FormData(e.currentTarget);
-    
+
     const data = {
       country: formData.get('country') as string,
       state: formData.get('state') as string || '',
@@ -409,7 +409,7 @@ export default function TaxSettings() {
             </DialogTitle>
           </DialogHeader>
           <form onSubmit={handleSubmit}>
-            <div className="space-y-4 py-4">
+            <div className="space-y-4 px-6 py-4">
               <div>
                 <Label>{__('Country')}</Label>
                 <Input