app/vmui: fix mobile chart, time range, and layout issues

[Loori-R]

Describe Your Changes

• Fixes bar chart touch interactions, including tap, pan, and pinch-to-zoom.
• Prevents manually entered time ranges from shifting after applying them when the selected and local time zones differ.
• Prevents horizontal page scrolling after opening menus on mobile devices.
• Moves the time range control to the mobile header for quicker access.
• Prevents horizontal page scrolling in mobile menus and JSON log views.

[cubic-dev-ai]

All reported issues were addressed across 14 files

<sub>Reply with feedback, questions, or to request a fix.

Re-trigger cubic</sub>

[arturminchukov]

horizontal scroll appears in the JSON tab

Enhacement suggestion:
I'd like to sugget move the time range control from the kebab menu to main screen. Why? Right now, IMO, there is no obvious way we can find this button. It's not related to this PR.

[Loori-R]

horizontal scroll appears in the JSON tab

Enhacement suggestion: I'd like to sugget move the time range control from the kebab menu to main screen. Why? Right now, IMO, there is no obvious way we can find this button. It's not related to this PR.

Updated. I moved the time range control from the menu to the main mobile header and added local scrolling to the JSON tab to prevent horizontal page overflow.

[cubic-dev-ai]

1 issue found across 9 files (changes from recent commits).

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="app/vmui/packages/vmui/src/components/Configurators/TimeRangeSettings/TimeSelector/style.scss">

<violation number="1" location="app/vmui/packages/vmui/src/components/Configurators/TimeRangeSettings/TimeSelector/style.scss:21">
P2: Scrollable content may be hidden behind the fixed-position controls bar at the bottom. The selector container has `overflow: auto` but no `padding-bottom` to account for the controls (~50-60px) that are taken out of flow, so the last items (e.g., TimeDurationSelector) can scroll underneath the fixed bar.</violation>
</file>

<sub>Reply with feedback, questions, or to request a fix.

Re-trigger cubic</sub>

[cubic-dev-ai]

P2: Scrollable content may be hidden behind the fixed-position controls bar at the bottom. The selector container has overflow: auto but no padding-bottom to account for the controls (~50-60px) that are taken out of flow, so the last items (e.g., TimeDurationSelector) can scroll underneath the fixed bar.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At app/vmui/packages/vmui/src/components/Configurators/TimeRangeSettings/TimeSelector/style.scss, line 21:

<comment>Scrollable content may be hidden behind the fixed-position controls bar at the bottom. The selector container has `overflow: auto` but no `padding-bottom` to account for the controls (~50-60px) that are taken out of flow, so the last items (e.g., TimeDurationSelector) can scroll underneath the fixed bar.</comment>

<file context>
@@ -17,6 +17,17 @@
     border-bottom: $border-divider;
     padding-bottom: $padding-global;
+
+    &__controls {
+      position: fixed;
+      right: 0;
</file context>

[arturminchukov]

LGTM!