From f2a3c0f0330ca0a1026d3a94e5622edebb8cd198 Mon Sep 17 00:00:00 2001
From: KenanZhu <3471685733@qq.com>
Date: Fri, 26 Jun 2026 14:20:38 +0800
Subject: [PATCH] fix(ink): add .email-sidebar class for vertical stacking on
 mobile

Quick Info sidebar now stacks below main content at <=480px viewports
via CSS class instead of fragile inline styles.

- Added .email-sidebar base style (extracted from inline styles)
- Added responsive rule: width:100%, display:block, removes left border,
  adds top border separator when stacked vertically
- All 11 ink templates updated consistently

Co-Authored-By: Claude <noreply@anthropic.com>
---
 themes/ink/mail/org/team_invite.tmpl           | 4 +++-
 themes/ink/mail/repo/actions/workflow_run.tmpl | 4 +++-
 themes/ink/mail/repo/collaborator.tmpl         | 4 +++-
 themes/ink/mail/repo/issue/assigned.tmpl       | 4 +++-
 themes/ink/mail/repo/issue/default.tmpl        | 4 +++-
 themes/ink/mail/repo/release.tmpl              | 4 +++-
 themes/ink/mail/repo/transfer.tmpl             | 4 +++-
 themes/ink/mail/user/auth/activate.tmpl        | 4 +++-
 themes/ink/mail/user/auth/activate_email.tmpl  | 4 +++-
 themes/ink/mail/user/auth/register_notify.tmpl | 4 +++-
 themes/ink/mail/user/auth/reset_passwd.tmpl    | 4 +++-
 11 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/themes/ink/mail/org/team_invite.tmpl b/themes/ink/mail/org/team_invite.tmpl
index 320f215..2669387 100644
--- a/themes/ink/mail/org/team_invite.tmpl
+++ b/themes/ink/mail/org/team_invite.tmpl
@@ -21,6 +21,7 @@
 
     /* Card */
     .email-card { padding:24px 24px 16px 28px;vertical-align:top;color:#333 }
+    .email-sidebar { padding:24px 28px 16px 0;vertical-align:top;border-left:1px solid #ddd }
     .email-heading { margin:0 0 16px;font-size:15px;color:#333;line-height:1.7 }
     .email-text { margin:0 0 12px;font-size:13px;line-height:1.8;color:#444 }
     .email-subtext { margin:0 0 20px;font-size:12px;line-height:1.8;color:#666;font-style:italic }
@@ -53,6 +54,7 @@
     @media only screen and (max-width:480px) {
       .email-header { padding-left:16px!important;padding-right:16px!important }
       .email-card { width:100%!important;display:block!important;border-left:none!important;padding-left:28px!important;padding-right:28px!important;padding-top:0!important }
+      .email-sidebar { width:100%!important;display:block!important;padding:0 28px 16px!important;border-left:none!important;border-top:1px solid #ddd!important }
       .email-btn { display:block!important;width:auto!important;text-align:center!important }
       .email-footer { padding-left:16px!important;padding-right:16px!important }
     }
@@ -115,7 +117,7 @@
 
         </td>
         <!-- right column / sidebar -->
-        <td width="36%" style="padding:24px 28px 16px 0;vertical-align:top;border-left:1px solid #ddd;">
+        <td width="36%" class="email-sidebar">
 
           <p style="margin:0 0 10px;font-size:10px;color:#888;text-transform:uppercase;letter-spacing:1px;font-family:system-ui,sans-serif;font-weight:700;">Quick Info</p>
           <table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-top:1px solid #ddd;border-bottom:1px solid #ddd;">
diff --git a/themes/ink/mail/repo/actions/workflow_run.tmpl b/themes/ink/mail/repo/actions/workflow_run.tmpl
index b97daa1..27659bd 100644
--- a/themes/ink/mail/repo/actions/workflow_run.tmpl
+++ b/themes/ink/mail/repo/actions/workflow_run.tmpl
@@ -21,6 +21,7 @@
 
     /* Card */
     .email-card { padding:24px 24px 16px 28px;vertical-align:top;color:#333 }
+    .email-sidebar { padding:24px 28px 16px 0;vertical-align:top;border-left:1px solid #ddd }
     .email-heading { margin:0 0 16px;font-size:15px;color:#333;line-height:1.7 }
     .email-text { margin:0 0 12px;font-size:13px;line-height:1.8;color:#444 }
     .email-subtext { margin:0 0 20px;font-size:12px;line-height:1.8;color:#666;font-style:italic }
@@ -55,6 +56,7 @@
     @media only screen and (max-width:480px) {
       .email-header { padding-left:16px!important;padding-right:16px!important }
       .email-card { width:100%!important;display:block!important;border-left:none!important;padding-left:28px!important;padding-right:28px!important;padding-top:0!important }
+      .email-sidebar { width:100%!important;display:block!important;padding:0 28px 16px!important;border-left:none!important;border-top:1px solid #ddd!important }
       .email-btn { display:block!important;width:auto!important;text-align:center!important }
       .email-footer { padding-left:16px!important;padding-right:16px!important }
     }
@@ -111,7 +113,7 @@
 
         </td>
         <!-- right column / sidebar -->
-        <td width="36%" style="padding:24px 28px 16px 0;vertical-align:top;border-left:1px solid #ddd;">
+        <td width="36%" class="email-sidebar">
 
           <p style="margin:0 0 10px;font-size:10px;color:#888;text-transform:uppercase;letter-spacing:1px;font-family:system-ui,sans-serif;font-weight:700;">Quick Info</p>
           <table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-top:1px solid #ddd;border-bottom:1px solid #ddd;">
diff --git a/themes/ink/mail/repo/collaborator.tmpl b/themes/ink/mail/repo/collaborator.tmpl
index 85aa6a0..f290f30 100644
--- a/themes/ink/mail/repo/collaborator.tmpl
+++ b/themes/ink/mail/repo/collaborator.tmpl
@@ -21,6 +21,7 @@
 
     /* Card */
     .email-card { padding:24px 24px 16px 28px;vertical-align:top;color:#333 }
+    .email-sidebar { padding:24px 28px 16px 0;vertical-align:top;border-left:1px solid #ddd }
     .email-heading { margin:0 0 16px;font-size:15px;color:#333;line-height:1.7 }
     .email-text { margin:0 0 12px;font-size:13px;line-height:1.8;color:#444 }
     .email-subtext { margin:0 0 20px;font-size:12px;line-height:1.8;color:#666;font-style:italic }
@@ -53,6 +54,7 @@
     @media only screen and (max-width:480px) {
       .email-header { padding-left:16px!important;padding-right:16px!important }
       .email-card { width:100%!important;display:block!important;border-left:none!important;padding-left:28px!important;padding-right:28px!important;padding-top:0!important }
+      .email-sidebar { width:100%!important;display:block!important;padding:0 28px 16px!important;border-left:none!important;border-top:1px solid #ddd!important }
       .email-btn { display:block!important;width:auto!important;text-align:center!important }
       .email-footer { padding-left:16px!important;padding-right:16px!important }
     }
@@ -103,7 +105,7 @@
 
         </td>
         <!-- right column / sidebar -->
-        <td width="36%" style="padding:24px 28px 16px 0;vertical-align:top;border-left:1px solid #ddd;">
+        <td width="36%" class="email-sidebar">
 
           <p style="margin:0 0 10px;font-size:10px;color:#888;text-transform:uppercase;letter-spacing:1px;font-family:system-ui,sans-serif;font-weight:700;">Quick Info</p>
           <table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-top:1px solid #ddd;border-bottom:1px solid #ddd;">
diff --git a/themes/ink/mail/repo/issue/assigned.tmpl b/themes/ink/mail/repo/issue/assigned.tmpl
index 8e146e3..991ac38 100644
--- a/themes/ink/mail/repo/issue/assigned.tmpl
+++ b/themes/ink/mail/repo/issue/assigned.tmpl
@@ -21,6 +21,7 @@
 
     /* Card */
     .email-card { padding:24px 24px 16px 28px;vertical-align:top;color:#333 }
+    .email-sidebar { padding:24px 28px 16px 0;vertical-align:top;border-left:1px solid #ddd }
     .email-heading { margin:0 0 16px;font-size:15px;color:#333;line-height:1.7 }
     .email-text { margin:0 0 12px;font-size:13px;line-height:1.8;color:#444 }
     .email-subtext { margin:0 0 20px;font-size:12px;line-height:1.8;color:#666;font-style:italic }
@@ -53,6 +54,7 @@
     @media only screen and (max-width:480px) {
       .email-header { padding-left:16px!important;padding-right:16px!important }
       .email-card { width:100%!important;display:block!important;border-left:none!important;padding-left:28px!important;padding-right:28px!important;padding-top:0!important }
+      .email-sidebar { width:100%!important;display:block!important;padding:0 28px 16px!important;border-left:none!important;border-top:1px solid #ddd!important }
       .email-btn { display:block!important;width:auto!important;text-align:center!important }
       .email-footer { padding-left:16px!important;padding-right:16px!important }
     }
@@ -109,7 +111,7 @@
 
         </td>
         <!-- right column / sidebar -->
-        <td width="36%" style="padding:24px 28px 16px 0;vertical-align:top;border-left:1px solid #ddd;">
+        <td width="36%" class="email-sidebar">
 
           <p style="margin:0 0 10px;font-size:10px;color:#888;text-transform:uppercase;letter-spacing:1px;font-family:system-ui,sans-serif;font-weight:700;">Quick Info</p>
           <table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-top:1px solid #ddd;border-bottom:1px solid #ddd;">
diff --git a/themes/ink/mail/repo/issue/default.tmpl b/themes/ink/mail/repo/issue/default.tmpl
index e989d6e..7b3fc92 100644
--- a/themes/ink/mail/repo/issue/default.tmpl
+++ b/themes/ink/mail/repo/issue/default.tmpl
@@ -21,6 +21,7 @@
 
     /* Card */
     .email-card { padding:24px 24px 16px 28px;vertical-align:top;color:#333 }
+    .email-sidebar { padding:24px 28px 16px 0;vertical-align:top;border-left:1px solid #ddd }
     .email-heading { margin:0 0 16px;font-size:15px;color:#333;line-height:1.7 }
     .email-text { margin:0 0 12px;font-size:13px;line-height:1.8;color:#444 }
     .email-subtext { margin:0 0 20px;font-size:12px;line-height:1.8;color:#666;font-style:italic }
@@ -63,6 +64,7 @@
     @media only screen and (max-width:480px) {
       .email-header { padding-left:16px!important;padding-right:16px!important }
       .email-card { width:100%!important;display:block!important;border-left:none!important;padding-left:28px!important;padding-right:28px!important;padding-top:0!important }
+      .email-sidebar { width:100%!important;display:block!important;padding:0 28px 16px!important;border-left:none!important;border-top:1px solid #ddd!important }
       .email-btn { display:block!important;width:auto!important;text-align:center!important }
       .email-footer { padding-left:16px!important;padding-right:16px!important }
     }
@@ -181,7 +183,7 @@
 
         </td>
         <!-- right column / sidebar -->
-        <td width="36%" style="padding:24px 28px 16px 0;vertical-align:top;border-left:1px solid #ddd;">
+        <td width="36%" class="email-sidebar">
 
           <p style="margin:0 0 10px;font-size:10px;color:#888;text-transform:uppercase;letter-spacing:1px;font-family:system-ui,sans-serif;font-weight:700;">Quick Info</p>
           <table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-top:1px solid #ddd;border-bottom:1px solid #ddd;">
diff --git a/themes/ink/mail/repo/release.tmpl b/themes/ink/mail/repo/release.tmpl
index 1b33cd1..1506422 100644
--- a/themes/ink/mail/repo/release.tmpl
+++ b/themes/ink/mail/repo/release.tmpl
@@ -21,6 +21,7 @@
 
     /* Card */
     .email-card { padding:24px 24px 16px 28px;vertical-align:top;color:#333 }
+    .email-sidebar { padding:24px 28px 16px 0;vertical-align:top;border-left:1px solid #ddd }
     .email-heading { margin:0 0 16px;font-size:15px;color:#333;line-height:1.7 }
     .email-text { margin:0 0 12px;font-size:13px;line-height:1.8;color:#444 }
     .email-subtext { margin:0 0 20px;font-size:12px;line-height:1.8;color:#666;font-style:italic }
@@ -58,6 +59,7 @@
     @media only screen and (max-width:480px) {
       .email-header { padding-left:16px!important;padding-right:16px!important }
       .email-card { width:100%!important;display:block!important;border-left:none!important;padding-left:28px!important;padding-right:28px!important;padding-top:0!important }
+      .email-sidebar { width:100%!important;display:block!important;padding:0 28px 16px!important;border-left:none!important;border-top:1px solid #ddd!important }
       .email-btn { display:block!important;width:auto!important;text-align:center!important }
       .email-footer { padding-left:16px!important;padding-right:16px!important }
     }
@@ -130,7 +132,7 @@
 
         </td>
         <!-- right column / sidebar -->
-        <td width="36%" style="padding:24px 28px 16px 0;vertical-align:top;border-left:1px solid #ddd;">
+        <td width="36%" class="email-sidebar">
 
           <p style="margin:0 0 10px;font-size:10px;color:#888;text-transform:uppercase;letter-spacing:1px;font-family:system-ui,sans-serif;font-weight:700;">Quick Info</p>
           <table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-top:1px solid #ddd;border-bottom:1px solid #ddd;">
diff --git a/themes/ink/mail/repo/transfer.tmpl b/themes/ink/mail/repo/transfer.tmpl
index 4e48c3b..2d34c47 100644
--- a/themes/ink/mail/repo/transfer.tmpl
+++ b/themes/ink/mail/repo/transfer.tmpl
@@ -21,6 +21,7 @@
 
     /* Card */
     .email-card { padding:24px 24px 16px 28px;vertical-align:top;color:#333 }
+    .email-sidebar { padding:24px 28px 16px 0;vertical-align:top;border-left:1px solid #ddd }
     .email-heading { margin:0 0 16px;font-size:15px;color:#333;line-height:1.7 }
     .email-text { margin:0 0 12px;font-size:13px;line-height:1.8;color:#444 }
     .email-subtext { margin:0 0 20px;font-size:12px;line-height:1.8;color:#666;font-style:italic }
@@ -53,6 +54,7 @@
     @media only screen and (max-width:480px) {
       .email-header { padding-left:16px!important;padding-right:16px!important }
       .email-card { width:100%!important;display:block!important;border-left:none!important;padding-left:28px!important;padding-right:28px!important;padding-top:0!important }
+      .email-sidebar { width:100%!important;display:block!important;padding:0 28px 16px!important;border-left:none!important;border-top:1px solid #ddd!important }
       .email-btn { display:block!important;width:auto!important;text-align:center!important }
       .email-footer { padding-left:16px!important;padding-right:16px!important }
     }
@@ -104,7 +106,7 @@
 
         </td>
         <!-- right column / sidebar -->
-        <td width="36%" style="padding:24px 28px 16px 0;vertical-align:top;border-left:1px solid #ddd;">
+        <td width="36%" class="email-sidebar">
 
           <p style="margin:0 0 10px;font-size:10px;color:#888;text-transform:uppercase;letter-spacing:1px;font-family:system-ui,sans-serif;font-weight:700;">Quick Info</p>
           <table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-top:1px solid #ddd;border-bottom:1px solid #ddd;">
diff --git a/themes/ink/mail/user/auth/activate.tmpl b/themes/ink/mail/user/auth/activate.tmpl
index 405c6a5..d33016f 100644
--- a/themes/ink/mail/user/auth/activate.tmpl
+++ b/themes/ink/mail/user/auth/activate.tmpl
@@ -21,6 +21,7 @@
 
     /* Card */
     .email-card { padding:24px 24px 16px 28px;vertical-align:top;color:#333 }
+    .email-sidebar { padding:24px 28px 16px 0;vertical-align:top;border-left:1px solid #ddd }
     .email-heading { margin:0 0 16px;font-size:15px;color:#333;line-height:1.7 }
     .email-text { margin:0 0 12px;font-size:13px;line-height:1.8;color:#444 }
     .email-subtext { margin:0 0 20px;font-size:12px;line-height:1.8;color:#666;font-style:italic }
@@ -53,6 +54,7 @@
     @media only screen and (max-width:480px) {
       .email-header { padding-left:16px!important;padding-right:16px!important }
       .email-card { width:100%!important;display:block!important;border-left:none!important;padding-left:28px!important;padding-right:28px!important;padding-top:0!important }
+      .email-sidebar { width:100%!important;display:block!important;padding:0 28px 16px!important;border-left:none!important;border-top:1px solid #ddd!important }
       .email-btn { display:block!important;width:auto!important;text-align:center!important }
       .email-footer { padding-left:16px!important;padding-right:16px!important }
     }
@@ -109,7 +111,7 @@
 
         </td>
         <!-- right column / sidebar -->
-        <td width="36%" style="padding:24px 28px 16px 0;vertical-align:top;border-left:1px solid #ddd;">
+        <td width="36%" class="email-sidebar">
 
           <p style="margin:0 0 10px;font-size:10px;color:#888;text-transform:uppercase;letter-spacing:1px;font-family:system-ui,sans-serif;font-weight:700;">Quick Info</p>
           <table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-top:1px solid #ddd;border-bottom:1px solid #ddd;">
diff --git a/themes/ink/mail/user/auth/activate_email.tmpl b/themes/ink/mail/user/auth/activate_email.tmpl
index 54ba637..fd29051 100644
--- a/themes/ink/mail/user/auth/activate_email.tmpl
+++ b/themes/ink/mail/user/auth/activate_email.tmpl
@@ -21,6 +21,7 @@
 
     /* Card */
     .email-card { padding:24px 24px 16px 28px;vertical-align:top;color:#333 }
+    .email-sidebar { padding:24px 28px 16px 0;vertical-align:top;border-left:1px solid #ddd }
     .email-heading { margin:0 0 16px;font-size:15px;color:#333;line-height:1.7 }
     .email-text { margin:0 0 12px;font-size:13px;line-height:1.8;color:#444 }
     .email-subtext { margin:0 0 20px;font-size:12px;line-height:1.8;color:#666;font-style:italic }
@@ -53,6 +54,7 @@
     @media only screen and (max-width:480px) {
       .email-header { padding-left:16px!important;padding-right:16px!important }
       .email-card { width:100%!important;display:block!important;border-left:none!important;padding-left:28px!important;padding-right:28px!important;padding-top:0!important }
+      .email-sidebar { width:100%!important;display:block!important;padding:0 28px 16px!important;border-left:none!important;border-top:1px solid #ddd!important }
       .email-btn { display:block!important;width:auto!important;text-align:center!important }
       .email-footer { padding-left:16px!important;padding-right:16px!important }
     }
@@ -109,7 +111,7 @@
 
         </td>
         <!-- right column / sidebar -->
-        <td width="36%" style="padding:24px 28px 16px 0;vertical-align:top;border-left:1px solid #ddd;">
+        <td width="36%" class="email-sidebar">
 
           <p style="margin:0 0 10px;font-size:10px;color:#888;text-transform:uppercase;letter-spacing:1px;font-family:system-ui,sans-serif;font-weight:700;">Quick Info</p>
           <table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-top:1px solid #ddd;border-bottom:1px solid #ddd;">
diff --git a/themes/ink/mail/user/auth/register_notify.tmpl b/themes/ink/mail/user/auth/register_notify.tmpl
index 7e2a09f..a6a82ab 100644
--- a/themes/ink/mail/user/auth/register_notify.tmpl
+++ b/themes/ink/mail/user/auth/register_notify.tmpl
@@ -21,6 +21,7 @@
 
     /* Card */
     .email-card { padding:24px 24px 16px 28px;vertical-align:top;color:#333 }
+    .email-sidebar { padding:24px 28px 16px 0;vertical-align:top;border-left:1px solid #ddd }
     .email-heading { margin:0 0 16px;font-size:15px;color:#333;line-height:1.7 }
     .email-text { margin:0 0 12px;font-size:13px;line-height:1.8;color:#444 }
     .email-subtext { margin:0 0 20px;font-size:12px;line-height:1.8;color:#666;font-style:italic }
@@ -53,6 +54,7 @@
     @media only screen and (max-width:480px) {
       .email-header { padding-left:16px!important;padding-right:16px!important }
       .email-card { width:100%!important;display:block!important;border-left:none!important;padding-left:28px!important;padding-right:28px!important;padding-top:0!important }
+      .email-sidebar { width:100%!important;display:block!important;padding:0 28px 16px!important;border-left:none!important;border-top:1px solid #ddd!important }
       .email-btn { display:block!important;width:auto!important;text-align:center!important }
       .email-footer { padding-left:16px!important;padding-right:16px!important }
     }
@@ -113,7 +115,7 @@
 
         </td>
         <!-- right column / sidebar -->
-        <td width="36%" style="padding:24px 28px 16px 0;vertical-align:top;border-left:1px solid #ddd;">
+        <td width="36%" class="email-sidebar">
 
           <p style="margin:0 0 10px;font-size:10px;color:#888;text-transform:uppercase;letter-spacing:1px;font-family:system-ui,sans-serif;font-weight:700;">Quick Info</p>
           <table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-top:1px solid #ddd;border-bottom:1px solid #ddd;">
diff --git a/themes/ink/mail/user/auth/reset_passwd.tmpl b/themes/ink/mail/user/auth/reset_passwd.tmpl
index fae7df1..c3978c8 100644
--- a/themes/ink/mail/user/auth/reset_passwd.tmpl
+++ b/themes/ink/mail/user/auth/reset_passwd.tmpl
@@ -21,6 +21,7 @@
 
     /* Card */
     .email-card { padding:24px 24px 16px 28px;vertical-align:top;color:#333 }
+    .email-sidebar { padding:24px 28px 16px 0;vertical-align:top;border-left:1px solid #ddd }
     .email-heading { margin:0 0 16px;font-size:15px;color:#333;line-height:1.7 }
     .email-text { margin:0 0 12px;font-size:13px;line-height:1.8;color:#444 }
     .email-subtext { margin:0 0 20px;font-size:12px;line-height:1.8;color:#666;font-style:italic }
@@ -53,6 +54,7 @@
     @media only screen and (max-width:480px) {
       .email-header { padding-left:16px!important;padding-right:16px!important }
       .email-card { width:100%!important;display:block!important;border-left:none!important;padding-left:28px!important;padding-right:28px!important;padding-top:0!important }
+      .email-sidebar { width:100%!important;display:block!important;padding:0 28px 16px!important;border-left:none!important;border-top:1px solid #ddd!important }
       .email-btn { display:block!important;width:auto!important;text-align:center!important }
       .email-footer { padding-left:16px!important;padding-right:16px!important }
     }
@@ -109,7 +111,7 @@
 
         </td>
         <!-- right column / sidebar -->
-        <td width="36%" style="padding:24px 28px 16px 0;vertical-align:top;border-left:1px solid #ddd;">
+        <td width="36%" class="email-sidebar">
 
           <p style="margin:0 0 10px;font-size:10px;color:#888;text-transform:uppercase;letter-spacing:1px;font-family:system-ui,sans-serif;font-weight:700;">Quick Info</p>
           <table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-top:1px solid #ddd;border-bottom:1px solid #ddd;">