fix: pr review

Author: ioanatflowcrypt

extension/chrome/settings/index.ts

@@ -521,7 +521,7 @@ View.run(
       // 3. Build HTML
       // Header row
       html += `
-        <div class="row key-list-header" style="font-weight: 600; padding: 10px 0; border-bottom: 2px solid #eee;">
+        <div class="row key-list-header">
           <div class="col-3">Email</div>
           <div class="col-2">Created</div>
           <div class="col-6">Fingerprint</div>
@@ -544,11 +544,11 @@ View.run(
         const rowClass = isExpired ? 'key-content-row expired' : 'key-content-row';
         const opacityStyle = isExpired ? 'opacity: 0.7;' : '';
 
-        html += `<div class="row ${rowClass}" style="padding: 10px 0; border-bottom: 1px solid #e6e6e6; align-items: center; ${opacityStyle}">`;
+        html += `<div class="row ${rowClass}" style="${opacityStyle}">`;
         html += `  <div class="col-3" style="overflow: hidden; text-overflow: ellipsis;">${escapedLink}</div>`;
         html += `  <div class="col-2">${Xss.escape(dateStr)}</div>`;
         html += `  <div class="col-6">${fpHtml}</div>`;
-        html += `  <div class="col-1" style="display: flex; justify-content: space-between; align-items: center;">
+        html += `  <div class="col-1 status-col">
                      ${KeyUtil.statusHtml(ki.id, prv)}
                      ${removeKeyBtn}
                    </div>`;

extension/css/settings.css

@@ -255,8 +255,7 @@ a.gray_link {
 #settings-row .my-keys-row {
   display: flex;
   justify-content: center;
-  margin-top: 60px;
-  margin-left: 0 !important;
+  margin: 60px 0;
   text-indent: 0;
 }
 
@@ -587,6 +586,26 @@ body#settings .settings-border .key_list {
   top: 28px;
 }
 
+.my-keys-row .key-list-header {
+  font-weight: 600;
+  padding: 5px 0;
+  border-bottom: 2px solid #eee;
+}
+
+.my-keys-row .key-content-row {
+  padding: 5px 0;
+  border-bottom: 1px solid #e6e6e6;
+  align-items: center;
+}
+
+.my-keys-row .key-content-row .status-col {
+  display: flex;
+  flex-flow: column wrap;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 2px;
+}
+
 @media (width <= 991px) {
   .my-keys-row .settings-border {
     margin: 35px auto !important;