Add word-break to organization name and description (#26624)

yp05327 · web-flow · commit f39256f035a5 · 2023-10-25T10:40:39.000Z
Fix #24318 Before: ![image](https://github.com/go-gitea/gitea/assets/18380374/38282e5e-0b4d-4568-a853-59352798e826) ![image](https://github.com/go-gitea/gitea/assets/18380374/79d89ee6-61f6-45a7-af0b-d1c23fead25a) ![image](https://github.com/go-gitea/gitea/assets/18380374/39b45fae-52e2-4697-b83a-7cd10f76ac43) After: ![image](https://github.com/go-gitea/gitea/assets/18380374/09e8cfcf-0150-494e-9f63-0868f529da65) ![image](https://github.com/go-gitea/gitea/assets/18380374/d2c348d3-fe03-466a-a5f4-878b7a93a318) ![image](https://github.com/go-gitea/gitea/assets/18380374/7f75b807-300c-42d5-b2c3-bae9e45e3c08) ![image](https://github.com/go-gitea/gitea/assets/18380374/06eca901-f5cf-4100-bb65-92457ad106e3)
diff --git a/templates/org/header.tmpl b/templates/org/header.tmpl
@@ -2,7 +2,7 @@
 	<div class="ui container">
 		<div class="ui vertically grid head">
 			<div class="column">
-				<div class="ui header">
+				<div class="ui header gt-df gt-ac gt-word-break">
 					{{ctx.AvatarUtils.Avatar . 100}}
 					<span class="text thin grey"><a href="{{.HomeLink}}">{{.DisplayName}}</a></span>
 					<span class="org-visibility">
diff --git a/templates/org/home.tmpl b/templates/org/home.tmpl
@@ -3,7 +3,7 @@
 	<div class="ui container gt-df">
 		{{ctx.AvatarUtils.Avatar .Org 140 "org-avatar"}}
 		<div id="org-info">
-			<div class="ui header gt-df gt-fw">
+			<div class="ui header">
 				{{.Org.DisplayName}}
 				<span class="org-visibility">
 					{{if .Org.Visibility.IsLimited}}<span class="ui large basic horizontal label">{{ctx.Locale.Tr "org.settings.visibility.limited_shortname"}}</span>{{end}}
diff --git a/templates/shared/user/org_profile_avatar.tmpl b/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">
+				<div class="ui header gt-df gt-ac gt-word-break">
 					{{ctx.AvatarUtils.Avatar . 100}}
 					<span class="text thin grey"><a href="{{.HomeLink}}">{{.DisplayName}}</a></span>
 					<span class="org-visibility">
diff --git a/web_src/css/base.css b/web_src/css/base.css
@@ -1411,6 +1411,7 @@ img.ui.avatar,
 .ui.label {
   padding: 0.3em 0.5em;
   transition: none;
+  white-space: nowrap;
 }
 
 .ui.label,
diff --git a/web_src/css/org.css b/web_src/css/org.css
@@ -102,6 +102,7 @@
 .organization.profile #org-info {
   overflow-wrap: anywhere;
   flex: 1;
+  word-break: break-all;
 }
 
 .organization.profile #org-info .ui.header {
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
@@ -2606,6 +2606,7 @@ tbody.commit-list {
   justify-content: space-between;
   flex-wrap: wrap;
   word-break: break-word;
+  gap: 0.5rem;
 }
 
 @media (max-width: 767.98px) {

Original file line number	Diff line number	Diff line change
`@@ -1411,6 +1411,7 @@ img.ui.avatar,`
`1411`	`1411`	`.ui.label {`
`1412`	`1412`	`padding: 0.3em 0.5em;`
`1413`	`1413`	`transition: none;`
	`1414`	`+ white-space: nowrap;`
`1414`	`1415`	`}`
`1415`	`1416`
`1416`	`1417`	`.ui.label,`
Original file line number	Diff line number	Diff line change
`@@ -102,6 +102,7 @@`
`102`	`102`	`.organization.profile #org-info {`
`103`	`103`	`overflow-wrap: anywhere;`
`104`	`104`	`flex: 1;`
	`105`	`+ word-break: break-all;`
`105`	`106`	`}`
`106`	`107`
`107`	`108`	`.organization.profile #org-info .ui.header {`
Original file line number	Diff line number	Diff line change
`@@ -2606,6 +2606,7 @@ tbody.commit-list {`
`2606`	`2606`	`justify-content: space-between;`
`2607`	`2607`	`flex-wrap: wrap;`
`2608`	`2608`	`word-break: break-word;`
	`2609`	`+ gap: 0.5rem;`
`2609`	`2610`	`}`
`2610`	`2611`
`2611`	`2612`	`@media (max-width: 767.98px) {`