fix(ui): Fix version, environment, and uptime visibility in navbar

[kiyeonjeon21]

Description

#26485 introduced flex-nowrap on the navbar, which causes
version, environment, and uptime to truncate or overlap when
the values are long (e.g. 0.297-uber-native-SNAPSHOT-99dfabf).

Removed flex-nowrap so items can wrap naturally, and gave the
version field flex-basis: 100% so it sits on its own row. Also
dropped text-truncate from the version div. This brings back
the pre-#26485 layout while keeping cluster tag support.

Resolves: #26895

Test plan

• ESLint passes with no new errors
• All 199 existing UI tests pass (6 suites)

Release Notes

== RELEASE NOTES ==
General Changes
* Fix version, environment, and uptime values being truncated in the Web UI navbar.

[sourcery-ai]

Reviewer's guide (collapsed on small PRs)

Reviewer's Guide

Adjusts the navbar layout to restore full visibility of version, environment, and uptime by allowing wrapping and giving the version block its own row while preserving cluster tag support.

Flow diagram for updated navbar layout and flex behavior

flowchart LR
  Navbar[Navbar container]
  CollapseDiv["div id=navbar
navbar-collapse collapse min-width-0"]
  NavList["ul.nav navbar-nav navbar-right
class: gap-3 justify-content-end align-items-center min-width-0 flex-grow-1
behavior: flex-wrap (default)"]
  VersionItem["li.flex-basis-100 min-width-0
Version block occupies full row"]
  ClusterInfoDiv["div.navbar-cluster-info"]
  VersionLabel["div.uppercase
label: Version"]
  VersionValue["div.text id=version-number
title=nodeVersion.version
no text-truncate (full value visible)"]

  Navbar --> CollapseDiv --> NavList --> VersionItem --> ClusterInfoDiv --> VersionLabel
  ClusterInfoDiv --> VersionValue

  subgraph Previous_layout_behavior
    OldNavList["ul with flex-nowrap
Items forced on a single line"]
    OldVersionItem["li.flex-basis-40
Version shares row with other items"]
    TruncatedText["div.text.text-truncate
Version may be truncated"]
  end

  OldNavList --> OldVersionItem --> TruncatedText

  subgraph New_layout_behavior
    NewNavList["ul without flex-nowrap
Items can wrap across lines"]
    NewVersionItem["li.flex-basis-100
Version takes entire row"]
    FullText["div.text (no truncate)
Full version visible"]
  end

  NewNavList --> NewVersionItem --> FullText

Loading

File-Level Changes

Change	Details	Files
Update navbar flex layout so items can wrap and the version section occupies its own row.	Remove flex-nowrap from the navbar so items can wrap instead of truncating/overlapping Adjust the version to use a full-width flex basis and drop flex-grow to control alignment and wrapping Remove text-truncate from the version text so the full version string is visible	presto-ui/src/components/PageTitle.tsx
Add a reusable flex utility class to support full-width flex-basis for navbar items.	Introduce .flex-basis-100 CSS class with flex-basis: 100% for layout control Retain existing .flex-basis-40 class for other flex items	presto-ui/src/static/assets/presto.css

Assessment against linked issues

Issue	Objective	Addressed	Explanation
#26895	Ensure the version, environment, and uptime values in the Presto UI navbar are fully visible (not truncated/overlapping), restoring the pre-regression layout behavior.	✅

Possibly linked issues

• Presto UI version/enviroment/uptime are not correctly visible #26895: The PR removes flex-nowrap and text truncation so version, environment, and uptime display correctly, resolving the issue.

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey - I've found 1 issue, and left some high level feedback:

• Consider making the new .flex-basis-100 behavior responsive (e.g., only on smaller breakpoints) so that on wider screens the version block doesn’t unnecessarily occupy a full row when there is ample horizontal space.
• Removing flex-nowrap solves the truncation, but it may introduce awkward multi-line wrapping for the rest of the navbar content; you might want to test and, if needed, constrain wrapping to specific items (like the version block) rather than the entire ul.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- Consider making the new `.flex-basis-100` behavior responsive (e.g., only on smaller breakpoints) so that on wider screens the version block doesn’t unnecessarily occupy a full row when there is ample horizontal space.
- Removing `flex-nowrap` solves the truncation, but it may introduce awkward multi-line wrapping for the rest of the navbar content; you might want to test and, if needed, constrain wrapping to specific items (like the version block) rather than the entire `ul`.

## Individual Comments

### Comment 1
<location path="presto-ui/src/static/assets/presto.css" line_range="278-280" />
<code_context>
     min-width: 0;
 }

+.flex-basis-100 {
+    flex-basis: 100%;
+}
+
</code_context>
<issue_to_address>
**suggestion (bug_risk):** Consider aligning `.flex-basis-100` behavior with `.flex-basis-40` by adding `min-width: 0`.

Without `min-width: 0`, elements using `.flex-basis-100` may not shrink properly in flex layouts and could overflow their container. Adding it here would prevent that and keep behavior consistent with the other `flex-basis-*` utilities.

```suggestion
.flex-basis-100 {
    flex-basis: 100%;
    min-width: 0;
}
```
</issue_to_address>

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[steveburnett]

Please add a release note - or NO RELEASE NOTE - following the Release Notes Guidelines to pass the failing but not required CI check.

[yhwang]

Hi @kiyeonjeon21, thanks for the changes. I tried out your changes today and here are my thoughts:

• Having a dedicated row for version seems too much for me. When the version string is lengthy, it may look fine. However, when the version is not long, it still occupies a row. How about using flex-basis: auto; for the 4 elements: version, env, uptime, and tags. So they will expand and wrap flexibly.
• Use justify-content-start in the container ul to make the new row(s) have left alignment.
• Replace gap-3 of the ul with navbar-custom-gap - Custom gap with column-gap: 1rem and row-gap: 0px. I don't think we need raw-gap, but you can tweak the settings to see how it looks. The reason I propose this is that gap-3 creates too much space between rows. I don't think we need raw-gap for these 4 elements

How do you think?