Let's fix the positioning of the close button to ensure it's visible and not hidden under other elements.

Here's the revised component with the close button properly positioned:

Here are the changes I've made to fix the issue:

1. Removed the relative positioning from the CardContent.

2. Added a new div at the top of the CardContent to create a header section:

   <div className="flex justify-between items-center mb-4"> <h2 className="text-lg font-semibold">Directions</h2> <Button variant="ghost" size="icon" className="h-8 w-8" onClick={onClose} aria-label="Close directions form" > <X className="h-4 w-4" /> </Button> </div>

   This new div uses flexbox to position the title and close button side by side.

3. Removed the absolute positioning from the close button.
4. Added a title "Directions" to make the purpose of the form clear.
5. Added a small margin (mb-4) to the header section to separate it from the form inputs.

These changes ensure that:

• The close button is now visible and properly positioned in the top-right corner of the card.
• The layout is clean and organized with a clear header section.
• The overall compact design is maintained while improving usability.

This revised version should resolve the visibility issue with the close button while maintaining the functionality and style of the directions form.

I'll modify the component to move the modes of transport to the top and remove the "Directions" heading. This will make the form more compact and put the transport options front and center.

Here's the updated component with the transport modes moved to the top:

Here are the changes I've made:

1. Removed the "Directions" heading.

2. Moved the ToggleGroup for transport modes to the top of the card, replacing the heading:

   <div className="flex justify-between items-center mb-4"> <ToggleGroup type="single" className="justify-start"> <ToggleGroupItem value="car" aria-label="Car"> <Car className="h-4 w-4" /> </ToggleGroupItem> <ToggleGroupItem value="bike" aria-label="Bike"> <Bike className="h-4 w-4" /> </ToggleGroupItem> <ToggleGroupItem value="walk" aria-label="Walk"> <PersonStanding className="h-4 w-4" /> </ToggleGroupItem> </ToggleGroup> <Button variant="ghost" size="icon" className="h-8 w-8 ml-2" onClick={onClose} aria-label="Close directions form" > <X className="h-4 w-4" /> </Button> </div>

3. Adjusted the layout to keep the close button on the right side:

   • Used justify-between to push the close button to the right.
   • Added ml-2 to the close button to give it some space from the transport modes.
4. Kept the ToggleGroup compact by using justify-start instead of justify-center.
5. Maintained the rest of the form structure, including the input fields for starting point and destination, and the "Get Directions" button.

This revised version:

• Puts the transport modes at the top, making them immediately visible and accessible.
• Keeps the close button in the top-right corner for easy access.
• Maintains the compact design of the form.
• Preserves all the functionality of the previous version.

The component remains fully functional and styled consistently with the shadcn/ui library, while meeting the new requirement of having the transport modes at the top of the form.