fix: responsive

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;
     }
   }

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;

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;
     }
   }

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;
     }
   }