From 1a4b94e5df8d1ac9d9bf9ea4a265455c1b30ac7c Mon Sep 17 00:00:00 2001
From: Naoki Takezoe <takezoe@gmail.com>
Date: Tue, 15 Dec 2015 11:46:47 +0900
Subject: [PATCH] Fix modal dialog

---
 .../core/helper/forkrepository.scala.html     | 15 ++--
 .../core/settings/edithooks.scala.html        | 76 ++++++++++---------
 2 files changed, 48 insertions(+), 43 deletions(-)

diff --git a/src/main/twirl/gitbucket/core/helper/forkrepository.scala.html b/src/main/twirl/gitbucket/core/helper/forkrepository.scala.html
index bd7255411..e14cb17ce 100644
--- a/src/main/twirl/gitbucket/core/helper/forkrepository.scala.html
+++ b/src/main/twirl/gitbucket/core/helper/forkrepository.scala.html
@@ -2,17 +2,18 @@
   groupAndPerm: Map[String, Boolean])(implicit context: gitbucket.core.controller.Context)
 @import context._
 @import gitbucket.core.view.helpers._
-  <h2 class="facebox-header">Where should we fork this repository?</h2>
-  <form action="@url(repository)/fork" id="fork" method="post">
-    <div class="owner-select-grid">
-      <div class="owner-select-target js-fork-owner-select-target enabled">@avatar(loginAccount.get.userName, 100)<span class="owner css-truncate" title="@@@loginAccount.get.userName">@@@loginAccount.get.userName</span></div>
+<h2 class="facebox-header">Where should we fork this repository?</h2>
+<form action="@url(repository)/fork" id="fork" method="post">
+  <div class="owner-select-grid">
+    <div class="owner-select-target js-fork-owner-select-target enabled">@avatar(loginAccount.get.userName, 100)<span class="owner css-truncate" title="@@@loginAccount.get.userName">@@@loginAccount.get.userName</span></div>
     @for((groupName, isManager) <- groupAndPerm) {
       @if(isManager) {
-      <div class="owner-select-target js-fork-owner-select-target enabled">@avatar(groupName, 100)<span class="owner css-truncate" title="@@@groupName">@@@groupName</span></div>
+        <div class="owner-select-target js-fork-owner-select-target enabled">@avatar(groupName, 100)<span class="owner css-truncate" title="@@@groupName">@@@groupName</span></div>
       } else {
-      <div title="You don't have permission to fork here."  class="owner-select-target js-fork-owner-select-target disabled">@avatar(groupName, 100)<span class="owner css-truncate" title="@@@groupName">@@@groupName</span></div>
+        <div title="You don't have permission to fork here."  class="owner-select-target js-fork-owner-select-target disabled">@avatar(groupName, 100)<span class="owner css-truncate" title="@@@groupName">@@@groupName</span></div>
       }
     }
     </div>
-    <input id="account" name="account" type="hidden" />
+  </div>
+  <input id="account" name="account" type="hidden" />
 </form>
\ No newline at end of file
diff --git a/src/main/twirl/gitbucket/core/settings/edithooks.scala.html b/src/main/twirl/gitbucket/core/settings/edithooks.scala.html
index 467651fe9..39a845786 100644
--- a/src/main/twirl/gitbucket/core/settings/edithooks.scala.html
+++ b/src/main/twirl/gitbucket/core/settings/edithooks.scala.html
@@ -69,45 +69,49 @@
           </form>
         </div>
       </div>
-      <div class="modal hide" id="test-report-modal">
-        <div class="modal-header">
-          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-          <h3>WebHook Test</h3>
-        </div>
-        <div class="modal-body">
-          <p>request to <span id="test-modal-url" style="word-break: break-all; word-wrap: break-word; white-space: pre; white-space: pre-wrap;"></span></p>
-          <div id="test-report" style="display:none">
-            <ul class="nav nav-tabs" id="test-report-tab">
-              <li class="active"><a href="#REQUEST">REQUEST</a></li>
-              <li><a href="#RESPONCE">RESPONCE <span class="badge badge-success" id="res-status"></span></a></li>
-            </ul>
-            <div class="tab-content" style="max-height: 300px;">
-              <div class="tab-pane active" id="REQUEST">
-                <div id="req-errors" class="alert alert-error">
-                  ERROR<span id="req-errors-body"></span>
-                </div>
-                <div id="req-success" style="display:none">
-                  Headers
-                  <pre id="req-headers"></pre>
-                  Payload
-                  <pre id="req-payload"></pre>
-                </div>
-              </div>
-              <div class="tab-pane" id="RESPONCE">
-                <div id="res-errors" class="alert alert-error">
-                  ERROR<span id="res-errors-body"></span>
-                </div>
-                <div id="res-success" style="display:none">
-                  Headers
-                  <pre id="res-headers"></pre>
-                  Body
-                  <pre id="res-body"></pre>
+      <div class="modal" id="test-report-modal" role="dialog" tabindex="-1">
+        <div class="modal-dialog">
+          <div class="modal-content">
+            <div class="modal-header">
+              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+              <h3>WebHook Test</h3>
+            </div>
+            <div class="modal-body" style="max-height: 300px; overflow: auto;">
+              <p>request to <span id="test-modal-url" style="word-break: break-all; word-wrap: break-word; white-space: pre; white-space: pre-wrap;"></span></p>
+              <div id="test-report" style="display:none">
+                <ul class="nav nav-tabs" id="test-report-tab">
+                  <li class="active"><a href="#request">Request</a></li>
+                  <li><a href="#response">Response <span class="badge badge-success" id="res-status"></span></a></li>
+                </ul>
+                <div class="tab-content">
+                  <div class="tab-pane active" id="request">
+                    <div id="req-errors" class="alert alert-error">
+                      ERROR<span id="req-errors-body"></span>
+                    </div>
+                    <div id="req-success" style="display:none">
+                      Headers
+                      <pre id="req-headers"></pre>
+                      Payload
+                      <pre id="req-payload"></pre>
+                    </div>
+                  </div>
+                  <div class="tab-pane" id="response">
+                    <div id="res-errors" class="alert alert-error">
+                      ERROR<span id="res-errors-body"></span>
+                    </div>
+                    <div id="res-success" style="display:none">
+                      Headers
+                      <pre id="res-headers"></pre>
+                      Body
+                      <pre id="res-body"></pre>
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
-        </div>
-      </div>
+          </div><!-- /.modal-content -->
+        </div><!-- /.modal-dialog -->
+      </div><!-- /.modal -->
 <script>
 $(function(){
   $('#test-report-tab a').click(function (e) {