Skip to content

The vehicleCardHeader component is not visible on UI #373

Description

@cyator

Bug

The vehicleCardHeader component is not visible on UI

On the dashboard, the vehicleCardHeader component (which displays the vehicle VIN, "Vehicle Service History" button, and "Contact Mechanic" button) is successfully is completely hidden from the user interface.

To Reproduce

  1. Log into the crAPI application.
  2. Add a new vehicle or navigate to the dashboard with an existing vehicle.
  3. Look at the vehicle card at the top. The vehicle image and details are visible, but the header containing the VIN and action buttons is missing.
  4. Inspect the DOM to see that the ant-page-header-heading is rendered but pushed out of view due to the .ant-card-meta-title constraints.
Image

Expected behavior

The vehicle's VIN and action buttons ("Vehicle Service History", "Contact Mechanic") should be fully visible at the top of the vehicle card.

Suggested fix

the <Meta> wrapper can be removed in services/web/src/components/dashboard/dashboard.tsx and the header/content placed directly inside the body:

diff
- <Meta
-   title={vehicleCardHeader(
-     vehicle,
-     handleVehicleServiceClick,
-     handleContactMechanic,
-   )}
-   description={vehicleCardContent(vehicle)}
- />
+ {vehicleCardHeader(
+   vehicle,
+   handleVehicleServiceClick,
+   handleContactMechanic,
+ )}
+ {vehicleCardContent(vehicle)

Runtime Environment

OS: Windows
Docker version: [e.g. Docker version 29.6.1
Browser: [Chrome 150.0.7871.101, Edge Version 150.0.4078.65]

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions