Fix issue card layout (#30800)

Fix #30788
go-gitea · May 2, 2024 · 6ff2acc · 6ff2acc
1 parent ebe6f4c
commit 6ff2acc
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 10 deletions.
diff --git a/templates/repo/issue/card.tmpl b/templates/repo/issue/card.tmpl
@@ -62,13 +62,13 @@
 	</div>
 
 	{{if or .Labels .Assignees}}
-	<div class="tw-flex tw-justify-between">
-		<div class="labels-list tw-flex-1">
+	<div class="issue-card-bottom">
+		<div class="labels-list">
 			{{range .Labels}}
 				<a target="_blank" href="{{$.Issue.Repo.Link}}/issues?labels={{.ID}}">{{RenderLabel ctx ctx.Locale .}}</a>
 			{{end}}
 		</div>
-		<div class="tw-flex tw-flex-wrap tw-content-start tw-gap-1">
+		<div class="issue-card-assignees">
 			{{range .Assignees}}
 				<a target="_blank" href="{{.HomeLink}}" data-tooltip-content="{{ctx.Locale.Tr "repo.projects.column.assigned_to"}} {{.Name}}">{{ctx.AvatarUtils.Avatar . 28}}</a>
 			{{end}}

diff --git a/web_src/css/repo.css b/web_src/css/repo.css
@@ -2195,18 +2195,12 @@ td .commit-summary {
   display: inline-flex;
   flex-wrap: wrap;
   gap: 2.5px;
-}
-
-.labels-list a {
-  display: flex;
-  text-decoration: none;
+  align-items: center;
 }
 
 .labels-list .label {
   padding: 0 6px;
-  margin: 0 !important;
   min-height: 20px;
-  display: inline-flex !important;
   line-height: 1.3; /* there is a `font-size: 1.25em` for inside emoji, so here the line-height needs to be larger slightly */
 }
 

diff --git a/web_src/css/repo/issue-card.css b/web_src/css/repo/issue-card.css
@@ -23,3 +23,18 @@
 .issue-card.sortable-chosen .issue-card-title {
   cursor: inherit;
 }
+
+.issue-card-bottom {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  gap: 0.25em;
+}
+
+.issue-card-assignees {
+  display: flex;
+  align-items: center;
+  gap: 0.25em;
+  justify-content: end;
+  flex-wrap: wrap;
+}