Implement header for workspace details page with workspace name and status badge
MR: Pending <!-- NOTE: For context on MR heading, see: https://handbook.gitlab.com/handbook/engineering/devops/dev/create/remote-development/index.html#relationship-of-issues-to-mrs --> ## Description To [improve the workspace failure visibility & troubleshooting](https://gitlab.com/groups/gitlab-org/-/epics/16787), we need to implement a basic header for the workspace details page so that users can immediately identify the workspace name and its current status when viewing the details page. This component will be later improved to include other workspace details in https://gitlab.com/gitlab-org/gitlab/-/issues/565421+ ## Visual Changes ![image](/uploads/587171e6ae3018422b1635c929f6b4f3/image.png) ## Acceptance criteria - [ ] Display workspace name prominently in the header - [ ] Show workspace status in a colored badge (e.g., "Failed", "Running", "Stopped") - [ ] Status badge uses appropriate color coding matching existing workspace list patterns - [ ] Header layout is responsive and works across different screen sizes ## Implementation plan - Add header component to workspace details page layout - Display the workspace name prominently in the header - Add workspace status badge component reusing logic from [workspaces-table vue component](https://gitlab.com/gitlab-org/gitlab/-/blob/65e5387ed5666ce74fdd0c3beea2366e9f0d9f2a/ee/app/assets/javascripts/workspaces/common/components/workspaces_list/workspaces_table.vue#L52-L60) - Test header display with different workspace states and names - Ensure responsive design works on mobile and tablet viewports <!-- NOTE: Feel free to expand with more sections and headers as needed --> <!-- DO NOT TOUCH BELOW -->
issue