Fix project column title overflow (#31011) (#31025)

Backport #31011 by wxiaoguang

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

diff --git a/modules/util/color.go b/modules/util/color.go
index 9c520dce786e2cede2eda5d71524db6c6ddbcdc9..8fffc91ac462886568cc437f26481bbe0f43cb94 100644 (file)
--- a/modules/util/color.go
+++ b/modules/util/color.go
@@ -1,5 +1,6 @@
 // Copyright 2023 The Gitea Authors. All rights reserved.
 // SPDX-License-Identifier: MIT
+
 package util
 
 import (
@@ -8,7 +9,7 @@ import (
        "strings"
 )
 
-// Get color as RGB values in 0..255 range from the hex color string (with or without #)
+// HexToRBGColor parses color as RGB values in 0..255 range from the hex color string (with or without #)
 func HexToRBGColor(colorString string) (float64, float64, float64) {
        hexString := colorString
        if strings.HasPrefix(colorString, "#") {
@@ -35,7 +36,7 @@ func HexToRBGColor(colorString string) (float64, float64, float64) {
        return r, g, b
 }
 
-// Returns relative luminance for a SRGB color - https://en.wikipedia.org/wiki/Relative_luminance
+// GetRelativeLuminance returns relative luminance for a SRGB color - https://en.wikipedia.org/wiki/Relative_luminance
 // Keep this in sync with web_src/js/utils/color.js
 func GetRelativeLuminance(color string) float64 {
        r, g, b := HexToRBGColor(color)
@@ -46,8 +47,8 @@ func UseLightText(backgroundColor string) bool {
        return GetRelativeLuminance(backgroundColor) < 0.453
 }
 
-// Given a background color, returns a black or white foreground color that the highest
-// contrast ratio. In the future, the APCA contrast function, or CSS `contrast-color` will be better.
+// ContrastColor returns a black or white foreground color that the highest contrast ratio.
+// In the future, the APCA contrast function, or CSS `contrast-color` will be better.
 // https://github.com/color-js/color.js/blob/eb7b53f7a13bb716ec8b28c7a56f052cd599acd9/src/contrast/APCA.js#L42
 func ContrastColor(backgroundColor string) string {
        if UseLightText(backgroundColor) {

diff --git a/templates/projects/view.tmpl b/templates/projects/view.tmpl
index 47f214a44e0d4ca14cc90fd86687a799898a53a5..45c8461218877443e85fa61607ba273b740f779e 100644 (file)
--- a/templates/projects/view.tmpl
+++ b/templates/projects/view.tmpl
@@ -68,18 +68,14 @@
                {{range .Columns}}
                        <div class="ui segment project-column"{{if .Color}} style="background: {{.Color}} !important; color: {{ContrastColor .Color}} !important"{{end}} data-id="{{.ID}}" data-sorting="{{.Sorting}}" data-url="{{$.Link}}/{{.ID}}">
                                <div class="project-column-header{{if $canWriteProject}} tw-cursor-grab{{end}}">
-                                       <div class="ui large label project-column-title tw-py-1">
-                                               <div class="ui small circular grey label project-column-issue-count">
-                                                       {{.NumIssues ctx}}
-                                               </div>
-                                               <span class="project-column-title-label">{{.Title}}</span>
+                                       <div class="ui circular label project-column-issue-count">
+                                               {{.NumIssues ctx}}
                                        </div>
+                                       <div class="project-column-title-label gt-ellipsis">{{.Title}}</div>
                                        {{if $canWriteProject}}
-                                               <div class="ui dropdown jump item">
-                                                       <div class="tw-px-2">
-                                                               {{svg "octicon-kebab-horizontal"}}
-                                                       </div>
-                                                       <div class="menu user-menu">
+                                               <div class="ui dropdown tw-p-1">
+                                                       {{svg "octicon-kebab-horizontal"}}
+                                                       <div class="menu">
                                                                <a class="item show-modal button" data-modal="#edit-project-column-modal-{{.ID}}">
                                                                        {{svg "octicon-pencil"}}
                                                                        {{ctx.Locale.Tr "repo.projects.column.edit"}}

diff --git a/web_src/css/features/projects.css b/web_src/css/features/projects.css
index e23c14674897bc9f68318512e0977dbfc57e408b..21e2aee0a2345e57b82c1f50d2d518839c94b772 100644 (file)
--- a/web_src/css/features/projects.css
+++ b/web_src/css/features/projects.css
@@ -14,7 +14,6 @@
   width: 320px;
   height: calc(100vh - 450px);
   min-height: 60vh;
-  overflow-y: scroll;
   flex: 0 0 auto;
   overflow: visible;
   display: flex;
@@ -30,17 +29,15 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  gap: 0.5em;
 }
 
-.project-column-title {
-  background: none !important;
-  line-height: 1.25 !important;
-  cursor: inherit;
+.ui.label.project-column-issue-count {
+  color: inherit;
 }
 
-.project-column-title,
-.project-column-issue-count {
-  color: inherit !important;
+.project-column-title-label {
+  flex: 1;
 }
 
 .project-column > .cards {