From ed58467766586d3102af9f7c12574bb07b5b8e4d Mon Sep 17 00:00:00 2001
From: shuaiplus <2327005759@qq.com>
Date: Fri, 15 May 2026 18:28:05 +0800
Subject: [PATCH] feat: enhance authorized devices table layout and styling

---
 webapp/src/components/SecurityDevicesPage.tsx | 13 +++++-
 webapp/src/styles.css                         |  2 -
 webapp/src/styles/management.css              | 43 +++++++++++++++++++
 3 files changed, 54 insertions(+), 4 deletions(-)

diff --git a/webapp/src/components/SecurityDevicesPage.tsx b/webapp/src/components/SecurityDevicesPage.tsx
index f6b1199..a28ff73 100644
--- a/webapp/src/components/SecurityDevicesPage.tsx
+++ b/webapp/src/components/SecurityDevicesPage.tsx
@@ -108,7 +108,16 @@ export default function SecurityDevicesPage(props: SecurityDevicesPageProps) {
             </button>
           </div>
         )}
-        <table className="table">
+        <table className="table authorized-devices-table">
+          <colgroup>
+            <col className="authorized-devices-col-device" />
+            <col className="authorized-devices-col-type" />
+            <col className="authorized-devices-col-status" />
+            <col className="authorized-devices-col-date" />
+            <col className="authorized-devices-col-date" />
+            <col className="authorized-devices-col-trust" />
+            <col className="authorized-devices-col-actions" />
+          </colgroup>
           <thead>
             <tr>
               <th>{t('txt_device')}</th>
@@ -149,7 +158,7 @@ export default function SecurityDevicesPage(props: SecurityDevicesPageProps) {
                   )}
                 </td>
                 <td data-label={t('txt_actions')}>
-                  <div className="actions">
+                  <div className="actions authorized-devices-actions">
                     <button
                       type="button"
                       className="btn btn-secondary small"
diff --git a/webapp/src/styles.css b/webapp/src/styles.css
index 72a98e6..377409e 100644
--- a/webapp/src/styles.css
+++ b/webapp/src/styles.css
@@ -1098,7 +1098,6 @@ input[type='file'].input::file-selector-button {
   padding: 12px;
   border: 1px solid var(--line-soft);
   border-radius: var(--radius-lg);
-  background: var(--panel-soft);
 }
 
 .invite-create-group {
@@ -1131,7 +1130,6 @@ input[type='file'].input::file-selector-button {
 .invite-table th {
   height: 42px;
   padding: 9px 10px;
-  background: var(--panel-soft);
   font-size: 13px;
   font-weight: 800;
 }
diff --git a/webapp/src/styles/management.css b/webapp/src/styles/management.css
index 3aef5e0..d3d2ec2 100644
--- a/webapp/src/styles/management.css
+++ b/webapp/src/styles/management.css
@@ -1413,6 +1413,49 @@
   color: #667085;
 }
 
+.authorized-devices-table {
+  table-layout: fixed;
+}
+
+.authorized-devices-col-device {
+  width: 28%;
+}
+
+.authorized-devices-col-type {
+  width: 7%;
+}
+
+.authorized-devices-col-status {
+  width: 6%;
+}
+
+.authorized-devices-col-date {
+  width: 11%;
+}
+
+.authorized-devices-col-trust {
+  width: 11%;
+}
+
+.authorized-devices-col-actions {
+  width: 26%;
+}
+
+.authorized-devices-table td:first-child {
+  overflow-wrap: anywhere;
+}
+
+.authorized-devices-actions {
+  flex-wrap: nowrap;
+  gap: 6px;
+}
+
+.authorized-devices-actions .btn.small {
+  flex: 0 0 auto;
+  padding-inline: 8px;
+  white-space: nowrap;
+}
+
 .input.small {
   @apply w-[120px];
 }