Restructure issue list template, styles (#25750)

This PR does various modifications on the issue list shared template:
- restructure layout to achieve better responsiveness
-  fix various style issues
- restructure styles (better result with less code :)
- remove numerous `gt-*` patches and other unneeded classes -> use
existing css classes

<details>
<summary>Before:</summary>

![Bildschirmfoto vom 2023-07-07
14-35-00](https://github.com/go-gitea/gitea/assets/47871822/5301fc80-d58b-41c2-8090-5867e2e8459c)
![Bildschirmfoto vom 2023-07-07
14-35-19](https://github.com/go-gitea/gitea/assets/47871822/d36ab691-7dc4-44bb-a8f6-a4105a2a6777)
![Bildschirmfoto vom 2023-07-07
14-35-43](https://github.com/go-gitea/gitea/assets/47871822/0762c852-eb40-4b00-8757-c5dbfd2ae569)
</details>

<details>
<summary>After:</summary>

![Bildschirmfoto vom 2023-07-07
14-32-04](https://github.com/go-gitea/gitea/assets/47871822/0ac42d36-f98f-451a-b556-70c913d19df8)
![Bildschirmfoto vom 2023-07-07
14-31-32](https://github.com/go-gitea/gitea/assets/47871822/520fac9c-33e3-4290-bfe1-6e941f1100f8)
![Bildschirmfoto vom 2023-07-07
14-31-14](https://github.com/go-gitea/gitea/assets/47871822/05ad46bb-3c67-403d-85b8-d12d64f99c59)

</details>

---------

Co-authored-by: silverwind <me@silverwind.io>

1 files changed, 41 insertions, 77 deletions

diff --git a/web_src/css/shared/issuelist.css b/web_src/css/shared/issuelist.css
index 7f9e49831a..82fafedec0 100644
--- a/web_src/css/shared/issuelist.css
+++ b/web_src/css/shared/issuelist.css
@@ -3,6 +3,30 @@
   margin-top: 1rem;
 }
 
+.issue.list .item {
+  display: flex;
+  align-items: baseline;
+  padding: 8px 0;
+}
+
+.issue.list .item .issue-item-left {
+  display: flex;
+  align-items: flex-start;
+}
+
+.issue.list .item .issue-item-main {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.issue.list .item .issue-item-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
 .issue.list a:not(.label):hover {
   color: var(--color-primary) !important;
 }
@@ -12,14 +36,13 @@
   margin-top: 1px;
 }
 
-.issue.list > .item .issue-item-icons-right > * + * {
-  margin-left: 0.5rem;
+.issue.list .item .issue-item-right {
+  display: flex;
+  gap: 0.5rem;
 }
 
-.issue.list > .item .issue-item-main {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
+.issue.list > .action-item {
+  align-items: normal;
 }
 
 .issue.list > .item .action-item-center {
@@ -37,7 +60,7 @@
   color: var(--color-text-light);
 }
 
-.issue.list > .item .issue-item-top-row {
+.issue.list > .item .issue-item-title {
   max-width: 100%;
   color: var(--color-text);
   font-size: 16px;
@@ -45,7 +68,7 @@
   font-weight: var(--font-weight-semibold);
 }
 
-.issue.list > .item .issue-item-top-row a.index {
+.issue.list > .item .issue-item-title a.index {
   max-width: fit-content;
   display: -webkit-box;
   -webkit-box-orient: vertical;
@@ -54,108 +77,49 @@
   word-break: break-all;
 }
 
-.issue.list > .item .labels-list {
-  position: relative;
-  top: -1.5px;
+.issue.list > .item .title {
+  color: var(--color-text);
+  overflow-wrap: anywhere;
 }
 
-.issue.list > .item .issue-item-bottom-row {
+.issue.list > .item .issue-item-body {
   font-size: 13px;
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-  margin: .125rem 0;
-}
-
-.issue.list > .item .title {
-  color: var(--color-text);
-  word-break: break-word;
-}
-
-.issue.list > .item .issue-item-icon-right {
-  min-width: 2rem;
-}
-
-.issue.list > .item .assignee {
-  position: relative;
-  top: -2px;
-}
-
-.issue.list > .item .assignee img {
-  margin-right: 2px;
-}
-
-.issue.list > .item .desc {
+  gap: .25rem;
   color: var(--color-text-light-2);
 }
 
-.issue.list > .item .desc a {
+.issue.list > .item .issue-item-body a {
   color: inherit;
   word-break: break-word;
 }
 
-.issue.list > .item .desc .time-since,
-.issue.list > .item .desc a {
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
-}
-
-.issue.list > .item .desc .waiting,
-.issue.list > .item .desc .approvals,
-.issue.list > .item .desc .rejects {
-  padding-left: 5px;
-}
-
-.issue.list > .item .desc .checklist {
-  padding-left: 5px;
-}
-
-.issue.list > .item .desc .checklist progress {
+.issue.list > .item .issue-item-body .checklist progress {
   margin-left: 2px;
   width: 80px;
   height: 6px;
   display: inline-block;
   border-radius: 3px;
-  vertical-align: 2px !important;
 }
 
-.issue.list > .item .desc .checklist progress::-webkit-progress-value {
+.issue.list > .item .issue-item-body .checklist progress::-webkit-progress-value {
   background-color: var(--color-secondary-dark-4);
 }
 
-.issue.list > .item .desc .checklist progress::-moz-progress-bar {
+.issue.list > .item .issue-item-body .checklist progress::-moz-progress-bar {
   background-color: var(--color-secondary-dark-4);
 }
 
-.issue.list > .item .desc .conflicting {
-  padding-left: 5px;
-}
-
-.issue.list > .item .desc .due-date {
-  padding-left: 5px;
-}
-
-.issue.list > .item .desc a.milestone,
-.issue.list > .item .desc a.project {
-  margin-left: 5px;
-}
-
-.issue.list > .item .desc a.ref {
-  margin-left: 8px;
-}
-
-.issue.list > .item .desc a.ref span {
-  margin-right: -4px;
-}
-
 .issue.list .branches {
   display: inline-flex;
-  padding: 0 4px;
 }
 
 .issue.list .branches .branch {
   background-color: var(--color-secondary-alpha-40);
   border-radius: 3px;
+  padding: 0 4px;
 }
 
 .issue.list .branches .truncated-name {