1 files changed, 26 insertions, 21 deletions
diff --git a/app/views/profiles/gpg_keys/_key.html.haml b/app/views/profiles/gpg_keys/_key.html.haml
index d8b8dda29dc..f8520cb430d 100644
--- a/app/views/profiles/gpg_keys/_key.html.haml
+++ b/app/views/profiles/gpg_keys/_key.html.haml
@@ -1,24 +1,29 @@
-%li.key-list-item
-  .float-left.gl-mr-3
-    = sprite_icon('key', css_class: "settings-list-icon d-none d-sm-block gl-mt-4")
-  .key-list-item-info
+%tr.key-list-item
+  %td{ data: { label: s_('Profiles|Key') } }
+    %div{ class: 'gl-display-flex! gl-pl-0!' }
+      = sprite_icon('key', css_class: "settings-list-icon d-none d-sm-inline gl-mr-2")
+      .gl-display-flex.gl-flex-direction-column.gl-text-truncate
+        %p.gl-text-truncate.gl-m-0
+          %code= key.fingerprint
+        - if key.subkeys.present?
+          .subkeys.gl-mt-3{ class: 'gl-text-left!' }
+            %span.gl-font-sm
+              = _('Subkeys:')
+            %ul.subkeys-list
+              - key.subkeys.each do |subkey|
+                %li
+                  %p.gl-text-truncate.gl-m-0
+                    %code= subkey.fingerprint
+
+  %td{ data: { label: _('Status') } }
     - key.emails_with_verified_status.map do |email, verified|
-      = render partial: 'shared/email_with_badge', locals: { email: email, verified: verified }
+      %div{ class: 'gl-text-left!' }
+        = render partial: 'shared/email_with_badge', locals: { email: email, verified: verified }
+
+  %td{ data: { label: _('Created') } }
+    = html_escape(s_('Created %{time_ago}')) % { time_ago: time_ago_with_tooltip(key.created_at) }
 
-    %span.text-truncate
-      %code= key.fingerprint
-    - if key.subkeys.present?
-      .subkeys
-        %span.bold
-          = _('Subkeys')
-          = ':'
-        %ul.subkeys-list
-          - key.subkeys.each do |subkey|
-            %li
-              %code= subkey.fingerprint
-  .float-right
-    %span.key-created-at
-      = html_escape(s_('Profiles|Created %{time_ago}')) % { time_ago: time_ago_with_tooltip(key.created_at) }
-    = link_button_to nil, profile_gpg_key_path(key), data: { confirm: _('Are you sure? Removing this GPG key does not affect already signed commits.') }, method: :delete, class: 'gl-ml-3', variant: :danger, icon: 'remove', 'aria-label': _('Remove')
-    = link_button_to revoke_profile_gpg_key_path(key), data: { confirm: _('Are you sure? All commits that were signed with this GPG key will be unverified.') }, method: :put, class: 'gl-ml-3', variant: :danger, 'aria-label': _('Revoke') do
+  %td{ class: 'gl-py-3!', data: { label: _('Actions') } }
+    = link_button_to nil, profile_gpg_key_path(key), data: { confirm: _('Are you sure? Removing this GPG key does not affect already signed commits.'), confirm_btn_variant: 'danger' }, method: :delete, class: 'has-tooltip', icon: 'remove', category: :secondary, 'title': _('Remove'), 'aria-label': _('Remove')
+    = link_button_to revoke_profile_gpg_key_path(key), data: { confirm: _('Are you sure? All commits that were signed with this GPG key will be unverified.'), confirm_btn_variant: 'danger' }, method: :put, class: 'gl-ml-3', category: :secondary, variant: :danger, 'aria-label': _('Revoke') do
       = _('Revoke')