bug: Content Overflow in Buttons, Especially on Mobile

[ottodevs]

👤 User Story

As a user of the Pool application, I want all button content to be fully visible and properly formatted, especially on mobile devices, so that I can easily understand and interact with the application.

📝 Bug Description

Content overflow is occurring in buttons, particularly on mobile devices. This affects the readability and aesthetics of the UI, especially noticeable in start time buttons and potentially other UI elements.

🔄 Steps to Reproduce

1. Open the Pool application on a mobile device.
2. Navigate to pages with buttons, particularly those with start time information.
3. Observe buttons where the text content overflows or is cut off.

🎯 Expected Behavior

• All button content should be fully visible without overflow.
• Buttons should have a minimum width to ensure content visibility.
• Text within buttons should wrap appropriately if it exceeds the button width.
• The UI should maintain a consistent and aesthetically pleasing appearance across all device sizes.

📸 Screenshots or GIFs

No response

📘 Additional Context

• This issue primarily affects the mobile version of the application but should be addressed for all screen sizes.
• Implementing a min-width for buttons might help ensure content visibility.
• Consider using responsive design techniques to adjust button sizes and text wrapping based on screen size.

🔗 Related Issues

No response

👥 Mention

No response