Our team currently lacks a designer and the developers along with the PO must handle some UI/UX decisions.

We are defining a process that involves a modal that includes a big form split into three steps. The goal is for the user to understand the current step of the wizard-like process. My colleague handling this proposed the following to choose from (first draft, whitespace to be tweaked).

### Stepper is shown on the same row

[![Poup with stepper on the same row](https://i.stack.imgur.com/p6LfK.png)](https://i.stack.imgur.com/p6LfK.png)

### Stepper is shown below the modal title

[![Poup with stepper below the title](https://i.stack.imgur.com/rI5BU.png)](https://i.stack.imgur.com/rI5BU.png)

I favored the second option because the title becomes less visible and there is an inconsistency between top-left and top-right (quite a different height difference between the elements).

I would favor the first option only if vertical space becomes an issue (we are trying to avoid scrollbars in modals).

The rest of the team favored the first option arguing that it looks nice.

I am wondering a designer's perspective when designing such UI.