Fix overflow in commit graph (#17947) * Fix overflow in commit graph Limit commit message to 50% width. This is rather crude but should work for common use cases with not too-long author names. Fixes: https://github.com/go-gitea/gitea/issues/17944 * Make it work with dynamic width * use span * use explicit none Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>

Changes

3 changed files (+14/-5)

• templates/repo/graph/commits.tmpl
  • @@ -28,27 +28,29 @@
    {{- end -}} </a> </span> - <span class="message df ac mr-2">{{RenderCommitMessage $commit.Subject $.RepoLink $.Repository.ComposeMetas}}</span> + <span class="message dib ellipsis mr-2"> + <span>{{RenderCommitMessage $commit.Subject $.RepoLink $.Repository.ComposeMetas}}</span> + </span> <span class="tags df ac"> {{range $commit.Refs}} {{$refGroup := .RefGroup}} {{if eq $refGroup "pull"}} {{if or (not $.HidePRRefs) (containGeneric $.SelectedBranches .Name)}} <!-- it's intended to use issues not pulls, if it's a pull you will get redirected --> - <a class="ui labelled icon button basic tiny" href="{{$.RepoLink}}/{{if $.Repository.UnitEnabled $.UnitTypePullRequests}}pulls{{else}}issues{{end}}/{{.ShortName|PathEscape}}"> + <a class="ui labelled icon button basic tiny mr-2" href="{{$.RepoLink}}/{{if $.Repository.UnitEnabled $.UnitTypePullRequests}}pulls{{else}}issues{{end}}/{{.ShortName|PathEscape}}"> {{svg "octicon-git-pull-request" 16 "mr-2"}}#{{.ShortName}} </a> {{end}} {{else if eq $refGroup "tags"}} - <a class="ui labelled icon button basic tiny" href="{{$.RepoLink}}/src/tag/{{.ShortName|PathEscape}}"> + <a class="ui labelled icon button basic tiny mr-2" href="{{$.RepoLink}}/src/tag/{{.ShortName|PathEscape}}"> {{svg "octicon-tag" 16 "mr-2"}}{{.ShortName}} </a> {{else if eq $refGroup "remotes"}} - <a class="ui labelled icon button basic tiny" href="{{$.RepoLink}}/src/commit/{{$commit.Rev|PathEscape}}"> + <a class="ui labelled icon button basic tiny mr-2" href="{{$.RepoLink}}/src/commit/{{$commit.Rev|PathEscape}}"> {{svg "octicon-cross-reference" 16 "mr-2"}}{{.ShortName}} </a> {{else if eq $refGroup "heads"}} - <a class="ui labelled icon button basic tiny" href="{{$.RepoLink}}/src/branch/{{.ShortName|PathEscape}}"> + <a class="ui labelled icon button basic tiny mr-2" href="{{$.RepoLink}}/src/branch/{{.ShortName|PathEscape}}"> {{svg "octicon-git-branch" 16 "mr-2"}}{{.ShortName}} </a> {{else}}
• web_src/less/features/gitgraph.less
  • @@ -137,6 +137,7 @@
    .author .ui.avatar.image { width: auto; height: 18px; + max-width: none; } }
• web_src/less/helpers.less
  • @@ -28,6 +28,12 @@
    word-wrap: break-word !important; } + .ellipsis { + overflow: hidden !important; + white-space: nowrap !important; + text-overflow: ellipsis !important; + } + .full-screen-width { width: 100vw !important; } .full-screen-height { height: 100vh !important; }