Sync bruno-api-docs(oc-docs) updates from opencollection - #3
Merged
Conversation
…139) * feat(oc-docs): resizable, collapsible docs and playground sidebars Both sidebars can be drag-resized from their right edge (200-480px, sessionStorage-persisted per tab, restored on reload). Dragging past the min collapses the sidebar VS Code-style; dragging back within the same held gesture re-expands it, with the resize cursor held throughout. Adds useResizableSidebar (sessionStorage width + collapse threshold) and extends useDockResize with a leading edge and collapse/expand handoff on window listeners so the drag survives the handle unmounting. * feat(oc-docs): highlight sidebar resize handle on hover and drag Draws a 2px border2 line on the resize handle while hovered or actively dragging (kept lit for the whole held gesture via data-dragging, so it does not flicker when the pointer outruns the handle at max width). No transition, so the highlight tracks fast hover changes during a resize. * refactor(oc-docs): reuse areaFor and read stored sidebar width once Export areaFor from useStorage and call it from useResizableSidebar instead of a duplicated SSR guard. Memoise the initial stored-width read so it does not re-run on every render (once per pointer move during a drag). Use the --z-sidebar token for the playground resizer z-index to match AppShell. * perf(oc-docs): coalesce sidebar/dock resize width writes to one per frame Route the drag width update through requestAnimationFrame (cancel-prior) so multiple pointermoves in a frame trigger at most one setSize, instead of a re-render per dispatched move. Collapse/expand stay synchronous so their timing is unchanged; the pending frame is cancelled on unmount. * test(oc-docs): e2e for sidebar resize, collapse-on-overdrag and persist Cover both sidebars: drag to widen, clamp at max, persist width across reload (sessionStorage), overshoot-to-collapse with reopen, and re-expand within the same held drag. Adds resize drag helpers to the sidebar and playground page-object components. * test(oc-docs): hoist e2e resize drag helpers into BaseComponent Move the shared grab / movePointerToX / releasePointer trio (and the drag-y state) onto BaseComponent so the sidebar and playground page objects no longer duplicate them; each keeps only its handle-specific grab wrapper. * style(oc-docs): use rem for sidebar resize handle dimensions Address PR review: express the resize handle width, offset and hover line in rem instead of px, matching the repo's rem-based sizing.
* fix(oc-docs): tighten playground dock switcher padding to 1px * fix(oc-docs): widen sidebar selected-item highlight left pad to 8px
* Make a common component for No content text
… the examples (#146) * UI fix for heading and breadcrumb truncation * Removed Try button from examples
… state (#144) * fix(oc-docs): polish playground example heading and add empty request state Render the example heading as the example name followed by a muted ' / Example' suffix, and reduce the name to 13px. Show a 'No headers, body, auth, variables, or scripts configured for this request.' message in the Request pane when an example has no params, headers or body. * aligned Query heading with nearby content * drag bar padding to 1rem as per figma * drag bar margin to 1rem as per figma
arpit-bruno
force-pushed
the
sync/opencollection-updates
branch
from
July 23, 2026 13:27
ec58380 to
f32d085
Compare
…app (#141) * feat(oc-docs): match playground method dropdown and url bar to Bruno app Align the playground query bar's HTTP method control with the Bruno app for visual parity: - Method dropdown items now render as MethodBadge (bold, mono, uppercase, method-coloured) instead of plain text, matching the trigger badge. - Constrain the method dropdown surface to 110-150px width, tighten item spacing (line-height, padding, margin) and surface padding. - Match the dropdown surface background and border to the query bar (app base background and --border-color) so it blends in dark mode. - Left-align the dropdown to the url box border with a 1px gap below it via Tippy offset. - Abbreviate long methods in the url bar trigger (DELETE -> DEL, OPTIONS -> OPT) through a new MethodBadge `short` prop. - Reduce the method trigger's left/right padding to match the docs url bar. * refactor(oc-docs): move method dropdown styling out of shared MenuDropdown Address review: the method-menu-dropdown overrides lived in the shared MenuDropdown StyledWrapper. Move them to QueryBar via an Emotion Global so the query-bar-specific styling is owned by QueryBar. A Global is used (rather than QueryBar's nested StyledWrapper) because the dropdown surface is portaled to <body>, so a nested selector can't reach it. * fix(oc-docs): raise method dropdown item selector specificity The method-menu-dropdown item overrides tied the base .dropdown-item selector (0,2,0) and lost on source order, so items fell back to the shared padding. Qualify with .dropdown to win the cascade. * Improve the implementation in MenuDropdown * style(oc-docs): add 2px top gap to compact method dropdown * refactor(oc-docs): address review on MethodBadge - Use the cx util for className composition instead of a manual filter/join. - Assert MethodBadge short-mode output by rendered text (strip markup) rather than matching the raw HTML string. --------- Co-authored-by: Vineet Sharma <vineet@usebruno.com>
… (#147) * Change the color of texts/ checkbox to the background color
* Changed the tab component and resued the same from the app
…gination polish (#149) * fix(oc-docs): full-height playground editors, uniform tab padding, pagination polish - Body/Tests/Scripts editors in the request pane now fill the available height (opt-in fillHeight prop; folder/collection settings keep their fixed-height editors) and stop 1rem above the pane bottom - request-pane tab panel scrolls internally so its padding-bottom is honoured on long content and the tab row stays fixed - add uniform 1rem bottom padding to every playground tab panel from a single parent rule (request/folder/collection), resetting nested tabs - pagination (PrevNext): inner padding 8px across breakpoints and bump the request-name line-height so descenders are no longer clipped * fix(oc-docs): consistent playground page spacing and headings - Uniform page spacing across all playground pages (request, folder, collection, environments, example, and WS/GraphQL/gRPC): 1.25rem left padding and 1.25rem top so every page's content starts at the same edge - All page headings now render through the shared TitleLabel component at a single size/weight (theme md, 14px, 600) with a consistent line-height so titles look the same and their glyph tops align; the taller line-height also stops descenders (y, g, p) being clipped - Heading-to-tabs spacing lives on the heading; removed the top margin previously on the tabs beneath folder and collection headings - Markdown blockquote (the Note callout) is vertically centred: the last paragraph's bottom margin is dropped so top and bottom padding match - Example page heading no longer shows the "/ Example" suffix - Removed the now-unused style classes (collection title, env title, example name suffix) * test(oc-docs): e2e coverage for fill-height request editors - Add data-testids to the Body and Tests editors so all three fill-height editors are locatable - Add a Playwright spec asserting the Body, Tests and pre-request Script editors stretch to fill the request pane, ending ~1rem above its bottom
arpit-bruno
marked this pull request as ready for review
July 23, 2026 20:08
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
5 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Brings the oc-docs changes merged on opencollection after the extraction cut into this repo.
TODO before this merges: