(refs #12)Fix styles

src/main/twirl/helper/attached.scala.html

@@ -1,13 +1,13 @@
 @(owner: String, repository: String)(textarea: Html)(implicit context: app.Context)
 @import context._
-<div class="muted">
+<div class="muted attachable">
   @textarea
-  Attach images by dragging &amp; dropping, or selecting them.
+  <div>Attach images by dragging &amp; dropping, or selecting them.</div>
 </div>
 @defining("(id=\")([\\w\\-]*)(\")".r.findFirstMatchIn(textarea.body).map(_.group(2))){ textareaId =>
 <script>
 $(function(){
-  $('#@textareaId').closest('div').dropzone({
+  $('#@textareaId').next('div').dropzone({
     url: '@path/upload/image/@owner/@repository',
     maxFilesize: 10,
     acceptedFiles: 'image/*',
@@ -19,6 +19,9 @@ $(function(){
       $(file.previewElement).prevAll('div.dz-preview').addBack().remove();
     }
   });
+
+  // Adjust attachment area width
+  $('div.attachable div').css('width', ($('div.attachable textarea').width() + 8) + 'px');
 });
 </script>
 }

src/main/webapp/assets/common/css/gitbucket.css

@@ -671,6 +671,26 @@ div.issue-comment-action {
           border-radius: 5px;
 }
 
+div.attachable {
+  margin-bottom: 10px;
+}
+
+div.attachable textarea {
+  margin-bottom: 0px;
+  border-bottom: 1px dashed #ccc;
+  -webkit-border-radius: 0px;
+  -moz-border-radius: 0px;
+  border-radius: 0px;
+}
+
+div.attachable div {
+  padding: 2px;
+  border-left: 1px solid #ccc;
+  border-right: 1px solid #ccc;
+  border-bottom: 1px solid #ccc;
+  background-color: white;
+}
+
 /****************************************************************************/
 /* Pull Request */
 /****************************************************************************/