[CSS] .note-info text will automatically crop when no space is available, on hover will show contents

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-uri,
-.note-author-nickname, .note-conversation-info {
+.note-conversation-info {
-    opacity: .5;
+    font-style: italic;
 }
-
+.note-actions {
-.note-author-url {
+    display: block;
-    float: left;
+}
+.note-actions > li {
+    display: inline-block;
     margin-left: 4px;
 }
-
+.note-actions-extra-details {
-.note-author-url, .note-conversation-url, .note-url {
+    margin-right: 4px;
-    font-style: italic;
+}
+.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;

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" #}
-    <a href="{{ actor_url }}">
+    <a href="{{ actor_url }}" class="note-author-url u-url" tabindex="0" title="{{ 'Begin a note by the user: ' | trans }} {{ nickname }}">
-        <header class="note-author-fullname" tabindex="0"
+        {% if fullname is not null %}
-                title="{{ 'Begin a note by the user: ' | trans }} {{ nickname }}">
+            {{ fullname }}
-            {% if fullname is not null %}
+        {% else %}
-                {{ fullname }}
+            {{ nickname }}
-            {% else %}
+        {% endif %}
-                {{ nickname }}
-            {% endif %}
-        </header>
     </a>
 
-    <small class="note-author-nickname">
+    <small class="note-author-uri">
         <a href="{{ actor_uri }}"
-           class="note-author-url u-url">{{ mention }}</a>
+           class="u-url">{{ mention }}</a>
     </small>
 {% endblock note_author %}
 
@@ -107,7 +104,7 @@
 {% endblock note_sidebar %}
 
 {% block note_info %}
-    <div class="note-info-start">
+    <span class="note-info-start">
         {{ block('note_author') }}
         <small class="note-conversation-info">
             <a href="{{ note.getConversationUrl() }}"
@@ -115,7 +112,7 @@
             <a href="{{ note.getUrl() }}"
                class="note-url">{{ note.getModified() | ago }}</a>
         </small>
-    </div>
+    </span>
 {% endblock note_info %}
 
 {% block note_complementary_info %}