Improve mobile layout of MR widget

What does this MR do and why?

Describe in detail what your merge request does and why.

This MR fixes #374303 (closed) and improves the mobile view of the Merge request widget Deployment area:

• Truncate the long environment name in deployment widget
• Improve paddings for a mobile view

Screenshots or screen recordings

Mobile

before	after

Desktop

before	after

How to set up and validate locally

1. Ensure .gitlab-ci.yml file in your test project contains something like the following job definitions:

deploy_review:
  stage: deploy
  script:
    - echo "Deploy a review app"
  environment:
    name: review/$CI_COMMIT_REF_SLUG
    url: https://$CI_ENVIRONMENT_SLUG.example.com
    on_stop: stop_review

stop_review:
  script: 
    - echo "Stop a review app"
  stage: deploy
  environment:
    name: review/$CI_COMMIT_REF_SLUG
    action: stop
  rules:
    - if: $CI_MERGE_REQUEST_ID
      when: manual

2. Create a branch with a very long name in that project
3. You should be able to see the deployment widget

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.