Prevent tab shifting, remove extra margin on fluid pages (#31090) (#31099)

Backport #31090 by @silverwind

1. Extend concept of https://github.com/go-gitea/gitea/pull/29831 to all
tabular menus, there were only three left that weren't already
`<overflow-menu>`.

<img width="634" alt="Screenshot 2024-05-27 at 00 42 16"
src="https://github.com/go-gitea/gitea/assets/115237/d9a7e219-d05e-40a1-9e93-777f9a8a90dd">
<img width="965" alt="Screenshot 2024-05-27 at 00 29 32"
src="https://github.com/go-gitea/gitea/assets/115237/e6ed71b1-11fb-4a74-9adb-af4524286cff">

2. Remove extra padding on `fluid padded` container like for example PR
diff view. The page margin is already correctly sized via
`.ui.container`, so this was just extraneous padding that looked ugly.

Before:
<img width="1351" alt="Screenshot 2024-05-27 at 00 45 11"
src="https://github.com/go-gitea/gitea/assets/115237/4b45fd11-b1b2-4fbb-a618-26eb22be9472">

After:
<img width="1344" alt="Screenshot 2024-05-27 at 00 45 22"
src="https://github.com/go-gitea/gitea/assets/115237/d09593eb-6c7f-45e7-85b6-f0050047004b">

3. Replace `gt-word-break` with `tw-break-anywhere` in issue-title,
fixing overflow.

Before:
<img width="1333" alt="Screenshot 2024-05-27 at 00 50 14"
src="https://github.com/go-gitea/gitea/assets/115237/64d15d04-b456-401e-a972-df636965f0eb">

After:
<img width="1316" alt="Screenshot 2024-05-27 at 00 50 26"
src="https://github.com/go-gitea/gitea/assets/115237/ed1ce830-1408-414b-8263-eeaf773f52c8">

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

diff --git a/templates/repo/issue/view_title.tmpl b/templates/repo/issue/view_title.tmpl
index 097d7b1f7c4e07636161f30d5ea1e4527bd2325c..58d3759a9d9330fc267b172cdeeb7f71e3df57cc 100644 (file)
--- a/templates/repo/issue/view_title.tmpl
+++ b/templates/repo/issue/view_title.tmpl
@@ -6,7 +6,7 @@
 <div class="issue-title-header">
        {{$canEditIssueTitle := and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .Repository.IsArchived)}}
        <div class="issue-title" id="issue-title-display">
-               <h1 class="gt-word-break">
+               <h1 class="tw-break-anywhere">
                        {{RenderIssueTitle $.Context .Issue.Title ($.Repository.ComposeMetas ctx) | RenderCodeBlock}}
                        <span class="index">#{{.Issue.Index}}</span>
                </h1>

diff --git a/templates/repo/pulls/tab_menu.tmpl b/templates/repo/pulls/tab_menu.tmpl
index d5a8d6ed21a6b7f961dd861a0d831518e38f5dfc..8b192c44db6633ac50f09eb2ea00345f915d542b 100644 (file)
--- a/templates/repo/pulls/tab_menu.tmpl
+++ b/templates/repo/pulls/tab_menu.tmpl
@@ -2,17 +2,17 @@
        <div class="ui top attached pull tabular menu">
                <a class="item {{if .PageIsPullConversation}}active{{end}}" href="{{.Issue.Link}}">
                        {{svg "octicon-comment-discussion"}}
-                       {{ctx.Locale.Tr "repo.pulls.tab_conversation"}}
+                       {{template "shared/misc/tabtitle" (ctx.Locale.Tr "repo.pulls.tab_conversation")}}
                        <span class="ui small label">{{.Issue.NumComments}}</span>
                </a>
                <a class="item {{if .PageIsPullCommits}}active{{end}}" {{if .NumCommits}}href="{{.Issue.Link}}/commits"{{end}}>
                        {{svg "octicon-git-commit"}}
-                       {{ctx.Locale.Tr "repo.pulls.tab_commits"}}
+                       {{template "shared/misc/tabtitle" (ctx.Locale.Tr "repo.pulls.tab_commits")}}
                        <span class="ui small label">{{if .NumCommits}}{{.NumCommits}}{{else}}-{{end}}</span>
                </a>
                <a class="item {{if .PageIsPullFiles}}active{{end}}" href="{{.Issue.Link}}/files">
                        {{svg "octicon-diff"}}
-                       {{ctx.Locale.Tr "repo.pulls.tab_files"}}
+                       {{template "shared/misc/tabtitle" (ctx.Locale.Tr "repo.pulls.tab_files")}}
                        <span class="ui small label">{{if .NumFiles}}{{.NumFiles}}{{else}}-{{end}}</span>
                </a>
                {{if or .Diff.TotalAddition .Diff.TotalDeletion}}

diff --git a/templates/repo/settings/webhook/history.tmpl b/templates/repo/settings/webhook/history.tmpl
index 149840b0deac0badfd993565b17ac71461eecf43..0e03b8ed1bdcc64ca2596e3efe822506f3e5a97e 100644 (file)
--- a/templates/repo/settings/webhook/history.tmpl
+++ b/templates/repo/settings/webhook/history.tmpl
@@ -34,9 +34,11 @@
                                        </div>
                                        <div class="info tw-hidden" id="info-{{.ID}}">
                                                <div class="ui top attached tabular menu">
-                                                       <a class="item active" data-tab="request-{{.ID}}">{{ctx.Locale.Tr "repo.settings.webhook.request"}}</a>
+                                                       <a class="item active" data-tab="request-{{.ID}}">
+                                                               {{template "shared/misc/tabtitle" (ctx.Locale.Tr "repo.settings.webhook.request")}}
+                                                       </a>
                                                        <a class="item" data-tab="response-{{.ID}}">
-                                                               {{ctx.Locale.Tr "repo.settings.webhook.response"}}
+                                                               {{template "shared/misc/tabtitle" (ctx.Locale.Tr "repo.settings.webhook.response")}}
                                                                {{if .ResponseInfo}}
                                                                        {{if .IsSucceed}}
                                                                                <span class="ui green label">{{.ResponseInfo.Status}}</span>
@@ -49,10 +51,10 @@
                                                        </a>
                                                        {{if or $.Permission.IsAdmin $.IsOrganizationOwner $.PageIsAdmin $.PageIsUserSettings}}
                                                        <div class="right menu">
-                                                               <form class="item" action="{{$.Link}}/replay/{{.UUID}}" method="post">
+                                                               <form class="tw-py-2" action="{{$.Link}}/replay/{{.UUID}}" method="post">
                                                                        {{$.CsrfTokenHtml}}
                                                                        <span data-tooltip-content="{{if $.Webhook.IsActive}}{{ctx.Locale.Tr "repo.settings.webhook.replay.description"}}{{else}}{{ctx.Locale.Tr "repo.settings.webhook.replay.description_disabled"}}{{end}}">
-                                                                               <button class="ui tiny button{{if not $.Webhook.IsActive}} disabled{{end}}">{{svg "octicon-sync"}}</button>
+                                                                               <button class="ui tiny button tw-mr-0{{if not $.Webhook.IsActive}} disabled{{end}}">{{svg "octicon-sync"}}</button>
                                                                        </span>
                                                                </form>
                                                        </div>

diff --git a/templates/shared/combomarkdowneditor.tmpl b/templates/shared/combomarkdowneditor.tmpl
index 5bb71e7cd4f8afb29c11c91dc9796db7ce3eb6e6..a0145ab297b49fdaca2f954f1736cb09d903e40b 100644 (file)
--- a/templates/shared/combomarkdowneditor.tmpl
+++ b/templates/shared/combomarkdowneditor.tmpl
@@ -14,8 +14,8 @@ Template Attributes:
 <div {{if .ContainerId}}id="{{.ContainerId}}"{{end}} class="combo-markdown-editor {{.ContainerClasses}}" data-dropzone-parent-container="{{.DropzoneParentContainer}}">
        {{if .MarkdownPreviewUrl}}
        <div class="ui top tabular menu">
-               <a class="active item" data-tab-for="markdown-writer">{{ctx.Locale.Tr "write"}}</a>
-               <a class="item" data-tab-for="markdown-previewer" data-preview-url="{{.MarkdownPreviewUrl}}" data-preview-context="{{.MarkdownPreviewContext}}">{{ctx.Locale.Tr "preview"}}</a>
+               <a class="active item" data-tab-for="markdown-writer">{{template "shared/misc/tabtitle" (ctx.Locale.Tr "write")}}</a>
+               <a class="item" data-tab-for="markdown-previewer" data-preview-url="{{.MarkdownPreviewUrl}}" data-preview-context="{{.MarkdownPreviewContext}}">{{template "shared/misc/tabtitle" (ctx.Locale.Tr "preview")}}</a>
        </div>
        {{end}}
        <div class="ui tab active" data-tab-panel="markdown-writer">

diff --git a/templates/shared/misc/tabtitle.tmpl b/templates/shared/misc/tabtitle.tmpl
new file mode 100644 (file)
index 0000000..dea9d4d
--- /dev/null
+++ b/templates/shared/misc/tabtitle.tmpl
@@ -0,0 +1 @@
+<span class="resize-for-semibold" data-text="{{.}}">{{.}}</span>

diff --git a/web_src/css/modules/container.css b/web_src/css/modules/container.css
index c9df6ab3f585aca03341fb15dc09f4ab15a47765..4a442c35b1ec06964aa2df6eb92956a78eb6cce7 100644 (file)
--- a/web_src/css/modules/container.css
+++ b/web_src/css/modules/container.css
@@ -12,10 +12,6 @@
   width: 100%;
 }
 
-.ui.container.fluid.padded {
-  padding: 0 var(--page-margin-x);
-}
-
 .ui[class*="center aligned"].container {
   text-align: center;
 }