コメント表示の横の、ユーザー名の見栄えをよくしたい

前提・実現したいこと

現在このような状態です
https://gyazo.com/40b18117d86412779d380dcdeb01a219
###（aaaなどがテキストで、testの書いてあるのでユーザ名です）

これを
https://gyazo.com/c97437c654fefa24c3bf6f206fb47378
このような形にしたいです

発生している問題・エラーメッセージ

上記のことです

該当のソースコード

添付した画面のhtmlです

html
1<main class="main">
2  <div class="inner">
3    <div class="prototype__wrapper">
4      <p class="prototype__hedding">
5        <%= "プロトタイプのタイトル"%>
6      </p>
7      
8      <%= link_to "by" + @prototype.user.name  , prototype_path(@prototype.id), class: :prototype__user %>
9      <%# 上の記述で＠prototypeにuserモデルからnameカラムを持ってくるコードができた %>
10      <%# プロトタイプの投稿者とログインしているユーザーが同じであれば以下を表示する %>
11        <div class="prototype__manage">
12          <%= link_to "編集する", edit_prototype_path, class: :prototype__btn %>
13          <%= link_to "削除する", prototype_path, method: :delete, class: :prototype__btn %>
14        </div>
15      <%# // プロトタイプの投稿者とログインしているユーザーが同じであれば上記を表示する %>
16      <div class="prototype__image">
17        <%= image_tag @prototype.image %>
18      </div>
19      <div class="prototype__body">
20        <div class="prototype__detail">
21          <p class="detail__title">キャッチコピー</p>
22          <p class="detail__message">
23            <%= @prototype.catct_copy%>
24          </p>
25        </div>
26        <div class="prototype__detail">
27          <p class="detail__title">コンセプト</p>
28          <p class="detail__message">
29            <%= @prototype.concept%>
30          </p>
31        </div>
32      </div>
33      <div class="prototype__comments">
34        <%# ログインしているユーザーには以下のコメント投稿フォームを表示する %>
35          <% if current_user %>
36            <%= form_with model: [@prototype, @comment], local: true do |f|%> 
37            <%# (model: [@prototype, @comment], local: true)にするといいかも %>
38            <div class="field">
39              <%=  f.label :text, "コメント" %><br />
40              <%=  f.text_field :text %>
41            </div>
42            <div class="actions">
43              <%= f.submit "送信する", class: :form__btn  %>
44            </div>
45            <% end %> 
46           <% else %>
47                <strong><p>※※※ コメントの投稿には新規登録/ログインが必要です ※※※</p></strong>
48           <% end %> 
49        <%# // ログインしているユーザーには上記を表示する %>
50        <ul class="comments_lists">
51          <%# 投稿に紐づくコメントを一覧する処理を記述する %>
52              <% if @comments %>
53              <% @comments.each do |comment| %>
54<li class="comments_list">
55              <%= link_to comment.text　+ @prototype.user.name root_path, class: :comment_user %>
56             <% end %>
57             <% end %>
58            </li>
59          <%# // 投稿に紐づくコメントを一覧する処理を記述する %>
60        </ul>
61      </div>
62    </div>
63  </div>
64</main>

画面のcssです

CSS
1/* リセットCSS */
2* {
3  box-sizing: border-box;
4}
5
6html,
7body,
8ul,
9li,
10h1,
11h2,
12p,
13div {
14  margin: 0;
15  padding: 0;
16}
17
18body {
19  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN W3", sans-serif;
20  color: #3b4043;
21}
22
23li {
24  list-style: none;
25}
26
27img {
28  max-width: 100%;
29  vertical-align: bottom;
30}
31
32a {
33  text-decoration: none;
34  color: #3b4043;
35}
36
37/* ヘッダー */
38
39.header {
40  background-color: #f1f8fe;
41  margin-bottom: 48px;
42  padding: 20px 0;
43
44}
45.inner {
46  width: 1024px;
47  margin: 0 auto;
48}
49.nav {
50  width: 100%;
51  display: flex;
52  justify-content: space-between;
53}
54.logo {
55  width: 200px;
56}
57.nav__btn{
58  display: inline-block;
59  padding: 0.4em 1.6em;
60  font-size: 0.8em;
61  color: #87CEFA;
62  text-decoration: none;
63  user-select: none;
64  border: 1px #87CEFA solid;
65  border-radius: 3px;
66  transition: 0.4s ease;
67}
68.nav__btn:hover{
69  color: #fff;
70  background: #87CEFA;
71}
72
73.nav__logout{
74  display: inline-block;
75  padding: 0.4em 1.6em;
76  font-size: 0.8em;
77  color: #87CEFA;
78  text-decoration: none;
79  user-select: none;
80}
81.nav__logout:hover{
82  opacity: 0.5;
83}
84
85/* フォーム周り */
86.form__wrapper{
87  min-height: calc(100vh - 161px);
88}
89
90.form__text {
91  width: 50%;
92}
93
94.field{
95  margin: 10px 0;
96}
97
98.actions{
99  margin-bottom: 40px;
100}
101
102.form__btn{
103  display: inline-block;
104  padding: 0.4em 1.6em;
105  font-size: 0.8em;
106  color: #fff;
107  text-decoration: none;
108  user-select: none;
109  background: #87CEFA;
110  border: 1px #87CEFA solid;
111  border-radius: 3px;
112  box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.14), 0 1px 2px 0 rgba(0, 0, 0, 0.12);
113  transition: 0.2s ease;
114}
115
116.form__btn:hover {
117  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2), 0 1px 8px 0 rgba(0, 0, 0, 0.12);
118  cursor: pointer;
119}
120
121/* メイン */
122
123.greeting{
124  margin-bottom: 20px;
125}
126.greeting__link{
127  text-decoration: underline;
128}
129.page-heading {
130  font-size: 30px;
131  margin-bottom: 28px;
132}
133.card__wrapper {
134  display: flex;
135  flex-wrap: wrap;
136  justify-content: space-between;
137  align-items: center;
138  min-height: calc(100vh - 161px);
139}
140.card {
141  width: calc((100% - 50px) / 3);
142  margin-bottom: 40px;
143}
144.card__img {
145  margin-bottom: 16px;
146}
147.card__title {
148  display: block;
149  font-size: 20px;
150  margin-bottom: 8px;
151  font-weight: bold;
152}
153.card__summary {
154  font-size: 16px;
155}
156.card__user {
157  display: block;
158  font-size: 12px;
159  color: #999;
160  text-align: right;
161  text-decoration: underline;
162}
163
164/* 詳細ページ */
165.prototype__wrapper{
166  min-height: calc(100vh - 161px);
167}
168.prototype__hedding{
169  font-size: 24px;
170  font-weight: bold;
171  text-align: center;
172}
173.prototype__user{
174  display: block;
175  font-size: 16px;
176  color: #999;
177  text-align: center;
178  text-decoration: underline;
179}
180.prototype__image{
181  width: 40%;
182  margin: 0 auto;
183  padding: 16px 0;
184}
185.prototype__detail{
186  display: flex;
187  align-items: center;
188  flex-direction: column;
189  margin-bottom: 8px;
190}
191.detail__title{
192  font-size: 20px;
193  font-weight: bold;
194}
195.prototype__manage{
196  display: flex;
197  justify-content: center;
198  padding-top: 16px;
199}
200.prototype__btn{
201  display: block;
202  padding: 0.4em 1.6em;
203  font-size: 0.4em;
204  color: #999;
205  text-decoration: none;
206  user-select: none;
207  border: 1px #999 solid;
208  border-radius: 3px;
209  transition: 0.4s ease;
210  margin: 0 4px;
211}
212.prototype__btn:hover{
213  color: #fff;
214  background: #999;
215}
216
217.prototype__comments{
218  background-color: #f6f6f6;
219  padding: 20px;
220  margin: 28px 0 40px 0;
221}
222
223.comments_lists{
224  padding-left: 20px;
225}
226
227.comments_list{
228  list-style-type: square;
229  padding-bottom: 5px;
230}
231
232.comment_user{
233  font-size: 16px;
234  color: #999;
235  text-decoration: underline;
236}
237
238/* ユーザーページ */
239.user__wrapper{
240  min-height: calc(100vh - 161px);
241}
242.table{
243  border-collapse: collapse;
244  margin-bottom: 32px;
245  width: 50%;
246}
247.table__col1{
248  text-align: left;
249  font-weight: bold;
250  background: #fafafa;
251  border-collapse: collapse;
252  border: 1px solid #f5f5f5;
253  width: 30%;
254  padding: 8px;
255}
256.table__col2{
257  text-align: left;
258  border: 1px solid #f5f5f5;
259  border-collapse: collapse;
260  width: 70%;
261  padding: 16px 8px;
262}
263.user__card {
264  display: flex;
265  flex-wrap: wrap;
266  justify-content: space-between;
267  align-items: center;
268}
269/* フッター */
270
271.footer {
272  background-color: #999;
273  padding: 10px 0;
274}
275.copyright {
276  text-align: center;
277  color: #fff;
278  font-size: 10px;
279}
280
281/* タブレット対応 */
282@media (max-width: 1024px) {
283  .inner {
284    width: 90%;
285    margin: 0 auto;
286  }
287  .page-heading {
288    font-size: 24px;
289  }
290  .card {
291    width: 48%;
292    margin-bottom: 40px;
293  }
294  .prototype_image{
295    width: 60%;
296  }
297}
298
299 /* スマホ表示 */
300@media (max-width: 599px) {
301  .logo {
302    width: 120px;
303  }
304  .page-heading {
305    font-size: 20px;
306  }
307  .card {
308    width: 100%;
309    margin-bottom: 60px;
310  }
311  .card__title {
312    font-size: 18px;
313  }
314  .card__summary {
315    font-size: 14px;
316  }
317  .prototype_image{
318    width: 100%;
319  }
320  .table{
321    width: 100%;
322  }
323}

commentのコントローラー.rbです

ruby
1class CommentsController < ApplicationController
2  def create
3    @comment = Comment.create(comment_params)
4    if @comment.save
5       redirect_to "/prototypes/#{@comment.prototype.id}"
6    else
7       render :show
8    end
9  
10  end
11
12  private
13  def comment_params
14    params.require(:comment).permit(:text).merge(user_id: current_user.id, prototype_id: params[:prototype_id])
15  end
16end
17

prototypeのコントローラーrbです

ruby
1class PrototypesController < ApplicationController
2
3  def index
4     @prototypes = Prototype.all
5  end
6  
7  def new
8    @prototype = Prototype.new
9  end
10
11  def create
12    @prototype = Prototype.new(prototype_params)
13    if @prototype.save
14       redirect_to root_path
15    else
16      render :new
17    end
18  end
19
20  def show
21    @prototype = Prototype.find(params[:id])
22    @comment = Comment.new
23    @comments = @prototype.comments.includes(:user)
24
25  end
26
27  def edit
28    @prototype = Prototype.find(params[:id])
29  end 
30
31  def update
32    prototype = Prototype.find(params[:id])
33    if prototype.update(prototype_params)
34       redirect_to prototype_path
35   else
36      render :edit
37   end
38  end
39
40  def destroy
41    prototype = Prototype.find(params[:id])
42    prototype.destroy
43    redirect_to root_path
44  end
45
46  private
47  def prototype_params
48    params.require(:prototype).permit(:title, :catct_copy, :concept, :image).merge(user_id: current_user.id)
49  end  
50
51end