Fix long name ui issues and label ui issue (#23541)

This PR fixes some ui problems as mentioned in the two issues below.
1. Long file path has no word break

## Before
<img width="1357" alt="截屏2023-03-17 17 49 43"
src="https://user-images.githubusercontent.com/17645053/225873491-27c7bf9a-d5d5-4065-9e4a-ff228e935abf.png">

## After
<img width="1248" alt="截屏2023-03-17 17 51 22"
src="https://user-images.githubusercontent.com/17645053/225873562-93b87af7-9c83-43f8-aa0d-36a9174d25ac.png">
on mobile
<img width="408" alt="截屏2023-03-17 17 51 15"
src="https://user-images.githubusercontent.com/17645053/225873554-1b8c8999-1dfc-4251-a7fc-20ecd3444cb0.png">

2. Texts in labels
## Before
<img width="1219" alt="截屏2023-03-17 17 49 24"
src="https://user-images.githubusercontent.com/17645053/225873369-812b1b52-c104-4e32-988f-c3e55ad2f844.png">

## After
<img width="1259" alt="截屏2023-03-17 17 51 31"
src="https://user-images.githubusercontent.com/17645053/225873317-9717fd2c-e9e1-4a00-a27d-6bdc5933c3ca.png">
with two labels
<img width="1258" alt="截屏2023-03-17 17 51 53"
src="https://user-images.githubusercontent.com/17645053/225873323-13198192-71de-472d-8e78-6fd86ddba3d9.png">
In explore and star pages
<img width="896" alt="截屏2023-03-17 18 25 00"
src="https://user-images.githubusercontent.com/17645053/225878962-9e26e3aa-cff0-451c-9133-19f4ad1507a4.png">

<img width="913" alt="截屏2023-03-17 18 25 09"
src="https://user-images.githubusercontent.com/17645053/225878967-6adaa414-136e-43c2-87d0-7e46a0da112e.png">

3. Long name repository on creating new fork page
## Before
<img width="919" alt="截屏2023-03-17 17 50 01"
src="https://user-images.githubusercontent.com/17645053/225873723-5c4ea137-3b51-4074-a458-ef442e330ddf.png">

## After
<img width="907" alt="截屏2023-03-17 17 50 37"
src="https://user-images.githubusercontent.com/17645053/225873772-fc4a52c3-49c6-4ca6-903d-a13707f2a98b.png">

<img width="383" alt="截屏2023-03-17 17 50 48"
src="https://user-images.githubusercontent.com/17645053/225873779-6de1dfde-5c05-4ae9-89e1-85c25b3a1682.png">

Closes #23535
Closes #23534

diff --git a/templates/explore/repo_list.tmpl b/templates/explore/repo_list.tmpl
index 6650e6073fcf272eebf4a9e172eaf1091202705e..288313c7d45216e4f7dcbe380bb97935d78d9b8e 100644 (file)
--- a/templates/explore/repo_list.tmpl
+++ b/templates/explore/repo_list.tmpl
@@ -10,7 +10,7 @@
                                        <a class="name" href="{{.Link}}">
                                                {{if or $.PageIsExplore $.PageIsProfileStarList}}{{if .Owner}}{{.Owner.Name}} / {{end}}{{end}}{{.Name}}
                                        </a>
-                                       <div class="labels gt-df gt-ac gt-fw">
+                                       <div class="labels gt-df gt-ac gt-fw gt-mr-3">
                                                {{if .IsArchived}}
                                                        <span class="ui basic label">{{$.locale.Tr "repo.desc.archived"}}</span>
                                                {{end}}

diff --git a/templates/repo/pulls/fork.tmpl b/templates/repo/pulls/fork.tmpl
index 930d5afa69b2c1195cfc4e51aff90b1352092501..34adc7b2f1d57f8868721a073bd3bfa5b6f371d8 100644 (file)
--- a/templates/repo/pulls/fork.tmpl
+++ b/templates/repo/pulls/fork.tmpl
@@ -37,7 +37,7 @@
 
                                        <div class="inline field">
                                                <label>{{.locale.Tr "repo.fork_from"}}</label>
-                                               <a href="{{.ForkRepo.Link}}">{{.ForkRepo.FullName}}</a>
+                                               <a href="{{.ForkRepo.Link}}" class="gt-dib">{{.ForkRepo.FullName}}</a>
                                        </div>
                                        <div class="inline required field {{if .Err_RepoName}}error{{end}}">
                                                <label for="repo_name">{{.locale.Tr "repo.repo_name"}}</label>

diff --git a/web_src/css/explore.css b/web_src/css/explore.css
index 8543702252470742510e95cf7e356fe7ad6c5916..e3f9dddc586887a2838234c2ddc8baae9c53fc5c 100644 (file)
--- a/web_src/css/explore.css
+++ b/web_src/css/explore.css
@@ -41,6 +41,11 @@
   margin-bottom: 0.5rem;
 }
 
+.ui.repository.list .repo-title .labels {
+  word-break: normal;
+  flex-shrink: 0;
+}
+
 .ui.repository.branches .info {
   font-size: 12px;
   color: var(--color-text-light);

diff --git a/web_src/css/form.css b/web_src/css/form.css
index e325a377f8d8b430174e2d2d06e7682ed741bb97..324a210f4f9729cc294f164a278c523f1d9c36f7 100644 (file)
--- a/web_src/css/form.css
+++ b/web_src/css/form.css
@@ -479,7 +479,8 @@ textarea:focus,
 
 .repository.new.repo form .selection.dropdown,
 .repository.new.migrate form .selection.dropdown,
-.repository.new.fork form .selection.dropdown {
+.repository.new.fork form .selection.dropdown,
+.repository.new.fork form .field a {
   vertical-align: middle;
   width: 50% !important;
 }
@@ -491,6 +492,7 @@ textarea:focus,
   .repository.new.repo form input,
   .repository.new.migrate form input,
   .repository.new.fork form input,
+  .repository.new.fork form .field a,
   .repository.new.repo form .selection.dropdown,
   .repository.new.migrate form .selection.dropdown,
   .repository.new.fork form .selection.dropdown {
@@ -500,8 +502,7 @@ textarea:focus,
   .repository.new.migrate form .field button,
   .repository.new.fork form .field button,
   .repository.new.repo form .field a,
-  .repository.new.migrate form .field a,
-  .repository.new.fork form .field a {
+  .repository.new.migrate form .field a {
     margin-bottom: 1em;
     width: 100%;
   }

diff --git a/web_src/css/repository.css b/web_src/css/repository.css
index d2040ec0ac56e4c94dc649b8dc423afdd718930b..2708cf4d4793df45584eae62eb16cad0558650ab 100644 (file)
--- a/web_src/css/repository.css
+++ b/web_src/css/repository.css
@@ -214,6 +214,10 @@
   font-size: 1.2em;
 }
 
+.repository.file.list .repo-path {
+  word-break: break-word;
+}
+
 .repository.file.list .repo-path .section,
 .repository.file.list .repo-path .divider {
   display: inline;

diff --git a/web_src/css/user.css b/web_src/css/user.css
index adf865496be3691f988ce780bad79f301ed41a8b..a3379440dfe663ae876e5983cd406c04b7deb78f 100644 (file)
--- a/web_src/css/user.css
+++ b/web_src/css/user.css
@@ -67,6 +67,11 @@
   margin-top: 25px;
 }
 
+.user.profile .ui.repository.list .repo-title .labels {
+  word-break: normal;
+  flex-shrink: 0;
+}
+
 .user.profile #loading-heatmap {
   margin-bottom: 1em;
 }