diff --git a/resources/css/utilities.css b/resources/css/utilities.css
index c982f9f86..1df8ac836 100644
--- a/resources/css/utilities.css
+++ b/resources/css/utilities.css
@@ -289,7 +289,7 @@ @utility info-helper {
 }
 
 @utility info-helper-popup {
-    @apply hidden absolute z-40 text-xs rounded-sm text-neutral-700 group-hover:block dark:border-coolgray-500 border-neutral-900 dark:bg-coolgray-400 bg-neutral-200 dark:text-neutral-300 max-w-sm whitespace-normal break-words;
+    @apply hidden absolute right-0 z-40 w-max max-w-[min(20rem,calc(100vw-2rem))] text-xs rounded-sm text-neutral-700 group-hover:block dark:border-coolgray-500 border-neutral-900 dark:bg-coolgray-400 bg-neutral-200 dark:text-neutral-300 whitespace-normal break-words;
 }
 
 @utility buyme {
diff --git a/resources/views/components/helper.blade.php b/resources/views/components/helper.blade.php
index 2542839f1..2102e48b1 100644
--- a/resources/views/components/helper.blade.php
+++ b/resources/views/components/helper.blade.php
@@ -1,5 +1,5 @@
 <div x-data="{ open: false }" @click.stop="open = !open" @click.outside="open = false"
-    {{ $attributes->merge(['class' => 'group']) }}>
+    {{ $attributes->merge(['class' => 'group relative inline-block align-middle']) }}>
     <div class="info-helper">
         @isset($icon)
             {{ $icon }}