fix: secret row hover menu positioning

[rohan-chaturvedi]

🔍 Overview

A small styling pass on the single-env secret row's hover action menus (the key/value field toolbars). Fixes a few rough edges: a sub-pixel gap between the menu and the input, the menu not blending correctly when a field is focused rather than hovered, inconsistent button sizing across breakpoints, and a long comment pushing the key menu wider than the key input.

💡 Proposed Changes

• Positioning: anchor the menus by their bottom edge (bottom-full) so they sit flush with the input's top edge regardless of text size — removes the 1–2px gap visible at smaller breakpoints.
• Focus state: the menu already appeared on focus-within, but the background/corner blend and the focus ring only worked on hover. Matched the input background + squared the top-right corner on focus, and moved the focus ring onto the value textarea so it's actually visible.
• Responsive sizing: the key menu (type toggle, Tags, Comment) now collapses labels to icons below 2xl, matching the value menu, and all buttons share a consistent py-0.5 2xl:py-1 rhythm.
• Comment truncation: the key menu is capped at the key input width and the comment truncates with an ellipsis (with an overflow-hidden backstop), so a long comment can no longer overflow the key column.
• Added an opt-in buttonWrapperClass prop to GenericDialog (default no-op) so the comment trigger can shrink within the flex row.

🖼️ Screenshots or Demo

Screencast.From.2026-07-01.19-02-42.mp4

📝 Release Notes

Polished the secret row hover menus: menus align flush with the field, blend correctly on focus, size consistently across breakpoints, and long comments no longer overflow the key column.

💚 Did You…

• Verify types pass? — tsc --noEmit clean; dev server compiles clean
• Ensure linting passes?
• Manually test on different browsers/devices?