fix admin role badge

src/main/resources/static/details.css

@@ -18,8 +18,19 @@
     align-self: start;
 }
 
+.members .badge {
+    align-self: start;
+    margin-top: 2px;
+}
+
 /*Member List*/
 .members {
     overflow-y: auto;
     max-height: calc(100vh - 250px);
 }
+
+.members li span {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+}

src/main/resources/templates/details_member.html

@@ -16,8 +16,8 @@
         <div class="row">
             <!--Gruppendetails-->
             <div class="col-9 px-0">
-
                 <div class="content">
+
                     <div class="content-heading row">
                         <!--Badges-->
                         <span th:replace="~{fragments/gruppen :: badges}"></span>
@@ -67,7 +67,6 @@
                         </form>
                     </div>
                 </div>
-
             </div>
 
             <!--Teilnehmerliste-->
@@ -89,16 +88,17 @@
                     </form>
                 </div>
 
+                <!--Liste-->
                 <div class="members">
                     <ul class="list-group">
-                        <li class="list-group-item" th:each="member : ${group.getMembers()}"
+                        <li class="list-group-item d-flex justify-content-between" th:each="member : ${group.getMembers()}">
-                            th:text="${#strings.abbreviate(member.getGivenname(), 15)  + ' ' + member.getFamilyname().substring(0, 1) + '.'}">
+                            <span th:text="${member.getGivenname()  + ' ' + member.getFamilyname().charAt(0) + '.'}"></span>
-                            <span class="badge badge-success"
+                            <span class="badge badge-success" th:if="${group.getRoles().get(member.getId()) == admin}">Admin</span>
-                                  th:if='${group.getRoles().get(member.getId()) == admin}'>admin</span>
                         </li>
                     </ul>
                 </div>
             </div>
+
         </div>
     </div>