diff --git a/src/features/auth/components/studentRegister/PersonalInformation.vue b/src/features/auth/components/studentRegister/PersonalInformation.vue index a8c6876..f629be3 100644 --- a/src/features/auth/components/studentRegister/PersonalInformation.vue +++ b/src/features/auth/components/studentRegister/PersonalInformation.vue @@ -305,19 +305,18 @@ store.updateCurrentStep(STUDENT_REGISTRATION.PERSONAL_INFORMATION) } &__avatar-col { - order: 2; + // Uploader stays first: top of the stack on mobile, left column on desktop. + order: 1; @media (min-width: 1024px) { - order: 1; padding: 0.5rem; } } &__main-col { - order: 1; + order: 2; @media (min-width: 1024px) { - order: 2; padding-inline-start: 1.25rem; } } diff --git a/src/features/auth/components/studentRegister/SideBarSteps.vue b/src/features/auth/components/studentRegister/SideBarSteps.vue index a7da842..5014167 100644 --- a/src/features/auth/components/studentRegister/SideBarSteps.vue +++ b/src/features/auth/components/studentRegister/SideBarSteps.vue @@ -62,12 +62,15 @@ const logoPinkishRed = gallery.logoPinkishRed background: var(--color-primary); border-radius: 1rem; padding: 0.75rem; - height: 100%; display: flex; align-items: center; gap: 1rem; @media (min-width: 1024px) { + // Fill the full-height column only on desktop; on mobile the panel is a + // content-height bar, so height:100% would overflow past the logo above it + // and collide with the page heading. + height: 100%; flex-direction: column; align-items: center; gap: 1.5rem; diff --git a/src/features/auth/components/studentRegister/SkillAssessmentPart6.vue b/src/features/auth/components/studentRegister/SkillAssessmentPart6.vue index 85b81a0..b7c4a66 100644 --- a/src/features/auth/components/studentRegister/SkillAssessmentPart6.vue +++ b/src/features/auth/components/studentRegister/SkillAssessmentPart6.vue @@ -89,19 +89,18 @@ store.updateCurrentStep(STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_6) } &__media-col { - order: 2; + // Recorder/uploader stays first: top of the stack on mobile, left on desktop. + order: 1; @media (min-width: 1024px) { - order: 1; padding: 0.5rem; } } &__content-col { - order: 1; + order: 2; @media (min-width: 1024px) { - order: 2; padding-inline-start: 1.25rem; } } diff --git a/src/features/auth/components/studentRegister/SkillAssessmentPart7.vue b/src/features/auth/components/studentRegister/SkillAssessmentPart7.vue index d8c2e3a..324ea55 100644 --- a/src/features/auth/components/studentRegister/SkillAssessmentPart7.vue +++ b/src/features/auth/components/studentRegister/SkillAssessmentPart7.vue @@ -97,19 +97,18 @@ store.updateCurrentStep(STUDENT_REGISTRATION.SKILL_ASSESSMENT_PART_7) } &__media-col { - order: 2; + // Recorder/uploader stays first: top of the stack on mobile, left on desktop. + order: 1; @media (min-width: 1024px) { - order: 1; padding: 0.5rem; } } &__content-col { - order: 1; + order: 2; @media (min-width: 1024px) { - order: 2; padding-inline-start: 1.25rem; } }