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

Author: wxiaoguang

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}}"

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>

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;
 }
 

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;
-}

web_src/css/index.css

@@ -82,5 +82,6 @@
 @import "./review.css";
 @import "./actions.css";
 
-@tailwind utilities;
 @import "./helpers.css";
+
+@tailwind utilities;

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;