diff --git a/public/assets/default_theme/css/pages/feeds.css b/public/assets/default_theme/css/pages/feeds.css
index 242a1a3ea0..98b1b57daa 100644
--- a/public/assets/default_theme/css/pages/feeds.css
+++ b/public/assets/default_theme/css/pages/feeds.css
@@ -203,48 +203,6 @@
margin-top: var(--s);
}
-.note-actions {
- float: right;
-}
-
-.note-actions > li {
- display: inline-block;
- margin-left: 2px;
- margin-right: 2px;
-}
-
-.note-actions-extra-details ul {
- display: flex;
- flex-direction: column;
-}
-
-.note-actions-extra-details hr {
- margin: unset;
-}
-
-.note-actions-extra-details summary {
- opacity: .33;
-}
-
-.note-actions-extra-details[open] > summary + * > li {
- font-size: .937rem;
- line-height: 2;
-}
-
-.note-actions-separator {
- background: var(--foreground);
- display: inline-block;
- height: 1em;
- margin-left: 2px;
- margin-right: 2px;
- opacity: .33;
- width: 1px;
-}
-
-.note-actions-set {
- opacity: 1 !important;
-}
-
.note-attachments {
display: flex;
}
@@ -265,21 +223,75 @@
margin-right: var(--s);
}
-.note-author-fullname {
+.note-info,
+embed header {
+ border-bottom: unset;
+ border-radius: 0 var(--s) 0 0;
+ display: flex;
+ line-height: initial;
+ padding: 4px var(--s) 4px 0;
+}
+.note-info {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ align-items: center;
+ background: var(--gradient-backwards);
+}
+.note-info-start {
+ flex: 1;
+ width: 150px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+.note-info-start:hover, .note-info-start:focus {
+ text-align: left;
+ direction: rtl;
+}
+.note-info-start small {
+ opacity: 0.5;
+}
+.note-author-url {
font-weight: 700;
}
-
-.note-author-nickname, .note-conversation-info {
- opacity: .5;
+.note-author-uri,
+.note-conversation-info {
+ font-style: italic;
}
-
-.note-author-url {
- float: left;
+.note-actions {
+ display: block;
+}
+.note-actions > li {
+ display: inline-block;
margin-left: 4px;
}
-
-.note-author-url, .note-conversation-url, .note-url {
- font-style: italic;
+.note-actions-extra-details {
+ margin-right: 4px;
+}
+.note-actions-extra-details ul {
+ display: flex;
+ flex-direction: column;
+}
+.note-actions-extra-details hr {
+ margin: unset;
+}
+.note-actions-extra-details summary {
+ opacity: 0.5;
+}
+.note-actions-extra-details[open] > summary + * > li {
+ font-size: 0.937rem;
+ line-height: 2;
+}
+.note-actions-separator {
+ background: var(--foreground);
+ display: inline-block;
+ height: 1em;
+ opacity: 0.33;
+ width: 1px;
+}
+.note-actions-set {
+ opacity: 1 !important;
}
.note-complementary {
@@ -306,32 +318,6 @@
padding: 0 4px 4px 0;
}
-.note-conversation-info {
- margin-left: 4px;
-}
-
-.note-info {
- display: flex;
- justify-content: space-between;
- background: var(--gradient-backwards);
-}
-
-.note-info, embed header {
- border-bottom: unset;
- border-radius: 0 var(--s) 0 0;
- display: flex;
- line-height: initial;
- padding: 4px var(--s) 4px 0;
-}
-
-.note-info-start {
- display: flex;
-}
-
-.note-info-start > * {
- word-break: break-all;
-}
-
.note-replies-start {
font-size: .937rem;
font-weight: 700;
diff --git a/templates/cards/note/view.html.twig b/templates/cards/note/view.html.twig
index 53beeca3d0..e3fe3a7f9c 100644
--- a/templates/cards/note/view.html.twig
+++ b/templates/cards/note/view.html.twig
@@ -79,20 +79,17 @@
{% block note_author %}
{# Microformat's h-card properties indicates a face icon is a "u-logo" #}
-
-
- {% if fullname is not null %}
- {{ fullname }}
- {% else %}
- {{ nickname }}
- {% endif %}
-
+
+ {% if fullname is not null %}
+ {{ fullname }}
+ {% else %}
+ {{ nickname }}
+ {% endif %}
-
+
{{ mention }}
+ class="u-url">{{ mention }}
{% endblock note_author %}
@@ -107,7 +104,7 @@
{% endblock note_sidebar %}
{% block note_info %}
-
+
{% endblock note_info %}
{% block note_complementary_info %}