diff --git a/templates/repo/commit_page.tmpl b/templates/repo/commit_page.tmpl
index 5b19523cf2a..52bedc75b77 100644
--- a/templates/repo/commit_page.tmpl
+++ b/templates/repo/commit_page.tmpl
@@ -6,7 +6,7 @@
 			<a class="ui floated right blue tiny button" href="{{EscapePound .SourcePath}}">
 				{{.i18n.Tr "repo.diff.browse_source"}}
 			</a>
-			<h3 class="has-emoji">{{RenderCommitMessage .Commit.Message $.RepoLink $.Repository.ComposeMetas}}{{template "repo/commit_status" .CommitStatus}}</h3>
+			<h3 class="has-emoji"><span class="message-wrapper"><span class="commit-summary" title="{{.Commit.Summary}}">{{RenderCommitMessage .Commit.Message $.RepoLink $.Repository.ComposeMetas}}</span></span>{{template "repo/commit_status" .CommitStatus}}</h3>
 			{{if IsMultilineCommitMessage .Commit.Message}}
 				<pre class="commit-body">{{RenderCommitBody .Commit.Message $.RepoLink $.Repository.ComposeMetas}}</pre>
 			{{end}}
diff --git a/templates/repo/view_list.tmpl b/templates/repo/view_list.tmpl
index 3ba0eeec8d6..32b1a0078ab 100644
--- a/templates/repo/view_list.tmpl
+++ b/templates/repo/view_list.tmpl
@@ -29,7 +29,7 @@
 				</a>
 				{{template "repo/commit_status" .LatestCommitStatus}}
 				{{ $commitLink:= printf "%s/commit/%s" .RepoLink .LatestCommit.ID }}
-				<span class="grey has-emoji commit-summary" title="{{.LatestCommit.Summary}}">{{RenderCommitMessageLinkSubject .LatestCommit.Message $.RepoLink $commitLink $.Repository.ComposeMetas}}
+				<span class="grey has-emoji commit-summary" title="{{.LatestCommit.Summary}}"><span class="message-wrapper">{{RenderCommitMessageLinkSubject .LatestCommit.Message $.RepoLink $commitLink $.Repository.ComposeMetas}}</span>
 				{{if IsMultilineCommitMessage .LatestCommit.Message}}
 					<button class="basic compact mini ui icon button commit-button"><i class="ellipsis horizontal icon"></i></button>
 					<pre class="commit-body" style="display: none;">{{RenderCommitBody .LatestCommit.Message $.RepoLink $.Repository.ComposeMetas}}</pre>
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index e03e45222d8..e75fb0fae75 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -2351,7 +2351,7 @@ tbody.commit-list {
     vertical-align: baseline;
 }
 
-.commit-list .message-wrapper {
+.message-wrapper {
     overflow: hidden;
     text-overflow: ellipsis;
     max-width: calc(100% - 50px);
@@ -2359,6 +2359,43 @@ tbody.commit-list {
     vertical-align: middle;
 }
 
+@media only screen and (max-width: 767.98px) {
+    tr.commit-list {
+        width: 100%;
+    }
+    th .message-wrapper {
+        display: block;
+        max-width: calc(100vw - 70px);
+    }
+}
+
+@media only screen and (min-width: 768px) and (max-width: 991.98px) {
+    tr.commit-list {
+        width: 723px;
+    }
+    th .message-wrapper {
+        max-width: 280px;
+    }
+}
+
+@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
+    tr.commit-list {
+        width: 933px;
+    }
+    th .message-wrapper {
+        max-width: 490px;
+    }
+}
+
+@media only screen and (min-width: 1200px) {
+    tr.commit-list {
+        width: 1127px;
+    }
+    th .message-wrapper {
+        max-width: 680px;
+    }
+}
+
 .commit-list .commit-summary a {
     text-decoration: underline;
     text-decoration-style: dashed;