Fix layout of the topics editing form (#4971)

* Fix layout of the topic edit.

- made right-hand column wider so that it has enough space for "Done" button.

- fixed issue that jQuery's .show() breaks functionality of the Semantic UI Grid.

* Improve switching visibility of the topic edit

Changes to support old browsers that doesn't support 'flex' keyword.

- Removed style "display: none" from index.css so that
  the grid can be displayed without specifying new "display" style.

- Added style "display:none" to the grid element in HTML template
  as the initial style.

- In index.js, visibility of the grid element is changed by
  set "display:none" style to the element or removing it from the element.

templates/repo/home.tmpl

@@ -28,7 +28,7 @@
 		{{if .IsRepositoryAdmin}}<a id="manage_topic" style="cursor:pointer;margin-left:10px;">{{.i18n.Tr "repo.topic.manage_topics"}}</a>{{end}}
 		</div>
 		{{if .IsRepositoryAdmin}}
-		<div class="ui repo-topic-edit grid form segment error" id="topic_edit" >
+		<div class="ui repo-topic-edit grid form segment error" id="topic_edit" style="display:none">
 			<div class="fourteen wide column">
 				<div class="field">
 					<div class="ui fluid multiple search selection dropdown">
@@ -40,7 +40,7 @@
 					</div>
 				</div>
 			</div>
-			<div class="one wide column">
+			<div class="two wide column">
 				<a class="ui compact button primary" href="javascript:;" id="save_topic"
 				data-link="{{.RepoLink}}/topics">{{.i18n.Tr "repo.topic.done"}}</a>
 			</div>