[CSS] Server status popup isn't readable and causes width overflow

[jorgepazp]

Description
On the server resources page (Servers > [server] > Resources), a warning icon appears next to a server resource. When hovering over the warning icon, a popup with a message appears, but the message is not fully readable because it causes a width overflow and cannot be scrolled horizontally.
Steps to reproduce

1. Have a resource on a server with the warning (the warning is visible for my nextjs projects)
2. Hover over the warning

Current Behavior
The popup width always exceeds the page's width, causing it to overflow, and it cannot be fully read in a normal scenario.
Expected Behavior
The popup should appear within the viewport, ensuring that the message is fully readable without causing overflow.
Example unreadable popup

Further thoughts
I managed to address the issue by hardcoding right: 0; in the browser's developer tools. This ensures that the absolute-positioned popup is readable at the edge of the screen. Here is a potential fix that involves adding a popupclass attribute to the component:

1. Update the x-helper file (resources/views/components/helper.blade.php) Add the popupclass attribute to handle specific styling for the popup itself:

<div class="info-helper-popup {{ $attributes->get('popupclass') }}">
       <div class="p-4">
           {!! $helper !!}
       </div>
   </div>

2. Use the popupclass Attribute in the view(resources/views/components/status/running.blade.php) Update the x-helper usage to include the popupclass:

... <x-helper popupclass="right-0" ...> ...</x-helper>

Result

Further considerations
I haven't been able to test this fix locally, so additional validation is required to ensure it behaves correctly across all cases. Specifically, we should consider the possibility of the popup being used in different cases and make a more flexible popup component

You can check code changes in this diff