diff --git a/media/css/seahub.css b/media/css/seahub.css
index 0f29f07949..965f865125 100644
--- a/media/css/seahub.css
+++ b/media/css/seahub.css
@@ -1103,6 +1103,9 @@ textarea:-moz-placeholder {/* for FF */
     top:48px;
     font-size:13px;
 }
+#user-info-popup {
+    width:220px;
+}
 #top-nav-grp-info {
     top:40px;
 }
diff --git a/seahub/templates/snippets/groups.html b/seahub/templates/snippets/groups.html
index d0b29dd62b..7cc5d33aba 100644
--- a/seahub/templates/snippets/groups.html
+++ b/seahub/templates/snippets/groups.html
@@ -3,8 +3,8 @@
 <ul>
 {% for grp in groups %}
 <li>
-<a href="{% url "group_info" grp.id %}" class="item">
-    {% grp_avatar grp.id 36 %} <span class="vam">{{ grp.group_name }}</span>
+<a href="{% url "group_info" grp.id %}" class="item" title="{{ grp.group_name }}">
+    {% grp_avatar grp.id 36 %} <span class="vam">{{ grp.group_name|truncatechars:14 }}</span>
 </a>
 </li>
 {% endfor %}