feat: move recording selector position #413
Conversation
| </> | ||
| )} | ||
| <RecordingSelector /> | ||
| <Flex align="center" justify="between" gap="2"> |
There was a problem hiding this comment.
The only change here was wrapping the content in this Flex component to achieve responsiveness.
| @@ -65,7 +65,10 @@ export function RecordingSelector() { | |||
| id="recording-selector" | |||
| placeholder="Select recording" | |||
| css={css` | |||
| width: 250px; | |||
| width: 200px; | |||
There was a problem hiding this comment.
Now that we have more horizontal space, I'd expect it to be wider rather than narrower than before, because with the addition of the starting URL in recording names, the names became even longer.
There was a problem hiding this comment.
I was mainly trying to keep things concise on the right side of the top bar, but given that names now can be longer, it makes sense to make it wider.
| /> | ||
| </> | ||
| )} | ||
| <RecordingSelector /> |
There was a problem hiding this comment.
I think the + button might be a bit confusing with this new placement: it's not immediately clear if it's a part of the recording selected, the save generator button, or something else entirely. Perhaps we can add a gap/margin so that the hierarchy is clearer?
There was a problem hiding this comment.
I considered using a vertical divider as an alternative, but I kept the extra margin so it's easier to manage in smaller resolutions.
Description
This PR moves the Recording dropdown from the "Requests" tab in the Preview section to the top bar on the Generator page.
How to Test
Checklist
npm run lint) and all checks pass.npm test) and all tests pass.Screenshots (if appropriate):
Smaller window size:
Related PR(s)/Issue(s)
Resolves #317