diff --git a/app/javascript/mastodon/features/account/components/header.js b/app/javascript/mastodon/features/account/components/header.js
index bbf886dca8..def6257956 100644
--- a/app/javascript/mastodon/features/account/components/header.js
+++ b/app/javascript/mastodon/features/account/components/header.js
@@ -142,16 +142,14 @@ export default class Header extends ImmutablePureComponent {
{fields.size > 0 && (
-
-
- {fields.map((pair, i) => (
-
- |
- |
-
- ))}
-
-
+
+ {fields.map((pair, i) => (
+
+
+
+
+ ))}
+
)}
{info}
diff --git a/app/javascript/styles/mastodon/accounts.scss b/app/javascript/styles/mastodon/accounts.scss
index c2d0de4b99..b063ca52dd 100644
--- a/app/javascript/styles/mastodon/accounts.scss
+++ b/app/javascript/styles/mastodon/accounts.scss
@@ -565,36 +565,41 @@
}
.account__header__fields {
- border-collapse: collapse;
padding: 0;
margin: 15px -15px -15px;
border: 0 none;
border-top: 1px solid lighten($ui-base-color, 4%);
border-bottom: 1px solid lighten($ui-base-color, 4%);
+ font-size: 14px;
+ line-height: 20px;
- th,
- td {
- padding: 15px;
- padding-left: 15px;
- border: 0 none;
+ dl {
+ display: flex;
border-bottom: 1px solid lighten($ui-base-color, 4%);
- vertical-align: middle;
}
- th {
- padding-left: 15px;
- font-weight: 500;
+ dt,
+ dd {
+ box-sizing: border-box;
+ padding: 14px;
text-align: center;
- width: 94px;
+ max-height: 48px;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
+
+ dt {
+ font-weight: 500;
+ width: 120px;
+ flex: 0 0 auto;
color: $secondary-text-color;
background: rgba(darken($ui-base-color, 8%), 0.5);
}
- td {
+ dd {
+ flex: 1 1 auto;
color: $darker-text-color;
- text-align: center;
- width: 100%;
- padding-left: 0;
}
a {
@@ -608,12 +613,7 @@
}
}
- tr {
- &:last-child {
- th,
- td {
- border-bottom: 0;
- }
- }
+ dl:last-child {
+ border-bottom: 0;
}
}
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index f1284b3884..7cf6f4b769 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -5163,34 +5163,35 @@ noscript {
font-size: 14px;
line-height: 20px;
overflow: hidden;
- border-collapse: collapse;
margin: 20px -10px -20px;
border-bottom: 0;
- tr {
+ dl {
border-top: 1px solid lighten($ui-base-color, 8%);
- text-align: center;
+ display: flex;
}
- th,
- td {
+ dt,
+ dd {
+ box-sizing: border-box;
padding: 14px 20px;
- vertical-align: middle;
- max-height: 40px;
+ text-align: center;
+ max-height: 48px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
- th {
+ dt {
color: $darker-text-color;
background: darken($ui-base-color, 4%);
- max-width: 120px;
+ width: 120px;
+ flex: 0 0 auto;
font-weight: 500;
}
- td {
- flex: auto;
+ dd {
+ flex: 1 1 auto;
color: $primary-text-color;
background: $ui-base-color;
}
diff --git a/app/views/accounts/_header.html.haml b/app/views/accounts/_header.html.haml
index f246f53262..41315f0393 100644
--- a/app/views/accounts/_header.html.haml
+++ b/app/views/accounts/_header.html.haml
@@ -24,12 +24,11 @@
.account__header__content.p-note.emojify= Formatter.instance.simplified_format(account, custom_emojify: true)
- unless account.fields.empty?
- %table.account__header__fields
- %tbody
- - account.fields.each do |field|
- %tr
- %th.emojify= field.name
- %td.emojify= Formatter.instance.format_field(account, field.value)
+ .account__header__fields
+ - account.fields.each do |field|
+ %dl
+ %dt.emojify{ title: field.name }= field.name
+ %dd.emojify{ title: field.value }= Formatter.instance.format_field(account, field.value)
.details-counters
.counter{ class: active_nav_class(short_account_url(account)) }