[69677] Project creation modal: Screen overflow on mobile

[HDinger]

Ticket

https://community.openproject.org/wp/69677

What are you trying to accomplish?

Hide the progress bar on very small screens to gain more space for the buttons

Screenshots

[myabc]

Unfortunately this isn't fully responsive.

With a viewport width of around 600 pixels, the progress label ("X of X" text wraps - which doesn't look good.

This can be fixed quickly by using Primer::Beta::Truncate rather than Primer::Beta::Text in app/components/step_wizard/footer_component.html.erb:

          <%= render(Primer::Beta::Truncate.new(tag: :div, font_size: :small, color: :muted)) do %>
            <%= I18n.t("projects.wizard.progress_label", current: current_step, total: total_steps) %>
          <% end %>

[HDinger]

Unfortunately this isn't fully responsive.

With a viewport width of around 600 pixels, the progress label ("X of X" text wraps - which doesn't look good.

This can be fixed quickly by using Primer::Beta::Truncate rather than Primer::Beta::Text in app/components/step_wizard/footer_component.html.erb:

          <%= render(Primer::Beta::Truncate.new(tag: :div, font_size: :small, color: :muted)) do %>
            <%= I18n.t("projects.wizard.progress_label", current: current_step, total: total_steps) %>
          <% end %>

afaik, this was done intentionally back then, so I'd leave it like this for now