Feature - mobile responsiveness of order timeline and footer layouts #122

[suhaniiz]

Overview

This Pull Request addresses issue #122 by fixing the mobile responsiveness of the active orders dashboard page (orders.html). Previously, the tracking timeline layout and card footer were optimized for desktop displays but became cramped, misaligned, or truncated on narrow mobile viewports.

Changes Made

• Order Timeline (.order-timeline): Added a CSS media query for viewports under 768px to transition the main flex layout direction from row to column, allowing steps to stack cleanly.
• Timeline Steps (.timeline-step): Adjusted internal alignment to a clean horizontal row structure (Circle next to Label) on mobile viewports for effortless tracking.
• Progress Connectors (.timeline-line): Re-oriented the absolute timeline indicator bars to function as a unified vertical track running behind the stage indicators.
• Card Footer (.order-card-footer): Configured the total order pricing text and action buttons to stack vertically on mobile to prevent overlapping layout breaks.

Impact / Benefits

• Clean, responsive tracking experience across mobile devices (tested down to a 320px screen width).
• Enhanced overall layout continuity and readable element typography on the orders tracking portal.

Screenshots

Below are screenshots showing how the changes would appear on an iPhone 12 Pro.

Closes Issue - #122

[PatelHarsh2006]

@suhaniiz Add screenshots of the Visual changes made in the Webpages, as mentioned in Readme, also Resolve conflicts by Syncing current Branch

[suhaniiz]

@PatelHarsh2006 , I’ve implemented all the requested changes, added the screenshots of the visual updates in the webpages as mentioned in the README, and resolved the conflicts by syncing the current branch. Please review when convenient.