From bcd56a23e70ae1e99d8b72b247d168e60902f6e5 Mon Sep 17 00:00:00 2001
From: flashwave <me@flash.moe>
Date: Thu, 16 Aug 2018 04:02:27 +0200
Subject: [PATCH] Fixed user card wrapping issues.

---
 assets/less/mio/classes/header.less   | 4 ++++
 assets/less/mio/classes/usercard.less | 7 +++++++
 templates/_layout/header.twig         | 2 +-
 templates/user/macros.twig            | 6 +++---
 4 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/assets/less/mio/classes/header.less b/assets/less/mio/classes/header.less
index a600ef8a..9308e2ea 100644
--- a/assets/less/mio/classes/header.less
+++ b/assets/less/mio/classes/header.less
@@ -216,6 +216,10 @@
             text-decoration: none;
             display: block;
             text-align: right;
+            text-overflow: ellipsis;
+            max-width: 150px;
+            overflow: hidden;
+            white-space: nowrap;
 
             @media (min-width: @site-mobile-width) {
                 &:hover {
diff --git a/assets/less/mio/classes/usercard.less b/assets/less/mio/classes/usercard.less
index 3d4b4daf..15d5f388 100644
--- a/assets/less/mio/classes/usercard.less
+++ b/assets/less/mio/classes/usercard.less
@@ -50,6 +50,9 @@
     &__name {
         font-size: 1.4em;
         line-height: 1.4em;
+        text-overflow: ellipsis;
+        max-width: 220px;
+        overflow: hidden;
     }
 
     &__info {
@@ -64,6 +67,10 @@
         color: inherit;
         text-decoration: none;
         flex: 0 0 auto;
+        text-overflow: ellipsis;
+        max-width: 150px;
+        overflow: hidden;
+        white-space: nowrap;
 
         &--active {
             pointer-events: auto;
diff --git a/templates/_layout/header.twig b/templates/_layout/header.twig
index 76452863..e2be1ca3 100644
--- a/templates/_layout/header.twig
+++ b/templates/_layout/header.twig
@@ -55,7 +55,7 @@
                         style="{{ current_user.user_colour|html_colour({
                             'color': '%s',
                             'text-shadow': '0 0 5px %s',
-                        }) }}">
+                        }) }}" title="{{ current_user.username }}">
                         {{ current_user.username }}
                     </a>
                 {% else %}
diff --git a/templates/user/macros.twig b/templates/user/macros.twig
index 37bff45b..d61dc135 100644
--- a/templates/user/macros.twig
+++ b/templates/user/macros.twig
@@ -1,7 +1,7 @@
 {% macro user_card(user, profile_url, rank_url) %}
     <div class="usercard">
         <a  href="{{ profile_url|default('/profile.php?u=%d')|format(user.user_id) }}"
-            class="usercard__background"></a>
+            class="usercard__background" title="{{ user.username }}"></a>
 
         <div class="usercard__container">
             <div class="avatar usercard__avatar"
@@ -19,7 +19,7 @@
 
                 <div class="usercard__info">
                     {% if user.user_country is defined %}
-                        <div class="flag flag--{{ user.user_country|lower }} usercard__item usercard__item--country" title="{{ user.user_country|country_name }}">
+                        <div class="flag flag--{{ user.user_country|lower }} usercard__item usercard__item--country usercard__item--active" title="{{ user.user_country|country_name }}">
                             {{ user.user_country }}
                         </div>
                     {% endif %}
@@ -29,7 +29,7 @@
                     </a>#}
 
                     {% if user.user_title is defined %}
-                        <a class="usercard__item usercard__item--title{% if user.role_id is defined %} usercard__item--active{% endif %}"{% if user.role_id is defined %} href="{{ rank_url|default('/members.php?r=%d')|format(user.role_id) }}"{% endif %}>
+                        <a class="usercard__item usercard__item--title{% if user.role_id is defined %} usercard__item--active{% endif %}"{% if user.role_id is defined %} href="{{ rank_url|default('/members.php?r=%d')|format(user.role_id) }}"{% endif %} title="{{ user.user_title }}">
                             {{ user.user_title }}
                         </a>
                     {% endif %}