roos-fs tasks #271
Updated by Vadim Golub 9 months ago
**On the Service Details page, the status indicator (e.g., "Booked") is visually disconnected from the rest of the service metadata (title, description, price). On wide screens, the status floats far to the right, making it easy to miss and breaking the visual grouping of critical service data.** <img style="width: 863px;" src="clipboard-202508061708-mgrcq.png"><br> <img style="width: 1600px;" src="clipboard-202508061709-fxt4d.png"><br> **Required Implementation** The status element should be repositioned or visually restructured to maintain logical grouping and consistent readability across screen sizes. Below are implementation options — final decision up to the design/dev team: *Option A – Move status under the title block* - Place the status badge directly beneath the service name (e.g., under “demo service 04.08”). - Align it left, near the service icon and title. *Option B – Inline with metadata row* - Move the status to be inline with price and update date (as a third item in the row). - Use spacing rules or grid layout to balance it evenly with the others. *Option C – Floating, but bounded* - Keep the status in the right column, but introduce a max-width wrapper. - On wide screens, constrain the status section to max ~400–500px to prevent it from drifting too far right. **Expected Behavior** - Status label is consistently positioned relative to main service information. - On all screen sizes (laptop, desktop, ultra-wide), the status remains easy to spot and logically grouped. - No change to actual status logic or styling, just layout/placement. - Responsive behavior fully supported.