Fix issue card layout (#30800) (#30820)

Backport #30800 by wxiaoguang

Fix #30788

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

diff --git a/templates/repo/issue/card.tmpl b/templates/repo/issue/card.tmpl
index 4a0ac050aa2ef62f3e7a6fe16338de6d34ce5c65..526f6dd5dbc6b922b667860c8b4a4b01d95570c7 100644 (file)
--- 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
index cc09ec94e2cb9b2207023a3dd4349d07a748d1e0..a930e130f87204a05b5bd3a37d42f506a5bf32aa 100644 (file)
--- 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
index 609b1b3dbd7580b8d39693a12087623aea827081..390bfb6a01419808e514d92052dbd1219d3048cd 100644 (file)
--- 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;
+}