Fix project name wrapping, remove horizontal margin on header (#30631) (#30654)

Backport #30631 by @silverwind

Enable wrapping of unbroken lines:

<img width="1308" alt="Screenshot 2024-04-22 at 00 31 33"
src="https://github.com/go-gitea/gitea/assets/115237/1a28ade1-d708-4260-96a3-cf508b6dcb79">

Remove extra margin added by nested `.ui.container` on certain
viewports:

Before:
<img width="1305" alt="Screenshot 2024-04-22 at 00 40 23"
src="https://github.com/go-gitea/gitea/assets/115237/d3d8c0d1-380c-4867-b95c-4d53d70d4a93">

After:
<img width="1310" alt="Screenshot 2024-04-22 at 00 40 33"
src="https://github.com/go-gitea/gitea/assets/115237/2ba7b9f2-db2f-4bcc-8cce-5c415625ddea">

---------

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

diff --git a/templates/projects/list.tmpl b/templates/projects/list.tmpl
index ec02e9a6fc9536128050813d40e0968aa8243f3d..b2f48fe2c9c47b446e51ebc82d31ca3a1636e18f 100644 (file)
--- a/templates/projects/list.tmpl
+++ b/templates/projects/list.tmpl
@@ -41,9 +41,9 @@
 <div class="milestone-list">
        {{range .Projects}}
                <li class="milestone-card">
-                       <h3 class="flex-text-block tw-m-0">
+                       <h3 class="flex-text-block tw-m-0 tw-gap-3">
                                {{svg .IconName 16}}
-                               <a class="muted" href="{{.Link ctx}}">{{.Title}}</a>
+                               <a class="muted tw-break-anywhere" href="{{.Link ctx}}">{{.Title}}</a>
                        </h3>
                        <div class="milestone-toolbar">
                                <div class="group">

diff --git a/templates/projects/view.tmpl b/templates/projects/view.tmpl
index 0944ba900d8b8c3d162ca5f78ada416335acf092..861c7ef5a9de0a01541dbf91a69f5e38eb16fcfc 100644 (file)
--- a/templates/projects/view.tmpl
+++ b/templates/projects/view.tmpl
@@ -1,8 +1,8 @@
 {{$canWriteProject := and .CanWriteProjects (or (not .Repository) (not .Repository.IsArchived))}}
 
-<div class="ui container">
-       <div class="tw-flex tw-justify-between tw-items-center tw-mb-4">
-               <h2 class="tw-mb-0">{{.Project.Title}}</h2>
+<div class="ui container tw-max-w-full">
+       <div class="tw-flex tw-justify-between tw-items-center tw-mb-4 tw-gap-3">
+               <h2 class="tw-mb-0 tw-flex-1 tw-break-anywhere">{{.Project.Title}}</h2>
                {{if $canWriteProject}}
                        <div class="ui compact mini menu">
                                <a class="item" href="{{.Link}}/edit?redirect=project">

diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css
index 13962f19d7cb319e20f856af75b0c4b2347a1563..2d218a919b3ffc00452eb81f50a82ff1253c4ce4 100644 (file)
--- a/web_src/css/helpers.css
+++ b/web_src/css/helpers.css
@@ -52,6 +52,9 @@ only use:
 */
 .tw-hidden.tw-hidden { display: none !important; }
 
+/* proposed class from https://github.com/tailwindlabs/tailwindcss/pull/12128 */
+.tw-break-anywhere { overflow-wrap: anywhere !important; }
+
 @media (max-width: 767.98px) {
   /* double selector so it wins over .tw-flex (old .gt-df) etc */
   .not-mobile.not-mobile {