More improvements for the "flex list" and the dashboard list (#26675)

Follow #26649 and #25790 and add one more example (text truncate) in the devtest page

Author: wxiaoguang

templates/devtest/flex-list.tmpl

@@ -48,6 +48,7 @@
 					</div>
 					<div class="flex-item-body">
 						Very loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong content
+						<span class="text truncate">Truncate very loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong content</span>
 					</div>
 				</div>
 				<div class="flex-item-trailing">

templates/user/dashboard/feeds.tmpl

@@ -80,25 +80,21 @@
 					{{end}}
 				</div>
 				{{if or (eq .GetOpType 5) (eq .GetOpType 18)}}
-					<div class="gt-pl-5">
-						{{$push := ActionContent2Commits .}}
-						{{$repoLink := .GetRepoLink}}
-						{{range $push.Commits}}
-							{{$commitLink := printf "%s/commit/%s" $repoLink .Sha1}}
-							<div class="flex-item">
-								<img class="ui avatar" src="{{$push.AvatarLink $.Context .AuthorEmail}}" title="{{.AuthorName}}" width="16" height="16">
-								<a class="commit-id" href="{{$commitLink}}">{{ShortSha .Sha1}}</a>
-								<span class="text truncate light grey">
-									{{RenderCommitMessage $.Context .Message $repoLink $.ComposeMetas}}
-								</span>
-							</div>
-						{{end}}
-						{{if and (gt $push.Len 1) $push.CompareURL}}
-							<div class="flex-item">
-								<a href="{{AppSubUrl}}/{{$push.CompareURL}}">{{$.locale.Tr "action.compare_commits" $push.Len}} »</a>
-							</div>
-						{{end}}
-					</div>
+					{{$push := ActionContent2Commits .}}
+					{{$repoLink := .GetRepoLink}}
+					{{range $push.Commits}}
+						{{$commitLink := printf "%s/commit/%s" $repoLink .Sha1}}
+						<div class="flex-text-block">
+							<img class="ui avatar" src="{{$push.AvatarLink $.Context .AuthorEmail}}" title="{{.AuthorName}}" width="16" height="16">
+							<a class="gt-mono" href="{{$commitLink}}">{{ShortSha .Sha1}}</a>
+							<span class="text truncate light grey">
+								{{RenderCommitMessage $.Context .Message $repoLink $.ComposeMetas}}
+							</span>
+						</div>
+					{{end}}
+					{{if and (gt $push.Len 1) $push.CompareURL}}
+						<a href="{{AppSubUrl}}/{{$push.CompareURL}}">{{$.locale.Tr "action.compare_commits" $push.Len}} »</a>
+					{{end}}
 				{{else if eq .GetOpType 6}}
 					<span class="text truncate issue title">{{index .GetIssueInfos 1 | RenderEmoji $.Context | RenderCodeBlock}}</span>
 				{{else if eq .GetOpType 7}}

web_src/css/dashboard.css

@@ -96,10 +96,6 @@
   }
 }
 
-.feeds .commit-id {
-  font-family: var(--fonts-monospace);
-}
-
 .feeds code {
   padding: 2px 4px;
   border-radius: 3px;

web_src/css/shared/flex-list.css

@@ -29,7 +29,8 @@
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  flex-basis: 60%;
+  flex-basis: 60%; /* avoid wrapping the "flex-item-trailing" too aggressively */
+  min-width: 0; /* make the "text truncate" work, otherwise the flex axis is not limited and the text just overflows */
 }
 
 .flex-item-header {
@@ -66,6 +67,7 @@
   font-size: 16px;
   font-weight: var(--font-weight-semibold);
   word-break: break-word;
+  min-width: 0;
 }
 
 .flex-item .flex-item-title a {