Fix and/or comment some legacy CSS problems (#33015)

6 files changed, 13 insertions, 27 deletions

diff --git a/templates/repo/branch/list.tmpl b/templates/repo/branch/list.tmpl
index 5484024ff8..cb504e2b75 100644
--- a/templates/repo/branch/list.tmpl
+++ b/templates/repo/branch/list.tmpl
@@ -29,7 +29,8 @@
 								</div>
 								<p class="info tw-flex tw-items-center tw-my-1">{{svg "octicon-git-commit" 16 "tw-mr-1"}}<a href="{{.RepoLink}}/commit/{{PathEscape .DefaultBranchBranch.DBBranch.CommitID}}">{{ShortSha .DefaultBranchBranch.DBBranch.CommitID}}</a> · <span class="commit-message">{{ctx.RenderUtils.RenderCommitMessage .DefaultBranchBranch.DBBranch.CommitMessage (.Repository.ComposeMetas ctx)}}</span> · {{ctx.Locale.Tr "org.repo_updated"}} {{DateUtils.TimeSince .DefaultBranchBranch.DBBranch.CommitTime}}{{if .DefaultBranchBranch.DBBranch.Pusher}} &nbsp;{{template "shared/user/avatarlink" dict "user" .DefaultBranchBranch.DBBranch.Pusher}}{{template "shared/user/namelink" .DefaultBranchBranch.DBBranch.Pusher}}{{end}}</p>
 							</td>
-							<td class="right aligned middle aligned overflow-visible">
+							{{/* FIXME: here and below, the tw-overflow-visible is not quite right but it is still needed the moment: to show the important buttons when the width is narrow */}}
+							<td class="right aligned middle aligned tw-overflow-visible">
 								{{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted)}}
 									<button class="btn interact-bg show-create-branch-modal tw-p-2"
 										data-modal="#create-branch-modal"
@@ -148,7 +149,8 @@
 									{{end}}
 								{{end}}
 							</td>
-							<td class="three wide right aligned overflow-visible">
+							{{/* FIXME: here and above, the tw-overflow-visible is not quite right */}}
+							<td class="three wide right aligned tw-overflow-visible">
 								{{if and $.IsWriter (not $.Repository.IsArchived) (not .DBBranch.IsDeleted)}}
 									<button class="btn interact-bg tw-p-2 show-modal show-create-branch-modal"
 										data-branch-from="{{.DBBranch.Name}}"
diff --git a/templates/repo/settings/options.tmpl b/templates/repo/settings/options.tmpl
index 1a7884bde2..21eaf6a651 100644
--- a/templates/repo/settings/options.tmpl
+++ b/templates/repo/settings/options.tmpl
@@ -733,7 +733,7 @@
 						<span class="field">
 							{{if .CodeIndexerStatus}}
 								<a rel="nofollow" class="ui sha label" href="{{.RepoLink}}/commit/{{.CodeIndexerStatus.CommitSha}}">
-									<span class="shortsha">{{ShortSha .CodeIndexerStatus.CommitSha}}</span>
+									{{ShortSha .CodeIndexerStatus.CommitSha}}
 								</a>
 							{{else}}
 									<span>{{ctx.Locale.Tr "repo.settings.admin_indexer_unindexed"}}</span>
@@ -752,7 +752,7 @@
 					<span class="field">
 						{{if and .StatsIndexerStatus .StatsIndexerStatus.CommitSha}}
 							<a rel="nofollow" class="ui sha label" href="{{.RepoLink}}/commit/{{.StatsIndexerStatus.CommitSha}}">
-								<span class="shortsha">{{ShortSha .StatsIndexerStatus.CommitSha}}</span>
+								{{ShortSha .StatsIndexerStatus.CommitSha}}
 							</a>
 						{{else}}
 							<span>{{ctx.Locale.Tr "repo.settings.admin_indexer_unindexed"}}</span>
diff --git a/web_src/css/base.css b/web_src/css/base.css
index e67d51bb4d..d6ab5e1009 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -928,7 +928,8 @@ strong.attention-caution, svg.attention-caution {
   color: var(--color-red-dark-1);
 }
 
-.center:not(.popup) {
+/* FIXME: this is a longstanding dirty patch since 2015, it only makes the pages more messy and shouldn't be used */
+.center {
   text-align: center;
 }
 
diff --git a/web_src/css/explore.css b/web_src/css/explore.css
index 5cdee823c0..968a103ce9 100644
--- a/web_src/css/explore.css
+++ b/web_src/css/explore.css
@@ -1,13 +1,4 @@
-.explore .secondary-nav {
-  border-width: 1px !important;
-}
-
-.explore .secondary-nav .svg {
-  width: 16px;
-  text-align: center;
-  margin-right: 5px;
-}
-
+/* FIXME: need to refactor the repo branches list page and move these styles to proper place */
 .ui.repository.branches .info {
   font-size: 12px;
   color: var(--color-text-light);
@@ -20,12 +11,3 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
-
-.ui.repository.branches .overflow-visible {
-  overflow: visible;
-}
-
-/* fix alignment of PR popup in branches table */
-.ui.repository.branches table .ui.popup {
-  text-align: left;
-}
diff --git a/web_src/css/index.css b/web_src/css/index.css
index 02513aebc1..ce1a23b245 100644
--- a/web_src/css/index.css
+++ b/web_src/css/index.css
@@ -82,5 +82,6 @@
 @import "./review.css";
 @import "./actions.css";
 
-@tailwind utilities;
 @import "./helpers.css";
+
+@tailwind utilities;
diff --git a/web_src/css/modules/navbar.css b/web_src/css/modules/navbar.css
index b5bc95b058..b60d25977d 100644
--- a/web_src/css/modules/navbar.css
+++ b/web_src/css/modules/navbar.css
@@ -103,11 +103,11 @@
 #navbar .ui.dropdown .navbar-profile-admin {
   display: block;
   position: absolute;
-  font-size: 10px;
+  font-size: 9px;
   font-weight: var(--font-weight-bold);
   color: var(--color-nav-bg);
   background: var(--color-primary);
-  padding: 2px 4px;
+  padding: 2px 3px;
   border-radius: 10px;
   top: -1px;
   left: 18px;