Responsive view (#2750)

* Viewport meta tag

* responsive: dashboard

* responsive: issues page

* responsive: Explore page

* responsive: navbar, and some navbar css refactoring

* responsive: button for collapsing navbar in mobile view

* Mark the hamburger button as active when pressed

* better homepage for responsive views

* Bring back jump class in navbar

The class was necessary, because this way the
dropdown doesn't assume the contents of the
selected item.

* make repository homes responsive

* Make file view page responsive

* Make forms look good on responsive views

* make commits and commit diff view responsive

* issues and PRs

* responsive wiki

* Don't place auto-init far off the page

* Minor changes to amend broken stuff

minor improvements

- make login/sign up in navbar stackable
- make navbar in explore and sign in not stackable

Change selected class in TestPullCompare

Fix typo that happened when rebasing

fix dashboard on org view

improve profile UI

Use clearing on file diff to fix broken UI caused by floating elements

remove unresolved merge conflict, and | Sanitize

Fix repo home not loading

13 files changed, 298 insertions, 258 deletions

diff --git a/templates/repo/commits.tmpl b/templates/repo/commits.tmpl
index b3701af846..32301a038a 100644
--- a/templates/repo/commits.tmpl
+++ b/templates/repo/commits.tmpl
@@ -3,7 +3,7 @@
 	{{template "repo/header" .}}
 	<div class="ui container">
 		{{template "repo/sub_menu" .}}
-		<div class="ui secondary menu">
+		<div class="ui secondary stackable menu mobile--margin-between-items">
 		{{template "repo/branch_dropdown" .}}
 			<div class="fitted item">
 				<a href="{{.RepoLink}}/graph" class="ui basic small compact button">
diff --git a/templates/repo/commits_table.tmpl b/templates/repo/commits_table.tmpl
index 326ce91e98..4503976e0e 100644
--- a/templates/repo/commits_table.tmpl
+++ b/templates/repo/commits_table.tmpl
@@ -1,22 +1,26 @@
 <h4 class="ui top attached header">
-	{{.CommitCount}} {{.i18n.Tr "repo.commits.commits"}} {{if .Branch}}({{.Branch}}){{end}}
-	{{if .PageIsCommits}}
-		<div class="ui right">
-			<form action="{{.RepoLink}}/commits/{{.BranchNameSubURL}}/search">
-				<div class="ui tiny search input">
-					<input name="q" placeholder="{{.i18n.Tr "repo.commits.search"}}" value="{{.Keyword}}" autofocus>
-				</div>
-				&nbsp;
-				<div class="ui checkbox">
-					<input type="checkbox" name="all" id="all" value="true" {{.All}}>
-					<label for="all">{{.i18n.Tr "repo.commits.search_all"}} &nbsp;&nbsp;</label>
-				</div>
-				<button class="ui black tiny button" data-panel="#add-deploy-key-panel">{{.i18n.Tr "repo.commits.find"}}</button>
-			</form>
+	<div class="ui stackable grid">
+		<div class="six wide column">
+			{{.CommitCount}} {{.i18n.Tr "repo.commits.commits"}} {{if .Branch}}({{.Branch}}){{end}}
 		</div>
-	{{else if .IsDiffCompare}}
-		<a href="{{$.CommitRepoLink}}/commit/{{.BeforeCommitID}}" class="ui green sha label">{{ShortSha .BeforeCommitID}}</a> ... <a href="{{$.CommitRepoLink}}/commit/{{.AfterCommitID}}" class="ui green sha label">{{ShortSha .AfterCommitID}}</a>
-	{{end}}
+		<div class="ten wide right aligned column">
+			{{if .PageIsCommits}}
+				<form action="{{.RepoLink}}/commits/{{.BranchNameSubURL}}/search">
+					<div class="ui tiny search input">
+						<input name="q" placeholder="{{.i18n.Tr "repo.commits.search"}}" value="{{.Keyword}}" autofocus>
+					</div>
+					&nbsp;
+					<div class="ui checkbox">
+						<input type="checkbox" name="all" id="all" value="true" {{.All}}>
+						<label for="all">{{.i18n.Tr "repo.commits.search_all"}} &nbsp;&nbsp;</label>
+					</div>
+					<button class="ui black tiny button" data-panel="#add-deploy-key-panel">{{.i18n.Tr "repo.commits.find"}}</button>
+				</form>
+			{{else if .IsDiffCompare}}
+				<a href="{{$.CommitRepoLink}}/commit/{{.BeforeCommitID}}" class="ui green sha label">{{ShortSha .BeforeCommitID}}</a> ... <a href="{{$.CommitRepoLink}}/commit/{{.AfterCommitID}}" class="ui green sha label">{{ShortSha .AfterCommitID}}</a>
+			{{end}}
+		</div>
+	</div>
 </h4>
 
 {{if .Commits}}
diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl
index 5de4f67091..84f25f0839 100644
--- a/templates/repo/diff/box.tmpl
+++ b/templates/repo/diff/box.tmpl
@@ -82,7 +82,7 @@
 						{{end}}
 					{{end}}
 				</h4>
-				<div class="ui attached table segment">
+				<div class="ui attached unstackable table segment">
 					{{if ne $file.Type 4}}
 						{{$isImage := (call $.IsImageFile $file.Name)}}
 						{{if and $isImage}}
diff --git a/templates/repo/diff/page.tmpl b/templates/repo/diff/page.tmpl
index 7600848118..ba0cf348d4 100644
--- a/templates/repo/diff/page.tmpl
+++ b/templates/repo/diff/page.tmpl
@@ -15,34 +15,39 @@
 				{{end}}
 			</div>
 			<div class="ui attached info segment {{if .Commit.Signature}} isSigned {{if .Verification.Verified }} isVerified {{end}}{{end}}">
-				{{if .Author}}
-					<img class="ui avatar image" src="{{.Author.RelAvatarLink}}" />
-				  {{if .Author.FullName}}
-			  	  <a href="{{.Author.HomeLink}}"><strong>{{.Author.FullName}}</strong></a> {{if .IsSigned}}<{{.Commit.Author.Email}}>{{end}}
-				  {{else}}
-  				  <a href="{{.Author.HomeLink}}"><strong>{{.Commit.Author.Name}}</strong></a> {{if .IsSigned}}<{{.Commit.Author.Email}}>{{end}}
-				  {{end}}
-				{{else}}
-					<img class="ui avatar image" src="{{AvatarLink .Commit.Author.Email}}" />
-					<strong>{{.Commit.Author.Name}}</strong>
-				{{end}}
-				<span class="text grey" id="authored-time">{{TimeSince .Commit.Author.When $.Lang}}</span>
-				<div class="ui right">
-					<div class="ui horizontal list">
-						{{if .Parents}}
-							<div class="item">
-								{{.i18n.Tr "repo.diff.parent"}}
-							</div>
-							<div class="item">
-								{{range .Parents}}
-									<a class="ui blue sha label" href="{{$.RepoLink}}/commit/{{.}}">{{ShortSha .}}</a>
-								{{end}}
-							</div>
+				<div class="ui stackable grid">
+					<div class="nine wide column">
+						{{if .Author}}
+							<img class="ui avatar image" src="{{.Author.RelAvatarLink}}" />
+						{{if .Author.FullName}}
+						<a href="{{.Author.HomeLink}}"><strong>{{.Author.FullName}}</strong></a> {{if .IsSigned}}<{{.Commit.Author.Email}}>{{end}}
+						{{else}}
+						<a href="{{.Author.HomeLink}}"><strong>{{.Commit.Author.Name}}</strong></a> {{if .IsSigned}}<{{.Commit.Author.Email}}>{{end}}
+						{{end}}
+						{{else}}
+							<img class="ui avatar image" src="{{AvatarLink .Commit.Author.Email}}" />
+							<strong>{{.Commit.Author.Name}}</strong>
 						{{end}}
-						<div class="item">{{.i18n.Tr "repo.diff.commit"}}</div>
-						<div class="item"><span class="ui blue sha label">{{ShortSha .CommitID}}</span></div>
+						<span class="text grey" id="authored-time">{{TimeSince .Commit.Author.When $.Lang}}</span>
 					</div>
-				</div>
+					<div class="seven wide right aligned column">
+						<div class="ui horizontal list">
+							{{if .Parents}}
+								<div class="item">
+									{{.i18n.Tr "repo.diff.parent"}}
+								</div>
+								<div class="item">
+									{{range .Parents}}
+										<a class="ui blue sha label" href="{{$.RepoLink}}/commit/{{.}}">{{ShortSha .}}</a>
+									{{end}}
+								</div>
+							{{end}}
+							<div class="mobile-only"></div>
+							<div class="item">{{.i18n.Tr "repo.diff.commit"}}</div>
+							<div class="item"><span class="ui blue sha label">{{ShortSha .CommitID}}</span></div>
+						</div>
+					</div><!-- end column -->
+				</div><!-- end grid -->
 			</div>
 			{{if .Commit.Signature}}
 				{{if .Verification.Verified }}
diff --git a/templates/repo/header.tmpl b/templates/repo/header.tmpl
index d4d43c5b42..0c187dcbd3 100644
--- a/templates/repo/header.tmpl
+++ b/templates/repo/header.tmpl
@@ -1,48 +1,46 @@
 <div class="header-wrapper">
 {{with .Repository}}
-	<div class="ui container"><!-- start container -->
-		<div class="ui vertically padded grid head"><!-- start grid -->
-			<div class="column"><!-- start column -->
-				<div class="ui header">
-					<div class="ui huge breadcrumb">
-						<i class="mega-octicon octicon-{{if .IsPrivate}}lock{{else if .IsMirror}}repo-clone{{else if .IsFork}}repo-forked{{else}}repo{{end}}"></i>
-						<a href="{{AppSubUrl}}/{{.Owner.Name}}">{{.Owner.Name}}</a>
-						<div class="divider"> / </div>
-						<a href="{{$.RepoLink}}">{{.Name}}</a>
-						{{if .IsMirror}}<div class="fork-flag">{{$.i18n.Tr "repo.mirror_from"}} <a target="_blank" rel="noopener" href="{{$.Mirror.Address}}">{{$.Mirror.Address}}</a></div>{{end}}
-						{{if .IsFork}}<div class="fork-flag">{{$.i18n.Tr "repo.forked_from"}} <a href="{{.BaseRepo.Link}}">{{SubStr .BaseRepo.RelLink 1 -1}}</a></div>{{end}}
-					</div>
+	<div class="ui container">
+		<div class="ui stackable grid header-grid">
+			<div class="ten wide column">
+				<div class="ui huge breadcrumb">
+					<i class="mega-octicon octicon-{{if .IsPrivate}}lock{{else if .IsMirror}}repo-clone{{else if .IsFork}}repo-forked{{else}}repo{{end}}"></i>
+					<a href="{{AppSubUrl}}/{{.Owner.Name}}">{{.Owner.Name}}</a>
+					<div class="divider"> / </div>
+					<a href="{{$.RepoLink}}">{{.Name}}</a>
+					{{if .IsMirror}}<div class="fork-flag">{{$.i18n.Tr "repo.mirror_from"}} <a target="_blank" rel="noopener" href="{{$.Mirror.Address}}">{{$.Mirror.Address}}</a></div>{{end}}
+					{{if .IsFork}}<div class="fork-flag">{{$.i18n.Tr "repo.forked_from"}} <a href="{{.BaseRepo.Link}}">{{SubStr .BaseRepo.RelLink 1 -1}}</a></div>{{end}}
+				</div>
+			</div>
 
-					<div class="ui right">
-						<div class="ui compact labeled button" tabindex="0">
-							<a class="ui compact button" href="{{$.RepoLink}}/action/{{if $.IsWatchingRepo}}un{{end}}watch?redirect_to={{$.Link}}">
-								<i class="icon fa-eye{{if not $.IsWatchingRepo}}-slash{{end}}"></i>{{if $.IsWatchingRepo}}{{$.i18n.Tr "repo.unwatch"}}{{else}}{{$.i18n.Tr "repo.watch"}}{{end}}
-							</a>
-							<a class="ui basic label" href="{{.Link}}/watchers">
-								{{.NumWatches}}
-							</a>
-						</div>
-						<div class="ui compact labeled button" tabindex="0">
-							<a class="ui compact button" href="{{$.RepoLink}}/action/{{if $.IsStaringRepo}}un{{end}}star?redirect_to={{$.Link}}">
-								<i class="icon fa-star{{if not $.IsStaringRepo}}-o{{end}}"></i>{{if $.IsStaringRepo}}{{$.i18n.Tr "repo.unstar"}}{{else}}{{$.i18n.Tr "repo.star"}}{{end}}
-							</a>
-							<a class="ui basic label" href="{{.Link}}/stars">
-								{{.NumStars}}
-							</a>
-						</div>
-						{{if .CanBeForked}}
-							<div class="ui compact labeled button" tabindex="0">
-								<a class="ui compact button {{if not $.CanSignedUserFork}}poping up{{end}}" {{if $.CanSignedUserFork}}href="{{AppSubUrl}}/repo/fork/{{.ID}}"{{else}} data-content="{{$.i18n.Tr "repo.fork_from_self"}}" data-position="top center" data-variation="tiny"{{end}}>
-									<i class="octicon octicon-repo-forked"></i>{{$.i18n.Tr "repo.fork"}}
-								</a>
-								<a class="ui basic label" href="{{.Link}}/forks">
-									{{.NumForks}}
-								</a>
-							</div>
-						{{end}}
-					</div>
+			<div class="ui six wide right aligned column">
+				<div class="ui compact labeled button" tabindex="0">
+					<a class="ui compact button" href="{{$.RepoLink}}/action/{{if $.IsWatchingRepo}}un{{end}}watch?redirect_to={{$.Link}}">
+						<i class="icon fa-eye{{if not $.IsWatchingRepo}}-slash{{end}}"></i>{{if $.IsWatchingRepo}}{{$.i18n.Tr "repo.unwatch"}}{{else}}{{$.i18n.Tr "repo.watch"}}{{end}}
+					</a>
+					<a class="ui basic label" href="{{.Link}}/watchers">
+						{{.NumWatches}}
+					</a>
 				</div>
-			</div><!-- end column -->
+				<div class="ui compact labeled button" tabindex="0">
+					<a class="ui compact button" href="{{$.RepoLink}}/action/{{if $.IsStaringRepo}}un{{end}}star?redirect_to={{$.Link}}">
+						<i class="icon fa-star{{if not $.IsStaringRepo}}-o{{end}}"></i>{{if $.IsStaringRepo}}{{$.i18n.Tr "repo.unstar"}}{{else}}{{$.i18n.Tr "repo.star"}}{{end}}
+					</a>
+					<a class="ui basic label" href="{{.Link}}/stars">
+						{{.NumStars}}
+					</a>
+				</div>
+				{{if .CanBeForked}}
+					<div class="ui compact labeled button" tabindex="0">
+						<a class="ui compact button {{if not $.CanSignedUserFork}}poping up{{end}}" {{if $.CanSignedUserFork}}href="{{AppSubUrl}}/repo/fork/{{.ID}}"{{else}} data-content="{{$.i18n.Tr "repo.fork_from_self"}}" data-position="top center" data-variation="tiny"{{end}}>
+							<i class="octicon octicon-repo-forked"></i>{{$.i18n.Tr "repo.fork"}}
+						</a>
+						<a class="ui basic label" href="{{.Link}}/forks">
+							{{.NumForks}}
+						</a>
+					</div>
+				{{end}}
+			</div>
 		</div><!-- end grid -->
 	</div><!-- end container -->
 {{end}}
diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl
index 4799e84a21..91db56c98f 100644
--- a/templates/repo/home.tmpl
+++ b/templates/repo/home.tmpl
@@ -24,7 +24,7 @@
 			{{end}}
 		</div>
 		{{template "repo/sub_menu" .}}
-		<div class="ui secondary menu">
+		<div class="ui stackable secondary menu mobile--margin-between-items mobile--no-negative-margins">
 			{{if and .PullRequestCtx.Allowed .IsViewBranch}}
 				<div class="fitted item">
 					<a href="{{.BaseRepo.Link}}/compare/{{.BaseRepo.DefaultBranch}}...{{.Repository.Owner.Name}}:{{.BranchName}}">
@@ -36,9 +36,9 @@
 			{{ $n := len .TreeNames}}
 			{{ $l := Subtract $n 1}}
 			<div class="fitted item"><span class="ui breadcrumb repo-path"><a class="section" href="{{.RepoLink}}/src/{{EscapePound .BranchNameSubURL}}">{{EllipsisString .Repository.Name 30}}</a>{{range $i, $v := .TreeNames}}<span class="divider">/</span>{{if eq $i $l}}<span class="active section">{{EllipsisString $v 30}}</span>{{else}}{{ $p := index $.Paths $i}}<span class="section"><a href="{{EscapePound $.BranchLink}}/{{EscapePound $p}}">{{EllipsisString $v 30}}</a></span>{{end}}{{end}}</span></div>
-			<div class="right fitted item">
+			<div class="right fitted item" id="file-buttons">
 				{{if .Repository.CanEnableEditor}}
-					<div id="file-buttons" class="ui tiny blue buttons">
+					<div class="ui tiny blue buttons">
 						{{if .CanAddFile}}
 							<a href="{{.RepoLink}}/_new/{{EscapePound .BranchName}}/{{EscapePound .TreePath}}" class="ui button">
 								{{.i18n.Tr "repo.editor.new_file"}}
@@ -52,6 +52,9 @@
 					</div>
 				{{end}}
 
+			</div>
+			<div class="fitted item">
+
 				<!-- Only show clone panel in repository home page -->
 				{{if eq $n 0}}
 					<div class="ui action tiny input" id="clone-panel">
diff --git a/templates/repo/issue/list.tmpl b/templates/repo/issue/list.tmpl
index dec2881be8..c6c63aa493 100644
--- a/templates/repo/issue/list.tmpl
+++ b/templates/repo/issue/list.tmpl
@@ -2,10 +2,14 @@
 <div class="repository">
 	{{template "repo/header" .}}
 	<div class="ui container">
-		<div class="navbar">
-			{{template "repo/issue/navbar" .}}
-			{{template "repo/issue/search" .}}
-			<div class="ui right">
+		<div class="ui three column stackable grid">
+			<div class="column">
+				{{template "repo/issue/navbar" .}}
+			</div>
+			<div class="column center aligned">
+				{{template "repo/issue/search" .}}
+			</div>
+			<div class="column right aligned">
 				{{if .PageIsIssueList}}
 					<a class="ui green button" href="{{.RepoLink}}/issues/new">{{.i18n.Tr "repo.issues.new"}}</a>
 				{{else}}
@@ -14,148 +18,160 @@
 			</div>
 		</div>
 		<div class="ui divider"></div>
-		<div class="issue-filters">
-			<div class="ui tiny basic status buttons">
-				<a class="ui {{if not .IsShowClosed}}green active{{end}} basic button" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state=open&labels={{.SelectLabels}}&milestone={{.MilestoneID}}&assignee={{.AssigneeID}}">
-					<i class="octicon octicon-issue-opened"></i>
-					{{.i18n.Tr "repo.issues.open_tab" .IssueStats.OpenCount}}
-				</a>
-				<a class="ui {{if .IsShowClosed}}red active{{end}} basic button" href="{{$.Link}}?q={{$.Keyword}}&type={{.ViewType}}&sort={{$.SortType}}&state=closed&labels={{.SelectLabels}}&milestone={{.MilestoneID}}&assignee={{.AssigneeID}}">
-					<i class="octicon octicon-issue-closed"></i>
-					{{.i18n.Tr "repo.issues.close_tab" .IssueStats.ClosedCount}}
-				</a>
+		<div id="issue-filters" class="ui stackable grid">
+			<div class="six wide column">
+				<div class="ui tiny basic status buttons">
+					<a class="ui {{if not .IsShowClosed}}green active{{end}} basic button" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state=open&labels={{.SelectLabels}}&milestone={{.MilestoneID}}&assignee={{.AssigneeID}}">
+						<i class="octicon octicon-issue-opened"></i>
+						{{.i18n.Tr "repo.issues.open_tab" .IssueStats.OpenCount}}
+					</a>
+					<a class="ui {{if .IsShowClosed}}red active{{end}} basic button" href="{{$.Link}}?q={{$.Keyword}}&type={{.ViewType}}&sort={{$.SortType}}&state=closed&labels={{.SelectLabels}}&milestone={{.MilestoneID}}&assignee={{.AssigneeID}}">
+						<i class="octicon octicon-issue-closed"></i>
+						{{.i18n.Tr "repo.issues.close_tab" .IssueStats.ClosedCount}}
+					</a>
+				</div>
 			</div>
-			<div class="ui right floated secondary filter menu">
-				<!-- Label -->
-				<div class="ui {{if not .Labels}}disabled{{end}} dropdown jump item">
-					<span class="text">
-						{{.i18n.Tr "repo.issues.filter_label"}}
-						<i class="dropdown icon"></i>
-					</span>
-					<div class="menu">
-						<a class="item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&milestone={{$.MilestoneID}}&assignee={{$.AssigneeID}}">{{.i18n.Tr "repo.issues.filter_label_no_select"}}</a>
-						{{range .Labels}}
-							<a class="item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{.ID}}&milestone={{$.MilestoneID}}&assignee={{$.AssigneeID}}"><span class="octicon {{if eq $.SelectLabels .ID}}octicon-check{{end}}"></span><span class="label color" style="background-color: {{.Color}}"></span> {{.Name}}</a>
-						{{end}}
+			<div class="ten wide right aligned column">
+				<div class="ui secondary filter stackable menu">
+					<!-- Label -->
+					<div class="ui {{if not .Labels}}disabled{{end}} dropdown jump item" style="margin-left: auto">
+						<span class="text">
+							{{.i18n.Tr "repo.issues.filter_label"}}
+							<i class="dropdown icon"></i>
+						</span>
+						<div class="menu">
+							<a class="item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&milestone={{$.MilestoneID}}&assignee={{$.AssigneeID}}">{{.i18n.Tr "repo.issues.filter_label_no_select"}}</a>
+							{{range .Labels}}
+								<a class="item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{.ID}}&milestone={{$.MilestoneID}}&assignee={{$.AssigneeID}}"><span class="octicon {{if eq $.SelectLabels .ID}}octicon-check{{end}}"></span><span class="label color" style="background-color: {{.Color}}"></span> {{.Name}}</a>
+							{{end}}
+						</div>
 					</div>
-				</div>
 
-				<!-- Milestone -->
-				<div class="ui {{if not .Milestones}}disabled{{end}} dropdown jump item">
-					<span class="text">
-						{{.i18n.Tr "repo.issues.filter_milestone"}}
-						<i class="dropdown icon"></i>
-					</span>
-					<div class="menu">
-						<a class="item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{.SelectLabels}}&assignee={{$.AssigneeID}}">{{.i18n.Tr "repo.issues.filter_milestone_no_select"}}</a>
-						{{range .Milestones}}
-							<a class="{{if eq $.MilestoneID .ID}}active selected{{end}} item" href="{{$.Link}}?type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{$.SelectLabels}}&milestone={{.ID}}&assignee={{$.AssigneeID}}">{{.Name}}</a>
-						{{end}}
+					<!-- Milestone -->
+					<div class="ui {{if not .Milestones}}disabled{{end}} dropdown jump item">
+						<span class="text">
+							{{.i18n.Tr "repo.issues.filter_milestone"}}
+							<i class="dropdown icon"></i>
+						</span>
+						<div class="menu">
+							<a class="item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{.SelectLabels}}&assignee={{$.AssigneeID}}">{{.i18n.Tr "repo.issues.filter_milestone_no_select"}}</a>
+							{{range .Milestones}}
+								<a class="{{if eq $.MilestoneID .ID}}active selected{{end}} item" href="{{$.Link}}?type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{$.SelectLabels}}&milestone={{.ID}}&assignee={{$.AssigneeID}}">{{.Name}}</a>
+							{{end}}
+						</div>
 					</div>
-				</div>
 
-				<!-- Assignee -->
-				<div class="ui {{if not .Assignees}}disabled{{end}} dropdown jump item">
-					<span class="text">
-						{{.i18n.Tr "repo.issues.filter_assignee"}}
-						<i class="dropdown icon"></i>
-					</span>
-					<div class="menu">
-						<a class="item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{.SelectLabels}}&milestone={{$.MilestoneID}}">{{.i18n.Tr "repo.issues.filter_assginee_no_select"}}</a>
-						{{range .Assignees}}
-							<a class="{{if eq $.AssigneeID .ID}}active selected{{end}} item" href="{{$.Link}}?type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{$.SelectLabels}}&milestone={{$.MilestoneID}}&assignee={{.ID}}"><img src="{{.RelAvatarLink}}"> {{.Name}}</a>
-						{{end}}
+					<!-- Assignee -->
+					<div class="ui {{if not .Assignees}}disabled{{end}} dropdown jump item">
+						<span class="text">
+							{{.i18n.Tr "repo.issues.filter_assignee"}}
+							<i class="dropdown icon"></i>
+						</span>
+						<div class="menu">
+							<a class="item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{.SelectLabels}}&milestone={{$.MilestoneID}}">{{.i18n.Tr "repo.issues.filter_assginee_no_select"}}</a>
+							{{range .Assignees}}
+								<a class="{{if eq $.AssigneeID .ID}}active selected{{end}} item" href="{{$.Link}}?type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{$.SelectLabels}}&milestone={{$.MilestoneID}}&assignee={{.ID}}"><img src="{{.RelAvatarLink}}"> {{.Name}}</a>
+							{{end}}
+						</div>
 					</div>
-				</div>
 
-				{{if .IsSigned}}
-					<!-- Type -->
+					{{if .IsSigned}}
+						<!-- Type -->
+						<div class="ui dropdown type jump item">
+							<span class="text">
+								{{.i18n.Tr "repo.issues.filter_type"}}
+								<i class="dropdown icon"></i>
+							</span>
+							<div class="menu">
+								<a class="{{if eq .ViewType "all"}}active{{end}} item" href="{{$.Link}}?q={{$.Keyword}}&type=all&sort={{$.SortType}}&state={{$.State}}&labels={{.SelectLabels}}&milestone={{$.MilestoneID}}&assignee={{$.AssigneeID}}">{{.i18n.Tr "repo.issues.filter_type.all_issues"}}</a>
+								<a class="{{if eq .ViewType "assigned"}}active{{end}} item" href="{{$.Link}}?q={{$.Keyword}}&type=assigned&sort={{$.SortType}}&state={{$.State}}&labels={{.SelectLabels}}&milestone={{$.MilestoneID}}&assignee={{.SignedUser.ID}}">{{.i18n.Tr "repo.issues.filter_type.assigned_to_you"}}</a>
+								<a class="{{if eq .ViewType "created_by"}}active{{end}} item" href="{{$.Link}}?q={{$.Keyword}}&type=created_by&sort={{$.SortType}}&state={{$.State}}&labels={{.SelectLabels}}&milestone={{$.MilestoneID}}&assignee={{$.AssigneeID}}">{{.i18n.Tr "repo.issues.filter_type.created_by_you"}}</a>
+								<a class="{{if eq .ViewType "mentioned"}}active{{end}} item" href="{{$.Link}}?q={{$.Keyword}}&type=mentioned&sort={{$.SortType}}&state={{$.State}}&labels={{.SelectLabels}}&milestone={{$.MilestoneID}}&assignee={{$.AssigneeID}}">{{.i18n.Tr "repo.issues.filter_type.mentioning_you"}}</a>
+							</div>
+						</div>
+					{{end}}
+
+					<!-- Sort -->
 					<div class="ui dropdown type jump item">
 						<span class="text">
-							{{.i18n.Tr "repo.issues.filter_type"}}
+							{{.i18n.Tr "repo.issues.filter_sort"}}
 							<i class="dropdown icon"></i>
 						</span>
 						<div class="menu">
-							<a class="{{if eq .ViewType "all"}}active{{end}} item" href="{{$.Link}}?q={{$.Keyword}}&type=all&sort={{$.SortType}}&state={{$.State}}&labels={{.SelectLabels}}&milestone={{$.MilestoneID}}&assignee={{$.AssigneeID}}">{{.i18n.Tr "repo.issues.filter_type.all_issues"}}</a>
-							<a class="{{if eq .ViewType "assigned"}}active{{end}} item" href="{{$.Link}}?q={{$.Keyword}}&type=assigned&sort={{$.SortType}}&state={{$.State}}&labels={{.SelectLabels}}&milestone={{$.MilestoneID}}&assignee={{.SignedUser.ID}}">{{.i18n.Tr "repo.issues.filter_type.assigned_to_you"}}</a>
-							<a class="{{if eq .ViewType "created_by"}}active{{end}} item" href="{{$.Link}}?q={{$.Keyword}}&type=created_by&sort={{$.SortType}}&state={{$.State}}&labels={{.SelectLabels}}&milestone={{$.MilestoneID}}&assignee={{$.AssigneeID}}">{{.i18n.Tr "repo.issues.filter_type.created_by_you"}}</a>
-							<a class="{{if eq .ViewType "mentioned"}}active{{end}} item" href="{{$.Link}}?q={{$.Keyword}}&type=mentioned&sort={{$.SortType}}&state={{$.State}}&labels={{.SelectLabels}}&milestone={{$.MilestoneID}}&assignee={{$.AssigneeID}}">{{.i18n.Tr "repo.issues.filter_type.mentioning_you"}}</a>
+							<a class="{{if or (eq .SortType "latest") (not .SortType)}}active{{end}} item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort=latest&state={{$.State}}&labels={{.SelectLabels}}&milestone={{$.MilestoneID}}&assignee={{$.AssigneeID}}">{{.i18n.Tr "repo.issues.filter_sort.latest"}}</a>
+							<a class="{{if eq .SortType "oldest"}}active{{end}} item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort=oldest&state={{$.State}}&labels={{.SelectLabels}}&milestone={{$.MilestoneID}}&assignee={{$.AssigneeID}}">{{.i18n.Tr "repo.issues.filter_sort.oldest"}}</a>
+							<a class="{{if eq .SortType "recentupdate"}}active{{end}} item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort=recentupdate&state={{$.State}}&labels={{.SelectLabels}}&milestone={{$.MilestoneID}}&assignee={{$.AssigneeID}}">{{.i18n.Tr "repo.issues.filter_sort.recentupdate"}}</a>
+							<a class="{{if eq .SortType "leastupdate"}}active{{end}} item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort=leastupdate&state={{$.State}}&labels={{.SelectLabels}}&milestone={{$.MilestoneID}}&assignee={{$.AssigneeID}}">{{.i18n.Tr "repo.issues.filter_sort.leastupdate"}}</a>
+							<a class="{{if eq .SortType "mostcomment"}}active{{end}} item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort=mostcomment&state={{$.State}}&labels={{.SelectLabels}}&milestone={{$.MilestoneID}}&assignee={{$.AssigneeID}}">{{.i18n.Tr "repo.issues.filter_sort.mostcomment"}}</a>
+							<a class="{{if eq .SortType "leastcomment"}}active{{end}} item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort=leastcomment&state={{$.State}}&labels={{.SelectLabels}}&milestone={{$.MilestoneID}}&assignee={{$.AssigneeID}}">{{.i18n.Tr "repo.issues.filter_sort.leastcomment"}}</a>
 						</div>
 					</div>
-				{{end}}
-
-				<!-- Sort -->
-				<div class="ui dropdown type jump item">
-					<span class="text">
-						{{.i18n.Tr "repo.issues.filter_sort"}}
-						<i class="dropdown icon"></i>
-					</span>
-					<div class="menu">
-						<a class="{{if or (eq .SortType "latest") (not .SortType)}}active{{end}} item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort=latest&state={{$.State}}&labels={{.SelectLabels}}&milestone={{$.MilestoneID}}&assignee={{$.AssigneeID}}">{{.i18n.Tr "repo.issues.filter_sort.latest"}}</a>
-						<a class="{{if eq .SortType "oldest"}}active{{end}} item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort=oldest&state={{$.State}}&labels={{.SelectLabels}}&milestone={{$.MilestoneID}}&assignee={{$.AssigneeID}}">{{.i18n.Tr "repo.issues.filter_sort.oldest"}}</a>
-						<a class="{{if eq .SortType "recentupdate"}}active{{end}} item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort=recentupdate&state={{$.State}}&labels={{.SelectLabels}}&milestone={{$.MilestoneID}}&assignee={{$.AssigneeID}}">{{.i18n.Tr "repo.issues.filter_sort.recentupdate"}}</a>
-						<a class="{{if eq .SortType "leastupdate"}}active{{end}} item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort=leastupdate&state={{$.State}}&labels={{.SelectLabels}}&milestone={{$.MilestoneID}}&assignee={{$.AssigneeID}}">{{.i18n.Tr "repo.issues.filter_sort.leastupdate"}}</a>
-						<a class="{{if eq .SortType "mostcomment"}}active{{end}} item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort=mostcomment&state={{$.State}}&labels={{.SelectLabels}}&milestone={{$.MilestoneID}}&assignee={{$.AssigneeID}}">{{.i18n.Tr "repo.issues.filter_sort.mostcomment"}}</a>
-						<a class="{{if eq .SortType "leastcomment"}}active{{end}} item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort=leastcomment&state={{$.State}}&labels={{.SelectLabels}}&milestone={{$.MilestoneID}}&assignee={{$.AssigneeID}}">{{.i18n.Tr "repo.issues.filter_sort.leastcomment"}}</a>
-					</div>
 				</div>
 			</div>
 		</div>
-		<div class="issue-actions">
-			<div class="ui basic status buttons">
-				<div class="ui green active basic button issue-action" data-action="open" data-url="{{$.RepoLink}}/issues/status">{{.i18n.Tr "repo.issues.action_open"}}</div>
-				<div class="ui red active basic button issue-action" data-action="close" data-url="{{$.RepoLink}}/issues/status">{{.i18n.Tr "repo.issues.action_close"}}</div>
+		<div id="issue-actions" class="ui stackable grid">
+			<div class="six wide column">
+				<div class="ui basic status buttons">
+					<div class="ui green active basic button issue-action" data-action="open" data-url="{{$.RepoLink}}/issues/status">{{.i18n.Tr "repo.issues.action_open"}}</div>
+					<div class="ui red active basic button issue-action" data-action="close" data-url="{{$.RepoLink}}/issues/status">{{.i18n.Tr "repo.issues.action_close"}}</div>
+				</div>
 			</div>
 
-			<div class="ui secondary filter menu floated right">
-				<!-- Labels -->
-				<div class="ui {{if not .Labels}}disabled{{end}} dropdown jump item">
-					<span class="text">
-						{{.i18n.Tr "repo.issues.action_label"}}
-						<i class="dropdown icon"></i>
-					</span>
-					<div class="menu">
-						{{range .Labels}}
-							<div class="item issue-action" data-action="toggle" data-element-id="{{.ID}}" data-url="{{$.RepoLink}}/issues/labels">
-								<span class="octicon {{if eq $.SelectLabels .ID}}octicon-check{{end}}"></span><span class="label color" style="background-color: {{.Color}}"></span> {{.Name}}
-							</div>
-						{{end}}
+			{{/* Ten wide does not cope well and makes the columns stack.
+			This seems to be related to jQuery's hide/show: in fact, switching
+			issue-actions and issue-filters and having this ten wide will show
+			this one correctly, but not the other one. */}}
+			<div class="nine wide right aligned right floated column">
+				<div class="ui secondary filter stackable menu">
+					<!-- Labels -->
+					<div class="ui {{if not .Labels}}disabled{{end}} dropdown jump item" style="margin-left: auto">
+						<span class="text">
+							{{.i18n.Tr "repo.issues.action_label"}}
+							<i class="dropdown icon"></i>
+						</span>
+						<div class="menu">
+							{{range .Labels}}
+								<div class="item issue-action" data-action="toggle" data-element-id="{{.ID}}" data-url="{{$.RepoLink}}/issues/labels">
+									<span class="octicon {{if eq $.SelectLabels .ID}}octicon-check{{end}}"></span><span class="label color" style="background-color: {{.Color}}"></span> {{.Name}}
+								</div>
+							{{end}}
+						</div>
 					</div>
-				</div>
 
-				<!-- Milestone -->
-				<div class="ui {{if not .Milestones}}disabled{{end}} dropdown jump item">
-					<span class="text">
-						{{.i18n.Tr "repo.issues.action_milestone"}}
-						<i class="dropdown icon"></i>
-					</span>
-					<div class="menu">
-						<div class="item issue-action" data-element-id="0" data-url="{{$.Link}}/milestone">
-						  {{.i18n.Tr "repo.issues.action_milestone_no_select"}}
-						</div>
-						{{range .Milestones}}
-							<div class="item issue-action" data-element-id="{{.ID}}" data-url="{{$.RepoLink}}/issues/milestone">
-								{{.Name}}
+					<!-- Milestone -->
+					<div class="ui {{if not .Milestones}}disabled{{end}} dropdown jump item">
+						<span class="text">
+							{{.i18n.Tr "repo.issues.action_milestone"}}
+							<i class="dropdown icon"></i>
+						</span>
+						<div class="menu">
+							<div class="item issue-action" data-element-id="0" data-url="{{$.Link}}/milestone">
+							{{.i18n.Tr "repo.issues.action_milestone_no_select"}}
 							</div>
-						{{end}}
+							{{range .Milestones}}
+								<div class="item issue-action" data-element-id="{{.ID}}" data-url="{{$.RepoLink}}/issues/milestone">
+									{{.Name}}
+								</div>
+							{{end}}
+						</div>
 					</div>
-				</div>
 
-				<!-- Assignee -->
-				<div class="ui {{if not .Assignees}}disabled{{end}} dropdown jump item">
-					<span class="text">
-						{{.i18n.Tr "repo.issues.action_assignee"}}
-						<i class="dropdown icon"></i>
-					</span>
-					<div class="menu">
-						<div class="item issue-action" data-element-id="0" data-url="{{$.Link}}/assignee">
-							{{.i18n.Tr "repo.issues.action_assignee_no_select"}}
-						</div>
-						{{range .Assignees}}
-							<div class="item issue-action" data-element-id="{{.ID}}" data-url="{{$.RepoLink}}/issues/assignee">
-								<img src="{{.RelAvatarLink}}"> {{.Name}}
+					<!-- Assignee -->
+					<div class="ui {{if not .Assignees}}disabled{{end}} dropdown jump item">
+						<span class="text">
+							{{.i18n.Tr "repo.issues.action_assignee"}}
+							<i class="dropdown icon"></i>
+						</span>
+						<div class="menu">
+							<div class="item issue-action" data-element-id="0" data-url="{{$.Link}}/assignee">
+								{{.i18n.Tr "repo.issues.action_assignee_no_select"}}
 							</div>
-						{{end}}
+							{{range .Assignees}}
+								<div class="item issue-action" data-element-id="{{.ID}}" data-url="{{$.RepoLink}}/issues/assignee">
+									<img src="{{.RelAvatarLink}}"> {{.Name}}
+								</div>
+							{{end}}
+						</div>
 					</div>
 				</div>
 			</div>
diff --git a/templates/repo/issue/new_form.tmpl b/templates/repo/issue/new_form.tmpl
index 829f66943b..2e3c777d53 100644
--- a/templates/repo/issue/new_form.tmpl
+++ b/templates/repo/issue/new_form.tmpl
@@ -1,4 +1,4 @@
-<form class="ui comment form grid" action="{{EscapePound .Link}}" method="post">
+<form class="ui comment form stackable grid" action="{{EscapePound .Link}}" method="post">
 	{{.CsrfTokenHtml}}
 	{{if .Flash}}
 		<div class="sixteen wide column">
diff --git a/templates/repo/issue/view.tmpl b/templates/repo/issue/view.tmpl
index 2260f17399..007c044355 100644
--- a/templates/repo/issue/view.tmpl
+++ b/templates/repo/issue/view.tmpl
@@ -2,9 +2,11 @@
 <div class="repository view issue pull">
 	{{template "repo/header" .}}
 	<div class="ui container">
-		<div class="navbar">
-			{{template "repo/issue/navbar" .}}
-			<div class="ui right">
+		<div class="ui two column stackable grid">
+			<div class="column">
+				{{template "repo/issue/navbar" .}}
+			</div>
+			<div class="column right aligned">
 				{{if .PageIsIssueList}}
 					<a class="ui green button" href="{{.RepoLink}}/issues/new">{{.i18n.Tr "repo.issues.new"}}</a>
 				{{else}}
diff --git a/templates/repo/issue/view_content.tmpl b/templates/repo/issue/view_content.tmpl
index 4343aec9fc..ea0e32c55e 100644
--- a/templates/repo/issue/view_content.tmpl
+++ b/templates/repo/issue/view_content.tmpl
@@ -1,4 +1,4 @@
-<div class="ui grid">
+<div class="ui stackable grid">
 	{{if .Flash}}
 		<div class="sixteen wide column">
 			{{template "base/alert" .}}
diff --git a/templates/repo/pulls/tab_menu.tmpl b/templates/repo/pulls/tab_menu.tmpl
index c81eab0dfe..e3f39e8ad2 100644
--- a/templates/repo/pulls/tab_menu.tmpl
+++ b/templates/repo/pulls/tab_menu.tmpl
@@ -1,4 +1,4 @@
-<div class="ui top attached pull tabular menu">
+<div class="ui top attached pull tabular stackable menu">
 	<a class="item {{if .PageIsPullConversation}}active{{end}}" href="{{.RepoLink}}/pulls/{{.Issue.Index}}">
 		<span class="octicon octicon-comment-discussion"></span>
 		{{$.i18n.Tr "repo.pulls.tab_conversation"}}
diff --git a/templates/repo/view_file.tmpl b/templates/repo/view_file.tmpl
index 740a789895..6c37aab58a 100644
--- a/templates/repo/view_file.tmpl
+++ b/templates/repo/view_file.tmpl
@@ -1,41 +1,47 @@
 <div class="{{TabSizeClass .Editorconfig .FileName}} non-diff-file-content">
 	<h4 class="ui top attached header" id="{{if .ReadmeExist}}repo-readme{{else}}repo-read-file{{end}}">
-		{{if .ReadmeExist}}
-			<i class="book icon ui left"></i>
-			{{if .ReadmeInList}}
-				<strong>{{.FileName}}</strong>
-			{{else}}
-				<strong>{{.FileName}}</strong> <span class="text grey normal">{{FileSize .FileSize}}{{if .IsLFSFile}} ({{.i18n.Tr "repo.stored_lfs"}}){{end}}</span>
-			{{end}}
-		{{else}}
-			<i class="file text outline icon ui left"></i>
-			<strong>{{.FileName}}</strong> <span class="text grey normal">{{FileSize .FileSize}}{{if .IsLFSFile}} ({{.i18n.Tr "repo.stored_lfs"}}){{end}}</span>
-		{{end}}
-		{{if not .ReadmeInList}}
-			<div class="ui right file-actions">
-				<div class="ui buttons">
-					{{if not .IsViewCommit}}
-						<a class="ui button" href="{{.RepoLink}}/src/commit/{{.CommitID}}/{{EscapePound .TreePath}}">{{.i18n.Tr "repo.file_permalink"}}</a>
-					{{end}}
-					<a class="ui button" href="{{.RepoLink}}/commits/{{EscapePound .BranchNameSubURL}}/{{EscapePound .TreePath}}">{{.i18n.Tr "repo.file_history"}}</a>
-					<a class="ui button" href="{{EscapePound $.RawFileLink}}">{{.i18n.Tr "repo.file_raw"}}</a>
-				</div>
-				{{if .Repository.CanEnableEditor}}
-					{{if .CanEditFile}}
-						<a href="{{.RepoLink}}/_edit/{{EscapePound .BranchName}}/{{EscapePound .TreePath}}"><i class="octicon octicon-pencil btn-octicon poping up"  data-content="{{.EditFileTooltip}}" data-position="bottom center" data-variation="tiny inverted"></i></a>
-					{{else}}
-						<i class="octicon octicon-pencil btn-octicon poping up disabled" data-content="{{.EditFileTooltip}}" data-position="bottom center" data-variation="tiny inverted"></i>
-					{{end}}
-					{{if .CanDeleteFile}}
-						<a href="{{.RepoLink}}/_delete/{{EscapePound .BranchName}}/{{EscapePound .TreePath}}"><i class="octicon octicon-trashcan btn-octicon btn-octicon-danger poping up"  data-content="{{.DeleteFileTooltip}}" data-position="bottom center" data-variation="tiny inverted"></i></a>
+		<div class="ui stackable grid">
+			<div class="ten wide column">
+				{{if .ReadmeExist}}
+					<i class="book icon ui left"></i>
+					{{if .ReadmeInList}}
+						<strong>{{.FileName}}</strong>
 					{{else}}
-						<i class="octicon octicon-trashcan btn-octicon poping up disabled" data-content="{{.DeleteFileTooltip}}" data-position="bottom center" data-variation="tiny inverted"></i>
+						<strong>{{.FileName}}</strong> <span class="text grey normal">{{FileSize .FileSize}}{{if .IsLFSFile}} ({{.i18n.Tr "repo.stored_lfs"}}){{end}}</span>
 					{{end}}
+				{{else}}
+					<i class="file text outline icon ui left"></i>
+					<strong>{{.FileName}}</strong> <span class="text grey normal">{{FileSize .FileSize}}{{if .IsLFSFile}} ({{.i18n.Tr "repo.stored_lfs"}}){{end}}</span>
 				{{end}}
 			</div>
-		{{end}}
+			<div class="six wide right aligned column">
+				{{if not .ReadmeInList}}
+					<div class="ui right file-actions">
+						<div class="ui buttons">
+							{{if not .IsViewCommit}}
+								<a class="ui button" href="{{.RepoLink}}/src/commit/{{.CommitID}}/{{EscapePound .TreePath}}">{{.i18n.Tr "repo.file_permalink"}}</a>
+							{{end}}
+							<a class="ui button" href="{{.RepoLink}}/commits/{{EscapePound .BranchNameSubURL}}/{{EscapePound .TreePath}}">{{.i18n.Tr "repo.file_history"}}</a>
+							<a class="ui button" href="{{EscapePound $.RawFileLink}}">{{.i18n.Tr "repo.file_raw"}}</a>
+						</div>
+						{{if .Repository.CanEnableEditor}}
+							{{if .CanEditFile}}
+								<a href="{{.RepoLink}}/_edit/{{EscapePound .BranchName}}/{{EscapePound .TreePath}}"><i class="octicon octicon-pencil btn-octicon poping up"  data-content="{{.EditFileTooltip}}" data-position="bottom center" data-variation="tiny inverted"></i></a>
+							{{else}}
+								<i class="octicon octicon-pencil btn-octicon poping up disabled" data-content="{{.EditFileTooltip}}" data-position="bottom center" data-variation="tiny inverted"></i>
+							{{end}}
+							{{if .CanDeleteFile}}
+								<a href="{{.RepoLink}}/_delete/{{EscapePound .BranchName}}/{{EscapePound .TreePath}}"><i class="octicon octicon-trashcan btn-octicon btn-octicon-danger poping up"  data-content="{{.DeleteFileTooltip}}" data-position="bottom center" data-variation="tiny inverted"></i></a>
+							{{else}}
+								<i class="octicon octicon-trashcan btn-octicon poping up disabled" data-content="{{.DeleteFileTooltip}}" data-position="bottom center" data-variation="tiny inverted"></i>
+							{{end}}
+						{{end}}
+					</div>
+				{{end}}
+			</div>
+		</div>
 	</h4>
-	<div class="ui attached table segment">
+	<div class="ui attached table unstackable segment">
 		<div class="file-view {{if .IsMarkup}}markdown{{else if .IsRenderedHTML}}plain-text{{else if .IsTextFile}}code-view{{end}} has-emoji">
 			{{if .IsMarkup}}
 				{{if .FileContent}}{{.FileContent | Safe}}{{end}}
diff --git a/templates/repo/wiki/view.tmpl b/templates/repo/wiki/view.tmpl
index 2e604f1b71..dfd368cd3d 100644
--- a/templates/repo/wiki/view.tmpl
+++ b/templates/repo/wiki/view.tmpl
@@ -3,7 +3,7 @@
 	{{template "repo/header" .}}
 	{{ $title := .title}}
 	<div class="ui container">
-		<div class="ui grid">
+		<div class="ui stackable grid">
 			<div class="ui ten wide column">
 				<div class="choose page">
 					<div class="ui floating filter dropdown" data-no-results="{{.i18n.Tr "repo.pulls.no_results"}}">
@@ -54,17 +54,23 @@
 			</div>
 		</div>
 		<div class="ui dividing header">
-			{{$title}}
-			{{if and .IsRepositoryWriter (not .Repository.IsMirror)}}
-				<div class="ui right">
-					<a class="ui small button" href="{{.RepoLink}}/wiki/{{.PageURL}}/_edit">{{.i18n.Tr "repo.wiki.edit_page_button"}}</a>
-					<a class="ui green small button" href="{{.RepoLink}}/wiki/_new">{{.i18n.Tr "repo.wiki.new_page_button"}}</a>
-					<a class="ui red small button delete-button" href="" data-url="{{.RepoLink}}/wiki/{{.PageURL}}/delete" data-id="{{.PageURL}}">{{.i18n.Tr "repo.wiki.delete_page_button"}}</a>
+			<div class="ui stackable grid">
+				<div class="eight wide column">
+					{{$title}}
+					<div class="ui sub header">
+						{{$timeSince := TimeSince .Author.When $.Lang}}
+						{{.i18n.Tr "repo.wiki.last_commit_info" .Author.Name $timeSince | Safe}}
+					</div>
+				</div>
+				<div class="eight wide right aligned column">
+					{{if and .IsRepositoryWriter (not .Repository.IsMirror)}}
+						<div class="ui right">
+							<a class="ui small button" href="{{.RepoLink}}/wiki/{{.PageURL}}/_edit">{{.i18n.Tr "repo.wiki.edit_page_button"}}</a>
+							<a class="ui green small button" href="{{.RepoLink}}/wiki/_new">{{.i18n.Tr "repo.wiki.new_page_button"}}</a>
+							<a class="ui red small button delete-button" href="" data-url="{{.RepoLink}}/wiki/{{.PageURL}}/delete" data-id="{{.PageURL}}">{{.i18n.Tr "repo.wiki.delete_page_button"}}</a>
+						</div>
+					{{end}}
 				</div>
-			{{end}}
-			<div class="ui sub header">
-				{{$timeSince := TimeSince .Author.When $.Lang}}
-				{{.i18n.Tr "repo.wiki.last_commit_info" .Author.Name $timeSince | Safe}}
 			</div>
 		</div>
 		{{if .FormatWarning}}