fix: wrap long query for sql input in search page

[LYHuang]

• add width limit to sql query input
• fix in search page and session page

wrap.mov

Ref: hdx-1655

[changeset-bot]

⚠️ No Changeset found

Latest commit: a5efce1

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
hyperdx-v2-oss-app	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 24, 2025 7:37pm

[Copilot]

Pull Request Overview

This PR addresses the issue of overly long SQL query inputs on the search page by wrapping the SQL query input component in a Box component with a fixed width.

• Wraps SQL query input in a Box with a width set to 75%
• Aims to improve UI consistency and readability for query inputs

[knudtty]

This only fixes it for the search page, but the issue is also present on the sessions page. Is there a way to fix this on the component level?

[LYHuang]

Good call, and I agree with this! However after some attempts, codemirror just too hard to configure, I can only limit the size with parent element.
I will use current approach to fix session page too, and create backlog ticket for this.

[Copilot]

Pull Request Overview

This PR addresses display issues by wrapping long SQL query inputs in both the search and session pages, ensuring that the input fields remain readable.

• Replace Group with Flex in SessionsPage.tsx for improved layout control
• Wrap SQLInlineEditorControlled in a Box with set width in both SessionsPage.tsx and DBSearchPage.tsx
• Apply width limitations to prevent overflow of long SQL queries

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File	Description
packages/app/src/SessionsPage.tsx	Updated layout by replacing Group with Flex and wrapping SQLInlineEditorControlled in a Box with fixed width to manage long queries
packages/app/src/DBSearchPage.tsx	Wrapped SQLInlineEditorControlled in a Box with a 75% width to restrict input width for long queries