From d42015e6eb382058ad915a7a5a5789424bb53014 Mon Sep 17 00:00:00 2001
From: Hester Gong <hestergong@gmail.com>
Date: Sun, 19 Mar 2023 00:07:59 +0800
Subject: [PATCH] Fix long name ui issues and label ui issue  (#23541)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 templates/explore/repo_list.tmpl | 2 +-
 templates/repo/pulls/fork.tmpl   | 2 +-
 web_src/css/explore.css          | 5 +++++
 web_src/css/form.css             | 7 ++++---
 web_src/css/repository.css       | 4 ++++
 web_src/css/user.css             | 5 +++++
 6 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/templates/explore/repo_list.tmpl b/templates/explore/repo_list.tmpl
index 6650e6073fcf..288313c7d452 100644
--- 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 930d5afa69b2..34adc7b2f1d5 100644
--- 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 854370225247..e3f9dddc5868 100644
--- 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 e325a377f8d8..324a210f4f97 100644
--- 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 d2040ec0ac56..2708cf4d4793 100644
--- 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 adf865496be3..a3379440dfe6 100644
--- 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;
 }