feat: enhance authorized devices table layout and styling

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"

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;
 }

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];
 }