【Ajax】railsでモーダルウィンドウの実装

現状と実現したいこと

現在railsでツイッタークローンアプリをポートフォリオとして作成しております。
ユーザー詳細画面で、自身のツイートを一覧で表示しているのですが、そのツイートの編集をモーダルウインドウを使用して非同期処理をしたいと考えております。
編集と削除のリンクを各ツイートに仕込んである縦三点リーダをクリックしたときに表示するように記述しています。

そこで、
１　縦三点リーダをクリック
２　’Edit’リンクタグ表示
３　’Edit’リンクタグをクリック
４　編集画面モーダルウインドウ表示
の流れを実現したいと考えております。

問題

実装初期段階でつまづいているのですが、bootstrap modal formを参考しようと思い、こちらのbootstrap modal formを参考にしようと思い、
コピペしたところレイアウトが崩れてしまいまい実装が不可能な状況です。
該当コードについて、下記いたします。

該当コード

HTML
1<div class="more-wrapper">
2                              <button class="project-btn-more" onclick="verticalThreeReader()">
3                                  <svg xmlns="http://www.w3.org/2000/svg " width="24 " height="24 " viewBox="0 0 24 24 " fill="none " stroke="currentColor " stroke-width="2 " stroke-linecap="round " stroke-linejoin="round " class="feather feather-more-vertical ">
4                                    <circle cx="12 " cy="12 " r="1 " />
5                                    <circle cx="12 " cy="5 " r="1 " />
6                                    <circle cx="12 " cy="19 " r="1 " />
7                                　</svg>
8                                　<!--縦三点リーダ-->
9                                　<div class="vertical-three-reader">
10                                　    <ul>
11                                        <!--ここから下がコピーしたbootstrap modal form-->
12                                        <!--<li><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">-->
13                                        <!--  Launch demo modal-->
14                                        <!--</button></li>-->
15                                        
16                                         <!--Modal -->
17                                        <!--<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">-->
18                                        <!--  <div class="modal-dialog" role="document">-->
19                                        <!--    <div class="modal-content">-->
20                                        <!--      <div class="modal-header">-->
21                                        <!--        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>-->
22                                        <!--        <button type="button" class="close" data-dismiss="modal" aria-label="Close">-->
23                                        <!--          <span aria-hidden="true">&times;</span>-->
24                                        <!--        </button>-->
25                                        <!--      </div>-->
26                                        <!--      <div class="modal-body">-->
27                                        <!--        ...-->
28                                        <!--      </div>-->
29                                        <!--      <div class="modal-footer">-->
30                                        <!--        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>-->
31                                        <!--        <button type="button" class="btn btn-primary">Save changes</button>-->
32                                        <!--      </div>-->
33                                        <!--    </div>-->
34                                        <!--  </div>-->
35                                        <!--</div>-->
36                                　      <li> <%= link_to("Edit", edit_post_path(post.id), {class: "list-group-item list-group-item-action"}) %></li>
37                                        <li><%= link_to("Delete", post_path(post.id), {method: :delete, class: "list-group-item list-group-item-action"}) %></li>
38                                　    </ul>
39                                　</div>
40                            　</button>
41                          </div>

コメントアウトしている部分がbootstrapの部分です。
コメントアウトトをした状態だと、三点リーダをクリックした際にlink_toの２つが表示されるようになっています。
しかし、コメントを外すとhidden設定してあるlink_toが現れ、明らかにレイアウトが崩れてしまいます。

javascript
1document.addEventListener('DOMContentLoaded', function() {
2
3       const toggleMenu = ({ currentTarget }) => {
4       const menu = currentTarget.querySelector('.vertical-three-reader');
5       menu.style.visibility = menu.style.visibility !== 'hidden' ? 'hidden' : 'visible'
6   }
7 
8       document.querySelectorAll('.project-btn-more').forEach(btn => {
9           toggleMenu({ currentTarget: btn });
10           btn.addEventListener('click', toggleMenu);
11   });
12    
13    
14});

CSS
1.project-boxes {
2    margin: 0 -8px;
3    overflow-y: auto;
4    &.jsGridView {
5        display: flex;
6        flex-wrap: wrap;
7        .project-box-wrapper {
8            width: 33.3%;
9            word-wrap: break-word;
10        }
11    }
12    &.jsListView {
13        .project-box {
14            // display: flex;
15            border-radius: 10px;
16            position: relative;
17            >* {
18                margin-right: 24px;
19                // margin-bottom: 24px;
20            }
21        }
22        .more-wrapper {
23            position: absolute;
24            right: 16px;
25            top: 16px;
26        }
27        .project-box-content-header {
28            order: 1;
29            max-width: 120px;
30            overflow-wrap: break-word;
31        }
32        .project-box-header {
33            order: 2;
34            display: block;
35    
36        }
37        .project-box-footer {
38            order: 3;
39            padding-top: 0;
40            flex-direction: column;
41            justify-content: flex-start;
42        }
43        .project-box-footer:after {
44            display: none;
45        }
46        .participants {
47            margin-bottom: 8px;
48        }
49        .project-box-content-header p {
50            text-align: left;
51            overflow: hidden;
52            white-space: nowrap;
53            text-overflow: ellipsis;
54        }
55        .project-box-header>span {
56            position: absolute;
57            bottom: 16px;
58            left: 16px;
59            font-size: 12px;
60        }
61        .box-progress-wrapper {
62            order: 3;
63            flex: 1;
64        }
65    }
66}
67
68