wrap long texts on user profile info (#7333)

fix #7255

discussed in PR #7254

Signed-off-by: Michael Gnehr <[email protected]>

Author: Cherrg

public/css/index.css

@@ -47,6 +47,7 @@ img{border-radius:3px}
 table{border-collapse:collapse}
 a{cursor:pointer}
 .rounded{border-radius:.28571429rem!important}
+.wrap{word-wrap:break-word;word-break:break-all}
 .mono,code,pre{font:12px 'SF Mono',Consolas,Menlo,'Liberation Mono',Monaco,'Lucida Console',monospace}
 .mono.raw,code.raw,pre.raw{padding:7px 12px;margin:10px 0;background-color:#f8f8f8;border:1px solid #ddd;border-radius:3px;font-size:13px;line-height:1.5;overflow:auto}
 .mono.wrap,code.wrap,pre.wrap{white-space:pre-wrap;word-break:break-all;overflow-wrap:break-word;word-wrap:break-word}

public/less/_base.less

@@ -159,6 +159,11 @@ a {
     border-radius: 0.28571429rem !important;
 }
 
+.wrap {
+    word-wrap: break-word;
+    word-break: break-all;
+}
+
 pre,
 code,
 .mono {

templates/user/profile.tmpl

@@ -13,11 +13,11 @@
 							<img src="{{.Owner.SizedRelAvatarLink 290}}" title="{{.Owner.Name}}"/>
 						</span>
 					{{end}}
-					<div class="content">
+					<div class="content wrap">
 						{{if .Owner.FullName}}<span class="header text center">{{.Owner.FullName}}</span>{{end}}
 						<span class="username text center">{{.Owner.Name}}</span>
 					</div>
-					<div class="extra content">
+					<div class="extra content wrap">
 						<ul class="text black">
 							{{if .Owner.Location}}
 								<li><i class="octicon octicon-location"></i> {{.Owner.Location}}</li>