From 3e7101dd64e4cd5d9ecfd4dbe0c991aacf99bf87 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Tue, 2 May 2023 00:08:37 +0800
Subject: [PATCH] Improve "new-menu" (#24465)

I am not sure what "new-menu" means, but I think we need to fix these
problems:

1. it shouldn't have "stackable", which makes the items stacked when
width is small. the `new-menu` already has `overflow: auto`
2. `justify-content: center` doesn't work with `overflow: auto` (for
small width), so use `margin: auto`
*
https://bhch.github.io/posts/2021/04/centring-flex-items-and-allowing-overflow-scroll/
3. `runner-new-menu` is dead code (copying & pasting ?)
---
 templates/explore/navbar.tmpl                 | 2 +-
 templates/repo/diff/image_diff.tmpl           | 2 +-
 templates/user/auth/signup_openid_navbar.tmpl | 2 +-
 web_src/css/base.css                          | 7 ++++++-
 web_src/css/explore.css                       | 1 -
 web_src/css/runner.css                        | 4 ----
 6 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/templates/explore/navbar.tmpl b/templates/explore/navbar.tmpl
index 29eaa1e8c6..3a23df6992 100644
--- a/templates/explore/navbar.tmpl
+++ b/templates/explore/navbar.tmpl
@@ -1,4 +1,4 @@
-<div class="ui secondary pointing tabular top attached borderless stackable menu new-menu navbar">
+<div class="ui secondary pointing tabular top attached borderless menu new-menu navbar">
 	<a class="{{if .PageIsExploreRepositories}}active {{end}}item" href="{{AppSubUrl}}/explore/repos">
 		{{svg "octicon-repo"}} {{.locale.Tr "explore.repos"}}
 	</a>
diff --git a/templates/repo/diff/image_diff.tmpl b/templates/repo/diff/image_diff.tmpl
index fba02ad78f..ec14ef9b1a 100644
--- a/templates/repo/diff/image_diff.tmpl
+++ b/templates/repo/diff/image_diff.tmpl
@@ -2,7 +2,7 @@
 <tr>
 	<td colspan="2">
 		<div class="image-diff" data-path-before="{{.root.BeforeRawPath}}/{{PathEscapeSegments .file.OldName}}" data-path-after="{{.root.RawPath}}/{{PathEscapeSegments .file.Name}}">
-			<div class="ui secondary pointing tabular top attached borderless menu stackable new-menu">
+			<div class="ui secondary pointing tabular top attached borderless menu new-menu">
 				<div class="new-menu-inner">
 					<a class="item active" data-tab="diff-side-by-side-{{.file.Index}}">{{.root.locale.Tr "repo.diff.image.side_by_side"}}</a>
 					{{if and .blobBase .blobHead}}
diff --git a/templates/user/auth/signup_openid_navbar.tmpl b/templates/user/auth/signup_openid_navbar.tmpl
index 5d444125a7..f52c3ed6a0 100644
--- a/templates/user/auth/signup_openid_navbar.tmpl
+++ b/templates/user/auth/signup_openid_navbar.tmpl
@@ -1,4 +1,4 @@
-<div class="ui secondary pointing tabular top attached borderless menu stackable new-menu navbar">
+<div class="ui secondary pointing tabular top attached borderless menu new-menu navbar">
 	<div class="new-menu-inner">
 		<a class="{{if .PageIsOpenIDConnect}}active {{end}}item" href="{{AppSubUrl}}/user/openid/connect">
 			{{.locale.Tr "auth.openid_connect_title"}}
diff --git a/web_src/css/base.css b/web_src/css/base.css
index e10d3d1213..d7870cd2b5 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -1915,7 +1915,7 @@ img.ui.avatar,
 }
 
 .ui.menu.new-menu .item {
-  margin: 0 !important;
+  margin-bottom: 0 !important; /* reset fomantic's margin, because the active menu has special bottom border */
 }
 
 @media (max-width: 767px) {
@@ -1924,8 +1924,13 @@ img.ui.avatar,
   }
 }
 
+.ui.menu.new-menu .item:first-child {
+  margin-left: auto; /* "justify-content: center" doesn't work with "overflow: auto", so use margin: auto */
+}
+
 .ui.menu.new-menu .item:last-child {
   padding-right: 30px !important;
+  margin-right: auto;
 }
 
 .ui.menu.new-menu::-webkit-scrollbar {
diff --git a/web_src/css/explore.css b/web_src/css/explore.css
index e3f9dddc58..b79f27200c 100644
--- a/web_src/css/explore.css
+++ b/web_src/css/explore.css
@@ -1,5 +1,4 @@
 .explore .navbar {
-  justify-content: center;
   margin-bottom: 15px !important;
   background-color: var(--color-navbar) !important;
   border-width: 1px !important;
diff --git a/web_src/css/runner.css b/web_src/css/runner.css
index 0d7415d18b..31da79cabf 100644
--- a/web_src/css/runner.css
+++ b/web_src/css/runner.css
@@ -32,10 +32,6 @@
   color: var(--color-white) !important;
 }
 
-.runner-container .runner-new-menu {
-  width: 300px;
-}
-
 .runner-container .task-status-success {
   background-color: var(--color-green);
   color: var(--color-white);