VertiCal > 8 units > wrong click

Problem/Motivation

When the vertical bee hotel layout displays more than 6 units, the two links for availability and price table begin to overlap, causing a cluttered and unreadable user interface. This affects both usability and accessibility, as users may struggle to click the correct link or view information clearly.

Steps to reproduce

Configure a vertical bee hotel with more than 6 units.

View the bee hotel on the front end.

Observe the positioning of the "availability" and "price table" links for units beyond the 6th column.

The two links should remain clearly separated and fully visible for all units, regardless of the number of units displayed.

The links overlap, making them difficult to read and interact with.

• The issue likely stems from fixed or insufficient spacing in the vertical layout’s CSS or template.
• This may affect mobile responsiveness if the overlap worsens on smaller screens.
• Consider testing with different numbers of units (e.g., 7, 10, 15) to see how the overlap progresses.

Proposed resolution

Adjust the CSS or template structure to ensure proper spacing between links, possibly by:

• Increasing the vertical spacing between units.
• Repositioning the links side-by-side with adequate margins.
• Implementing a responsive design to prevent overlap on various screen sizes.