Fixed name card display too long id

public_new/template/template_user_name_card.html

 <div class="modal fade profile_modal" id="userNameCard" tabindex="-1" role="dialog" aria-labelledby="userNameCard"
   aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered" role="document">
-    <div class="modal-content-wrap d-flex align-items-center m-auto">
+    <div class="modal-content-wrap d-flex align-items-center m-auto" style="width:100%;">
       <div class="modal-content">
-        <div class="modal-header border-0">
+        <div class="modal-header border-0" style="display: block;">
+          <div class="profile_desc_ d-flex flex-row" style="align-items: flex-start;">
+            <img src="{{profileUrl}}" onError="this.src='./img/noImage.png'" />
+            <div class="profile_name d-flex justify-content-center align-items-center" style="width: 75%;">
+              <span style="overflow-wrap: break-word; width: 100%;">{{name}}</span></div>
             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true" style="font-size:40px;">&times;</span>
             </button>
-          <div class="profile_desc_ d-flex flex-row">
-            <img src="{{profileUrl}}" onError="this.src='./img/noImage.png'" />
-            <div class="profile_name d-flex justify-content-center align-items-center"><span>{{name}}</span></div>
           </div>
         </div>
         <div class="modal-body" id="userNameCard-scroll">