## Context
More action button should be flushed to the right here
<img width="294" height="156" alt="image"
src="https://github.com/user-attachments/assets/65017960-3edb-4268-bb0e-1e2c26937d4b"
/>
## Changes involved
- Adjust `Menu.Item` in `packages/ui` to use a `div` instead of a `span`
- Was otherwise causing HTML validation issues as we were trying to nest
a `div` within a `span`
- Having a `div` is a bit more flexible as well since `Menu.Item`
expects `children` to be of any type (e.g a react node)
<img width="279" height="149" alt="image"
src="https://github.com/user-attachments/assets/12730cef-b077-4ef4-93c9-c21def939888"
/>
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Standardized the Observability menu component to use named exports,
ensuring consistent usage across the app.
* Updated the mobile observability menu registration to reference the
correct exported component.
* **Style**
* Refined Observability menu item layout, spacing, truncation, and
dropdown sizing for a cleaner presentation.
* Enhanced menu item rendering to allow custom `className` styling and
full-width content layout.
* **Accessibility**
* Added an aria-label to the “more actions” button for improved screen
reader support.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
## Problem
Our `<Button>` component breaks the default `button` contract by
redefining the `type` prop to set its variant (`primary`, `default`,
etc) instead of the button type (`submit`, `button`, etc).
This is confusing and forces to write more code when using it with
shadcn components that expect/inject the standard button props.
## Solution
- rename the `type` prop to `variant`
- rename the `htmlType` prop to `type`
- propagate the changes where necessary
- format code
## How to test
As this is just prop renaming, if it builds it's ok
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
## What kind of change does this PR introduce?
UI polish.
## What is the current behavior?
- A few product sidebar areas render menu rows outside the shared
ProductMenu/Menu.Item styling path, so their hover and selected states
differ from the rest of Studio.
- Database product menu shortcut tooltips are also scoped to the text
label instead of the full hoverable row.
## What is the new behavior?
- Integrations Explore/Installed, Observability, and Reports sidebar
rows now use the shared ProductMenu or Menu.Item pill styling.
- Observability spacing is tightened after the ProductMenu conversion.
- Product menu shortcut tooltips now wrap the full row trigger, so the
entire Database sidebar row opens the tooltip.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Enhanced navigation menu components with improved loading and error
state handling across the dashboard.
* Streamlined menu structure and styling consistency for integrations,
reports, and observability sections.
* Added enhanced tooltip support for navigation items.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
* feat: rename reports to observability on nav sidebar
* fix: observability route
* feat: observability navigation and redirects
* fix: first time load redirects
* feat: change auth overview reports link
* feat: clean up of other links to observability sections
* fix: query perf redirects
* chore: find exhaustive deps and disable for time being
* fix: charis suggested fixes
* fix: forgotten suggested fix
* chore: delete old reports views files
* fix: paths in reports tests
* fix: url sync useEffect should trigger only once
* feat: reorganise observability sidebar
* fix: data api not being selected
* fix: wrong layout for realitime
* fix: custom reports reloading
---------
Co-authored-by: Charis Lam <26616127+charislam@users.noreply.github.com>
Co-authored-by: Ali Waseem <waseema393@gmail.com>
Joshen Lim