diff --git a/frontend/src/pages/ImportWizard.jsx b/frontend/src/pages/ImportWizard.jsx index d61142e0..84206e72 100644 --- a/frontend/src/pages/ImportWizard.jsx +++ b/frontend/src/pages/ImportWizard.jsx @@ -422,7 +422,7 @@ function ImportWizard() { {i < stepperIndex ? - {label} + {label} ))} diff --git a/frontend/src/styles/pages/_import-wizard.scss b/frontend/src/styles/pages/_import-wizard.scss index 755258ee..9fed0b3e 100644 --- a/frontend/src/styles/pages/_import-wizard.scss +++ b/frontend/src/styles/pages/_import-wizard.scss @@ -5,7 +5,6 @@ .import-wizard { max-width: 960px; margin: 0 auto; - padding: $space-6; display: flex; flex-direction: column; gap: $space-6; @@ -31,6 +30,13 @@ padding: 0; list-style: none; overflow-x: auto; + + // Phones: only the current step keeps its label, so all five fit. + @media (max-width: $breakpoint-md) { + justify-content: space-between; + gap: $space-1; + overflow-x: visible; + } } &__step { @@ -62,6 +68,13 @@ } } + @media (max-width: $breakpoint-md) { + gap: $space-1; + padding: $space-1 $space-2; + + &:not(.is-active) .import-wizard__step-label { display: none; } + } + // Connector between steps & + &::before { content: ''; @@ -69,6 +82,8 @@ height: 1px; margin-right: $space-2; background: $border-default; + + @media (max-width: $breakpoint-md) { display: none; } } } @@ -93,6 +108,8 @@ border: 1px solid $border-subtle; border-radius: $radius-overlay; padding: $space-6; + + @media (max-width: $breakpoint-md) { padding: $space-4; } } &__actions {