align issue list checkbox

Author: wxiaoguang

templates/repo/home_sidebar_bottom.tmpl

@@ -10,8 +10,8 @@
 					</a>
 				</div>
 				<div class="flex-item">
-					<div class="flex-item-icon">
-						{{svg "octicon-tag" 16}}
+					<div class="flex-item-leading">
+						<div class="tw-mt-1">{{svg "octicon-tag" 16}}</div>
 					</div>
 					<div class="flex-item-main">
 						<div class="flex-item-header">

templates/shared/issuelist.tmpl

@@ -3,11 +3,14 @@
 	{{range .Issues}}
 		<div class="flex-item">
 
-			<div class="flex-item-icon">
-				{{if $.CanWriteIssuesOrPulls}}
-				<input type="checkbox" autocomplete="off" class="issue-checkbox tw-mr-4" data-issue-id={{.ID}} aria-label="{{ctx.Locale.Tr "repo.issues.action_check"}} &quot;{{.Title}}&quot;">
-				{{end}}
-				{{template "shared/issueicon" .}}
+			<div class="flex-item-leading">
+				{{/* using some tw helpers is the only way to align the checkbox */}}
+				<div class="flex-text-inline tw-mt-[2px]">
+					{{if $.CanWriteIssuesOrPulls}}
+						<input type="checkbox" autocomplete="off" class="issue-checkbox tw-mr-[14px]" data-issue-id={{.ID}} aria-label="{{ctx.Locale.Tr "repo.issues.action_check"}} &quot;{{.Title}}&quot;">
+					{{end}}
+					{{template "shared/issueicon" .}}
+				</div>
 			</div>
 
 			<div class="flex-item-main">
@@ -32,7 +35,7 @@
 					</div>
 					{{end}}
 				</div>
-				<div class="flex-item-body">
+				<div class="flex-item-body tw-mt-1">
 					<a class="index" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}">
 						{{if eq $.listType "dashboard"}}
 							{{.Repo.FullName}}#{{.Index}}

web_src/css/shared/flex-list.css

@@ -33,14 +33,6 @@
   color: var(--color-primary) !important;
 }
 
-.flex-item .flex-item-icon {
-  align-self: baseline; /* mainly used by the issue list, to align the leading icon with the title */
-}
-
-.flex-item .flex-item-icon + .flex-item-main {
-  align-self: baseline;
-}
-
 .flex-item .flex-item-trailing {
   display: flex;
   gap: 0.5rem;