This is an automated email from the ASF dual-hosted git repository.
morningman pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/doris-website.git
The following commit(s) were added to refs/heads/master by this push:
new ee5ef375afb [refactor](next) fix mobile display (#3664)
ee5ef375afb is described below
commit ee5ef375afb920f32a836a7dd01d52077e4d5109
Author: Mingyu Chen (Rayner) <[email protected]>
AuthorDate: Sun May 17 17:50:36 2026 -0700
[refactor](next) fix mobile display (#3664)
---
src/components/home-next/NavbarNext.scss | 70 ++++++++++++++++++++++++++++++--
src/components/home-next/NavbarNext.tsx | 19 +++++----
2 files changed, 77 insertions(+), 12 deletions(-)
diff --git a/src/components/home-next/NavbarNext.scss
b/src/components/home-next/NavbarNext.scss
index 4348172fef0..5481134d3c6 100644
--- a/src/components/home-next/NavbarNext.scss
+++ b/src/components/home-next/NavbarNext.scss
@@ -354,7 +354,7 @@
&__mobile-panel {
position: absolute;
- top: 64px;
+ top: 100%;
left: 0;
right: 0;
z-index: 99;
@@ -462,6 +462,15 @@
&--mobile-open &__mobile-panel {
display: block;
}
+
+ // With nav hidden, push Ask AI + actions to the right together.
+ &__ask-ai {
+ margin-left: auto;
+ }
+
+ &__actions {
+ margin-left: 0;
+ }
}
}
@@ -502,12 +511,67 @@
}
}
-@media (max-width: 390px) {
+// On narrow phones (≤480px): row 1 = Logo (left) + Star + Download + ☰
(right, as a group),
+// row 2 = Ask AI full-width centered.
+// Only minimal padding trimming — no font-size or height overrides.
+@media (max-width: 480px) {
.navbar-next {
+ &.navbar {
+ height: auto;
+ min-height: 64px;
+ }
+
+ &__inner {
+ flex-wrap: wrap;
+ height: auto;
+ padding: 0 10px;
+ column-gap: 5px;
+ row-gap: 0;
+ align-items: center;
+ }
+
+ // Logo link spans the full row-1 height; image slightly smaller to
reclaim space.
+ &__logo {
+ height: 64px;
+ }
+
+ &__logo img {
+ height: 24px;
+ }
+
+ // Trim star-link horizontal padding (only change needed to make
everything fit).
+ &__star-link {
+ padding: 0 8px 0 6px;
+ }
+
+ // Push Star + Download + ☰ together to the right as one group.
&__actions {
- display: none;
+ margin-left: auto;
}
+ // Hamburger follows actions naturally — no extra margin needed.
+ &__menu-button {
+ margin-left: 0;
+ }
+
+ // Ask AI: full-width second row, icon + text centered both axes.
+ &__ask-ai {
+ order: 10;
+ flex: 0 0 100%;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 38px;
+ margin-left: 0;
+ margin-bottom: 10px;
+ padding: 0 12px;
+ }
+ }
+}
+
+@media (max-width: 390px) {
+ .navbar-next {
&__mobile-actions {
display: grid;
gap: 10px;
diff --git a/src/components/home-next/NavbarNext.tsx
b/src/components/home-next/NavbarNext.tsx
index 39b9d46ff55..772a4a4eac0 100644
--- a/src/components/home-next/NavbarNext.tsx
+++ b/src/components/home-next/NavbarNext.tsx
@@ -168,16 +168,17 @@ export function NavbarNext(): JSX.Element {
))}
</div>
+ <button
+ type="button"
+ id="navbar-ask-ai-btn"
+ className="navbar-next__ask-ai"
+ aria-label="Ask AI"
+ >
+ <StarGreenIcon />
+ <span>Ask AI</span>
+ </button>
+
<div className="navbar-next__actions">
- <button
- type="button"
- id="navbar-ask-ai-btn"
- className="navbar-next__ask-ai"
- aria-label="Ask AI"
- >
- <StarGreenIcon />
- <span>Ask AI</span>
- </button>
<a
href={`https://github.com/${GITHUB_REPO}`}
target="_blank"
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
