Merge pull request 'Replace `gt-word-break` with `tw-break-anywhere`' (#4102) from 0ko/forgejo:ui-replace-gt-word-break into forgejo

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/4102
Reviewed-by: Earl Warren <earl-warren@noreply.codeberg.org>

templates/admin/repo/list.tmpl

@@ -47,13 +47,13 @@
 						<tr>
 							<td>{{.ID}}</td>
 							<td>
-								<a class="gt-word-break" href="{{.Owner.HomeLink}}">{{.Owner.Name}}</a>
+								<a class="tw-break-anywhere" href="{{.Owner.HomeLink}}">{{.Owner.Name}}</a>
 								{{if .Owner.Visibility.IsPrivate}}
 									<span class="text gold">{{svg "octicon-lock"}}</span>
 								{{end}}
 							</td>
 							<td>
-								<a class="gt-word-break" href="{{.Link}}">{{.Name}}</a>
+								<a class="tw-break-anywhere" href="{{.Link}}">{{.Name}}</a>
 								{{if .IsArchived}}
 									<span class="ui basic label">{{ctx.Locale.Tr "repo.desc.archived"}}</span>
 								{{end}}

templates/package/content/container.tmpl

@@ -54,7 +54,7 @@
 	{{end}}
 	{{if .PackageDescriptor.Metadata.ImageLayers}}
 		<h4 class="ui top attached header">{{ctx.Locale.Tr "packages.container.layers"}}</h4>
-		<div class="ui attached segment gt-word-break">
+		<div class="ui attached segment tw-break-anywhere">
 			<table class="ui very basic compact table">
 				<tbody>
 					{{range .PackageDescriptor.Metadata.ImageLayers}}
@@ -80,7 +80,7 @@
 					{{range $key, $value := .PackageDescriptor.Metadata.Labels}}
 						<tr>
 							<td class="top aligned">{{$key}}</td>
-							<td class="gt-word-break">{{$value}}</td>
+							<td class="tw-break-anywhere">{{$value}}</td>
 						</tr>
 					{{end}}
 				</tbody>

templates/package/settings.tmpl

@@ -59,7 +59,7 @@
 							{{ctx.Locale.Tr "packages.settings.delete"}}
 						</div>
 						<div class="content">
-							<div class="ui warning message gt-word-break">
+							<div class="ui warning message tw-break-anywhere">
 								{{ctx.Locale.Tr "packages.settings.delete.notice" .PackageDescriptor.Package.Name .PackageDescriptor.Version.Version}}
 							</div>
 							<form class="ui form" action="{{.Link}}" method="post">

templates/projects/view.tmpl

@@ -156,7 +156,7 @@
 				<div class="divider"{{if .Color}} style="color: {{ContrastColor .Color}} !important"{{end}}></div>
 				<div class="ui cards" data-url="{{$.Link}}/{{.ID}}" data-project="{{$.Project.ID}}" data-board="{{.ID}}" id="board_{{.ID}}">
 					{{range (index $.IssuesMap .ID)}}
-						<div class="issue-card gt-word-break {{if $canWriteProject}}tw-cursor-grab{{end}}" data-issue="{{.ID}}">
+						<div class="issue-card tw-break-anywhere {{if $canWriteProject}}tw-cursor-grab{{end}}" data-issue="{{.ID}}">
 							{{template "repo/issue/card" (dict "Issue" . "Page" $)}}
 						</div>
 					{{end}}

templates/repo/home.tmpl

@@ -6,7 +6,7 @@
 		{{template "repo/code/recently_pushed_new_branches" .}}
 		{{if and (not .HideRepoInfo) (not .IsBlame)}}
 		<div class="repo-description">
-			<div id="repo-desc" class="gt-word-break tw-text-16">
+			<div id="repo-desc" class="tw-break-anywhere tw-text-16">
 				{{$description := .Repository.DescriptionHTML $.Context}}
 				{{if $description}}<span class="description">{{$description | RenderCodeBlock}}</span>{{else}}<span class="no-description text-italic">{{ctx.Locale.Tr "repo.no_desc"}}</span>{{end}}
 				{{if .Repository.Website}}<a class="link" href="{{.Repository.Website}}">{{.Repository.Website}}</a>{{end}}

templates/repo/issue/list.tmpl

@@ -7,7 +7,7 @@
 	{{if .PinnedIssues}}
 		<div id="issue-pins" {{if .IsRepoAdmin}}data-is-repo-admin{{end}}>
 			{{range .PinnedIssues}}
-				<div class="issue-card gt-word-break {{if $.IsRepoAdmin}}tw-cursor-grab{{end}}" data-move-url="{{$.Link}}/move_pin" data-issue-id="{{.ID}}">
+				<div class="issue-card tw-break-anywhere {{if $.IsRepoAdmin}}tw-cursor-grab{{end}}" data-move-url="{{$.Link}}/move_pin" data-issue-id="{{.ID}}">
 					{{template "repo/issue/card" (dict "Issue" . "Page" $ "isPinnedIssueCard" true)}}
 				</div>
 			{{end}}

templates/repo/issue/view_content/conversation.tmpl

@@ -5,7 +5,7 @@
 <div class="ui segments conversation-holder">
 	<div class="ui segment collapsible-comment-box tw-py-2 tw-flex tw-items-center tw-justify-between">
 		<div class="tw-flex tw-items-center">
-			<a href="{{(index .comments 0).CodeCommentLink ctx}}" class="file-comment tw-ml-2 gt-word-break">{{(index .comments 0).TreePath}}</a>
+			<a href="{{(index .comments 0).CodeCommentLink ctx}}" class="file-comment tw-ml-2 tw-break-anywhere">{{(index .comments 0).TreePath}}</a>
 			{{if $invalid}}
 				<span class="ui label basic small tw-ml-2" data-tooltip-content="{{ctx.Locale.Tr "repo.issues.review.outdated_description"}}">
 					{{ctx.Locale.Tr "repo.issues.review.outdated"}}

templates/repo/issue/view_title.tmpl

@@ -6,7 +6,7 @@
 <div class="issue-title-header">
 	{{$canEditIssueTitle := and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .Repository.IsArchived)}}
 	<div class="issue-title" id="issue-title-display">
-		<h1 class="gt-word-break">
+		<h1 class="tw-break-anywhere">
 			{{RenderIssueTitle $.Context .Issue.Title ($.Repository.ComposeMetas ctx) | RenderCodeBlock}}
 			<span class="index">#{{.Issue.Index}}</span>
 		</h1>

templates/repo/release/list.tmpl

@@ -17,7 +17,7 @@
 					</div>
 					<div class="ui twelve wide column detail">
 						<div class="tw-flex tw-items-center tw-justify-between tw-flex-wrap tw-mb-2">
-							<h4 class="release-list-title gt-word-break">
+							<h4 class="release-list-title tw-break-anywhere">
 								<a href="{{$.RepoLink}}/releases/tag/{{$release.TagName | PathEscapeSegments}}">{{$release.Title}}</a>
 								{{template "repo/commit_statuses" dict "Status" $info.CommitStatus "Statuses" $info.CommitStatuses "AdditionalClasses" "tw-flex"}}
 								{{if $release.IsDraft}}

templates/repo/settings/options.tmpl

@@ -239,7 +239,7 @@
 						<tbody>
 							{{range .PushMirrors}}
 							<tr>
-								<td class="gt-word-break">{{.RemoteAddress}}</td>
+								<td class="tw-break-anywhere">{{.RemoteAddress}}</td>
 								<td>{{ctx.Locale.Tr "repo.settings.mirror_settings.direction.push"}}</td>
 								<td>{{if .LastUpdateUnix}}{{DateTime "full" .LastUpdateUnix}}{{else}}{{ctx.Locale.Tr "never"}}{{end}} {{if .LastError}}<div class="ui red label" data-tooltip-content="{{.LastError}}">{{ctx.Locale.Tr "error"}}</div>{{end}}</td>
 								<td class="right aligned">

templates/repo/wiki/revision.tmpl

@@ -8,7 +8,7 @@
 				<div class="ui header">
 					<a class="file-revisions-btn ui basic button" title="{{ctx.Locale.Tr "repo.wiki.back_to_wiki"}}" href="{{.RepoLink}}/wiki/{{.PageURL}}"><span>{{.revision}}</span> {{svg "octicon-home"}}</a>
 					{{$title}}
-					<div class="ui sub header gt-word-break">
+					<div class="ui sub header tw-break-anywhere">
 						{{$timeSince := TimeSince .Author.When ctx.Locale}}
 						{{ctx.Locale.Tr "repo.wiki.last_commit_info" .Author.Name $timeSince}}
 					</div>

templates/shared/user/org_profile_avatar.tmpl

@@ -2,7 +2,7 @@
 	<div class="ui container">
 		<div class="ui vertically grid head">
 			<div class="column">
-				<div class="ui header tw-flex tw-items-center gt-word-break">
+				<div class="ui header tw-flex tw-items-center tw-break-anywhere">
 					{{ctx.AvatarUtils.Avatar . 100}}
 					<span class="text grey"><a class="muted" href="{{.HomeLink}}">{{.DisplayName}}</a></span>
 					<span class="org-visibility">

templates/shared/user/profile_big_avatar.tmpl

@@ -11,7 +11,7 @@
 		</span>
 	{{end}}
 	</div>
-	<div class="content gt-word-break profile-avatar-name">
+	<div class="content tw-break-anywhere profile-avatar-name">
 		{{if .ContextUser.FullName}}<span class="header text center">{{.ContextUser.FullName}}</span>{{end}}
 		<span class="username text center">{{.ContextUser.Name}}{{if .ContextUser.Pronouns}} · {{.ContextUser.Pronouns}}{{end}} {{if .IsAdmin}}
 					<a class="muted" href="{{AppSubUrl}}/admin/users/{{.ContextUser.ID}}" data-tooltip-content="{{ctx.Locale.Tr "admin.users.details"}}">
@@ -25,7 +25,7 @@
 			{{end}}
 		</div>
 	</div>
-	<div class="extra content gt-word-break">
+	<div class="extra content tw-break-anywhere">
 		<ul>
 			{{if .ContextUser.Location}}
 				<li>

web_src/css/helpers.css

@@ -3,11 +3,6 @@ Gitea's tailwind-style CSS helper classes have `gt-` prefix.
 Gitea's private styles use `g-` prefix.
 */
 
-.gt-word-break {
-  word-wrap: break-word !important;
-  overflow-wrap: anywhere;
-}
-
 .gt-ellipsis {
   overflow: hidden !important;
   white-space: nowrap !important;

web_src/js/features/repo-issue.js

@@ -125,7 +125,7 @@ export function initRepoIssueSidebarList() {
             }
             filteredResponse.results.push({
               name: `#${issue.number} ${htmlEscape(issue.title)
-              }<div class="text small gt-word-break">${htmlEscape(issue.repository.full_name)}</div>`,
+              }<div class="text small tw-break-anywhere">${htmlEscape(issue.repository.full_name)}</div>`,
               value: issue.id,
             });
           });