Update the visuals for presenting long job names

What does this MR do and why?

This MR updates the pipeline graph to only truncate long names when they reach two lines. We are already doing it in the pipeline mini-graph on the MR page.

References

• #543735 (closed)

Screenshots or screen recordings

Before	After

How to set up and validate locally

1. Use this .gitlab-ci.yml to create a bunch of jobs with long names:

# GitLab CI/CD Configuration - UI Development Placeholders

stages:
  - preflight

# Simple placeholder jobs for UI development

danger-review:
  stage: preflight
  script:
    - echo "Running danger-review..."
    - sleep 2
    - echo "Danger review completed"

docs_code_quality:
  stage: preflight
  script:
    - echo "Running docs code quality check..."
    - sleep 3
    - echo "Docs code quality check completed"

eslint:
  stage: preflight
  script:
    - echo "Running eslint..."
    - sleep 2
    - echo "ESLint completed"

feature-flags-usage:
  stage: preflight
  script:
    - echo "Checking feature flags usage..."
    - sleep 1
    - echo "Feature flags check completed"

test_job_wakeup_from_hello_world.py::TestHelloWorld::test_hello_world:
  stage: preflight
  script:
    - echo "Running test_job_wakeup_from_hello_world.py::TestHelloWorld::test_hello_world..."
    - sleep 4
    - echo "Test completed"

test_job_wakeup_from_hello_worl.py::TestHelloWorld::test_hello_world_ee:
  stage: preflight
  script:
    - echo "Running test_job_wakeup_from_hello_worl.py::TestHelloWorld::test_hello_world_ee..."
    - sleep 3
    - echo "Test EE completed"

haml-lint:
  stage: preflight
  script:
    - echo "Running haml-lint..."
    - sleep 2
    - echo "HAML lint completed"

haml-lint_ee:
  stage: preflight
  script:
    - echo "Running haml-lint EE..."
    - sleep 2
    - echo "HAML lint EE completed"

data_processing_pipeline.py::DataValidationModule[v2][batch_mode]:
  stage: preflight
  script:
    - echo "Running data_processing_pipeline.py::DataValidationModule[v2][batch_mode]..."
    - sleep 3
    - echo "Data validation v2 completed"

data_processing_pipeline.py::DataValidationModule[v3][batch_mode]:
  stage: preflight
  script:
    - echo "Running data_processing_pipeline.py::DataValidationModule[v3][batch_mode]..."
    - sleep 3
    - echo "Data validation v3 completed"

# Extra long job names for UI testing
test_integration_suite_with_extremely_long_descriptive_name_for_comprehensive_end_to_end_validation.py::TestIntegrationSuite::test_user_authentication_flow_with_multi_factor_authentication_and_session_management:
  stage: preflight
  script:
    - echo "Running very long test..."
    - sleep 2
    - echo "Long test completed"

data_processing_and_transformation_pipeline_with_advanced_etl_operations.py::DataQualityValidationModule[version_4_beta_2][distributed_parallel_processing_mode][with_checkpointing_enabled]:
  stage: preflight
  script:
    - echo "Running data pipeline..."
    - sleep 3
    - echo "Pipeline completed"

test_microservices_communication_layer_with_circuit_breaker_pattern_implementation.py::TestMicroservicesOrchestration::test_service_discovery_and_load_balancing_with_retry_logic_and_timeout_handling:
  stage: preflight
  script:
    - echo "Running microservices test..."
    - sleep 2
    - echo "Test completed"

frontend_component_integration_tests_for_responsive_design_across_multiple_breakpoints.spec.js::ResponsiveDesignTestSuite::test_mobile_tablet_desktop_ultra_wide_screen_layouts_with_dynamic_content_loading:
  stage: preflight
  script:
    - echo "Running frontend tests..."
    - sleep 4
    - echo "Frontend tests completed"

security_vulnerability_scanning_with_dependency_checking_and_static_code_analysis.py::SecurityAuditModule::test_owasp_top_ten_vulnerabilities_sql_injection_xss_csrf_and_authentication_bypass_scenarios:
  stage: preflight
  script:
    - echo "Running security scan..."
    - sleep 3
    - echo "Security scan completed"

# Jobs with parallel/matrix configuration for grouping
test_parallel_suite:
  stage: preflight
  parallel: 5
  script:
    - echo "Running test_parallel_suite job $CI_NODE_INDEX..."
    - sleep 2
    - echo "Test completed"

browser_compatibility_tests:
  stage: preflight
  parallel:
    matrix:
      - BROWSER: ["chrome", "firefox", "safari", "edge"]
        VERSION: ["latest", "latest-1"]
  script:
    - echo "Testing on $BROWSER version $VERSION..."
    - sleep 3
    - echo "Browser test completed"

database_migration_tests:
  stage: preflight
  parallel:
    matrix:
      - DATABASE: ["postgresql", "mysql", "mongodb"]
        VERSION: ["14", "15", "16"]
  script:
    - echo "Testing database $DATABASE version $VERSION..."
    - sleep 2
    - echo "Database test completed"

performance_benchmarks_across_different_configurations_and_environments.py::PerformanceBenchmarkSuite::test_load_stress_endurance_spike_testing:
  stage: preflight
  parallel: 10
  script:
    - echo "Running performance benchmark $CI_NODE_INDEX/10..."
    - sleep 4
    - echo "Benchmark completed"

api_endpoint_integration_tests_with_multiple_authentication_providers.spec.js::APITestSuite::test_oauth_saml_jwt_basic_auth_flows:
  stage: preflight
  parallel:
    matrix:
      - AUTH_PROVIDER: ["oauth2", "saml", "jwt", "basic"]
        API_VERSION: ["v1", "v2", "v3"]
  script:
    - echo "Testing $AUTH_PROVIDER with API $API_VERSION..."
    - sleep 2
    - echo "API test completed"

2. Run a pipeline and visit Build -> Pipelines
3. Select the pipeline and verify that the long job names take 2 lines before truncating.

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #543735 (closed)