Deployment details page is not mobile friendly

Description

Deployment Details page for the environment does not render well on mobile screens:

Steps to reproduce

1. Create a project and add the following .gitlab-ci.yaml file

   stages:
       - deploy
   image: alpine:latest
   
   deploy-prod:
       stage: deploy
       script:
           - sleep 10
           - echo "deploying prod"
       environment:
           name: production
           url: postgres://example.com
       when: manual
   
   deploy-staging:
       stage: deploy
       script:
           - echo "deploying staging"
       environment:
           name: staging
           url: https://example.com
       when: manual

2. Run the pipeline to create an environment and deployments.

3. Enable the feature flag deployment_details_page

4. Locate your deployment on Operate -> Environments -> Production

5. Click on the status badge to open the Deployment details page

6. Resize browser window to small size or turn on mobile emulation in the browser's dev tools

Proposal

See the UX Proposal in the designs section.

Implementation guide

There's a deployment_aside component that is working well on the desktops. We are going to update this component to act as a collapsible sidebar on mobiles and tablets.

To fix the layout for smaller screens:

1. Update show_deployment component.
   Currently, the main content has gl-w-9/10 class to separate the content from the sidebar on the desktop. We can simplify this by removing the gl-w-9/10 class and adding lg:gl-pr-5 to the container instead.
2. Fix deployment_header component by adding gl-flex-wrap to the content container.

To create a collapsible sidebar:

Work with deployment_aside component.

Important: the component will serve both collapsible sidebar for mobiles and static sidebar for desktops. Make sure to check it still works as expected on both and handles the resize.

Example of a similar implementation for reference: issuable_sidebar_root

1. Add a toggle button similar to the issuable_sidebar_root

   • the button should have tertiary category when the sidebar is expanded and secondary category when the sidebar is collapsed. Use computed for this.
   • the button should be hidden on desktops. Use lg:gl-hidden class for this.
   • the button should be left-aligned. We can use a combination of gl-flex and gl-ml-auto classes for this.
   • the icon, title, and aria-label should be updated accordingly to the sidebar state. This logic is similar to the reference.

2. Add styles to the aside element (this is suggestion, there might be better options):

   • we can have gl-p-4 by default
   • no extra styles for the desktop
   • gl-shadow-md right-sidebar right-sidebar-expanded for sidebar expanded
   • gl-fixed gl-right-0 for sidebar collapsed

3. When the sidebar is expanded, the content should be separated into 3 sections. Use proper padding and border for this (gl-border-b-solid gl-border-b-1 gl-border-gray-100). Make sure to remove the borders for desktop.

4. Handle resizes similar to how it's done in the reference:

   • window.addEventListener('resize', this.handleWindowResize); on mount
   • window.removeEventListener('resize', this.handleWindowResize); before destroy

5. Update the related tests.