Improve contact submissions UI and compact cropper actions.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/business/src/components/ContactSubmissionDetailModal.module.css

@@ -1,16 +1,16 @@
 .modal {
-  width: min(560px, calc(100vw - 32px));
+  width: min(720px, calc(100vw - 32px));
 }
 
 .body {
-  padding: 0 20px 20px;
+  padding: 4px 24px 24px;
 }
 
 .metaGrid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 12px 16px;
-  margin: 0 0 18px;
+  gap: 16px 24px;
+  margin: 0 0 20px;
 }
 
 .metaItem {
@@ -18,44 +18,55 @@
 }
 
 .metaItem dt {
-  margin: 0 0 4px;
-  font-size: 11px;
+  margin: 0 0 6px;
+  font-size: 12px;
   font-weight: 600;
-  letter-spacing: 0.02em;
-  text-transform: uppercase;
   color: var(--text-muted);
 }
 
 .metaItem dd {
   margin: 0;
-  font-size: 14px;
+  font-size: 15px;
   font-weight: 500;
   color: var(--text-primary);
   word-break: break-word;
 }
 
+.ltrValue {
+  direction: ltr;
+  unicode-bidi: isolate;
+  text-align: start;
+}
+
+.sentAt {
+  display: inline-block;
+  direction: ltr;
+  unicode-bidi: isolate;
+}
+
 .messageBlock {
-  padding-top: 16px;
+  padding: 18px 0 0;
   border-top: 1px solid rgba(148, 163, 184, 0.2);
 }
 
-.messageLabel {
+.messageTitle {
   margin: 0 0 10px;
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--text-secondary);
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1.4;
+  color: var(--text-primary);
 }
 
 .messageText {
   margin: 0;
   font-size: 14px;
-  line-height: 1.65;
-  color: var(--text-primary);
+  line-height: 1.75;
+  color: var(--text-secondary);
   white-space: pre-wrap;
   word-break: break-word;
 }
 
-@media (max-width: 520px) {
+@media (max-width: 560px) {
   .metaGrid {
     grid-template-columns: 1fr;
   }

apps/business/src/components/ContactSubmissionDetailModal.tsx

@@ -21,8 +21,15 @@ function formatDateTime(value: string, locale: 'en' | 'fa') {
   if (Number.isNaN(d.getTime())) return { date: value, time: '' }
   const intlLocale = locale === 'fa' ? 'fa-IR' : 'en-US'
   return {
-    date: d.toLocaleDateString(intlLocale, { year: 'numeric', month: 'short', day: '2-digit' }),
-    time: d.toLocaleTimeString(intlLocale, { hour: '2-digit', minute: '2-digit' }),
+    date: d.toLocaleDateString(intlLocale, {
+      year: 'numeric',
+      month: 'short',
+      day: '2-digit',
+    }),
+    time: d.toLocaleTimeString(intlLocale, {
+      hour: '2-digit',
+      minute: '2-digit',
+    }),
   }
 }
 
@@ -76,12 +83,9 @@ export function ContactSubmissionDetailModal({
         aria-labelledby="contact-submission-title"
       >
         <div className={modalStyles.header}>
-          <div>
-            <h2 id="contact-submission-title" className={modalStyles.title}>
-              {t('website.contact.detailTitle')}
-            </h2>
-            <p className={modalStyles.subtitle}>{submission.title}</p>
-          </div>
+          <h2 id="contact-submission-title" className={modalStyles.title}>
+            {t('website.contact.detailTitle')}
+          </h2>
           <button
             type="button"
             className={modalStyles.closeBtn}
@@ -100,26 +104,26 @@ export function ContactSubmissionDetailModal({
             </div>
             <div className={styles.metaItem}>
               <dt>{t('website.contact.col.email')}</dt>
-              <dd>{submission.email ?? '—'}</dd>
+              <dd className={styles.ltrValue}>{submission.email ?? '—'}</dd>
             </div>
             <div className={styles.metaItem}>
               <dt>{t('website.contact.col.cell')}</dt>
-              <dd>
+              <dd className={styles.ltrValue}>
                 {submission.cellNumber ? formatCellForDisplay(submission.cellNumber) : '—'}
               </dd>
             </div>
             <div className={styles.metaItem}>
-              <dt>{t('website.contact.col.date')}</dt>
-              <dd>{date}</dd>
-            </div>
-            <div className={styles.metaItem}>
-              <dt>{t('website.contact.col.time')}</dt>
-              <dd>{time || '—'}</dd>
+              <dt>{t('website.contact.detailSentAt')}</dt>
+              <dd>
+                <span className={styles.sentAt} dir="ltr">
+                  {time ? `${date} · ${time}` : date}
+                </span>
+              </dd>
             </div>
           </dl>
 
           <div className={styles.messageBlock}>
-            <h3 className={styles.messageLabel}>{t('website.contact.detailMessage')}</h3>
+            <h3 className={styles.messageTitle}>{submission.title}</h3>
             <p className={styles.messageText}>{submission.text}</p>
           </div>
         </div>

apps/business/src/components/ImageCropper.module.css

@@ -186,11 +186,6 @@
   align-self: stretch;
 }
 
-.compact .changeBtn {
-  align-self: stretch;
-  justify-content: center;
-}
-
 .compact .uploadZone {
   gap: 4px;
   font-size: 11px;
@@ -202,8 +197,36 @@
   line-height: 1.3;
 }
 
+.compact .cropControls {
+  padding: 10px;
+  gap: 10px;
+}
+
+.compact .zoomLabel {
+  gap: 8px;
+  font-size: 11px;
+}
+
+.compact .cropActions {
+  flex-direction: column;
+  align-items: stretch;
+  gap: 6px;
+}
+
+.compact .cancelBtn,
+.compact .applyBtn {
+  width: 100%;
+  justify-content: center;
+  text-align: center;
+  box-sizing: border-box;
+  padding: 8px 10px;
+  font-size: 12px;
+}
+
 .compact .changeBtn {
   display: flex;
+  align-self: stretch;
+  justify-content: center;
   padding: 6px 10px;
   font-size: 11px;
 }

apps/business/src/i18n/messages.ts

@@ -2096,7 +2096,8 @@ const en = {
   'website.contact.col.date': 'Date',
   'website.contact.col.time': 'Time',
   'website.contact.viewSubmission': 'View submission from {name}',
-  'website.contact.detailTitle': 'Contact submission',
+  'website.contact.detailTitle': 'Contact form details',
+  'website.contact.detailSentAt': 'Sent at',
   'website.contact.detailMessage': 'Message',
 
   'website.subscriptions.subtitle': 'Manage newsletter and subscription sign-ups on your website.',
@@ -4637,7 +4638,8 @@ const fa: Record<MessageKey, string> = {
   'website.contact.col.date': 'تاریخ',
   'website.contact.col.time': 'ساعت',
   'website.contact.viewSubmission': 'مشاهده ارسال از {name}',
-  'website.contact.detailTitle': 'ارسال تماس',
+  'website.contact.detailTitle': 'جزئیات فرم تماس با ما',
+  'website.contact.detailSentAt': 'زمان ارسال',
   'website.contact.detailMessage': 'پیام',
 
   'website.subscriptions.subtitle': 'عضویت خبرنامه و اشتراک‌ها در وب‌سایت را مدیریت کنید.',

apps/business/src/pages/WebsiteContactPage.module.css

@@ -47,7 +47,7 @@
 .th,
 .td {
   padding: 10px 14px;
-  text-align: left;
+  text-align: start;
   border-bottom: 1px solid rgba(148, 163, 184, 0.16);
   vertical-align: middle;
 }

apps/business/src/pages/WebsiteContactPage.tsx

@@ -183,7 +183,7 @@ export function WebsiteContactPage() {
           {error && <div className={styles.errorBanner}>{error}</div>}
 
           <div className={styles.tableScroll}>
-            <table className={styles.table}>
+            <table className={styles.table} dir={locale === 'fa' ? 'rtl' : 'ltr'}>
               <thead>
                 <tr>
                   <th className={styles.th}>{t('website.contact.col.title')}</th>