diff --git a/src/lib/elements/forms/inputURL.svelte b/src/lib/elements/forms/inputURL.svelte
index 560314410f..8ea497448f 100644
--- a/src/lib/elements/forms/inputURL.svelte
+++ b/src/lib/elements/forms/inputURL.svelte
@@ -15,6 +15,7 @@
     export let autocomplete = false;
     export let maxlength: number = null;
     export let leadingIcon: ComponentType | undefined = undefined;
+    export let helper: string = undefined;
 
     let error: string;
 
@@ -52,7 +53,7 @@
     type="url"
     autofocus={autofocus || undefined}
     autocomplete={autocomplete ? 'on' : 'off'}
-    helper={error}
+    helper={error || helper}
     state={error ? 'error' : 'default'}
     on:invalid={handleInvalid}
     on:input
diff --git a/src/lib/helpers/tooltipContent.ts b/src/lib/helpers/tooltipContent.ts
new file mode 100644
index 0000000000..101d776e7b
--- /dev/null
+++ b/src/lib/helpers/tooltipContent.ts
@@ -0,0 +1,7 @@
+export const BODY_TOOLTIP_MAX_WIDTH = 'min(22rem, calc(100vw - 2rem))';
+
+export const BODY_TOOLTIP_WRAPPER_STYLE =
+    'min-width: 0; max-width: 100%; overflow-wrap: break-word; white-space: normal';
+
+export const BODY_TOOLTIP_WRAPPER_STYLE_PRELINE =
+    'min-width: 0; max-width: 100%; overflow-wrap: break-word; white-space: pre-line';
diff --git a/src/lib/layout/containerButton.svelte b/src/lib/layout/containerButton.svelte
index c331c2eb74..370abfe349 100644
--- a/src/lib/layout/containerButton.svelte
+++ b/src/lib/layout/containerButton.svelte
@@ -1,5 +1,9 @@
 <script lang="ts">
     import { Button } from '$lib/elements/forms';
+    import {
+        BODY_TOOLTIP_MAX_WIDTH,
+        BODY_TOOLTIP_WRAPPER_STYLE
+    } from '$lib/helpers/tooltipContent';
     import { organization } from '$lib/stores/organization';
     import { Tooltip } from '@appwrite.io/pink-svelte';
     import { BillingPlanGroup } from '@appwrite.io/console';
@@ -23,7 +27,7 @@
     export let buttonType: 'primary' | 'secondary' | 'text' = 'primary';
 </script>
 
-<Tooltip disabled={!disabled}>
+<Tooltip disabled={!disabled} maxWidth={BODY_TOOLTIP_MAX_WIDTH}>
     <Button
         size="s"
         text={buttonType === 'text'}
@@ -38,5 +42,5 @@
         {/if}
         <span class="text">{buttonText}</span>
     </Button>
-    <div slot="tooltip">{tooltipContent}</div>
+    <div slot="tooltip" style={BODY_TOOLTIP_WRAPPER_STYLE}>{tooltipContent}</div>
 </Tooltip>
diff --git a/src/routes/(console)/account/organizations/+page.svelte b/src/routes/(console)/account/organizations/+page.svelte
index 2ed7d57dc3..4d748e1e15 100644
--- a/src/routes/(console)/account/organizations/+page.svelte
+++ b/src/routes/(console)/account/organizations/+page.svelte
@@ -17,6 +17,10 @@
     import type { Models } from '@appwrite.io/console';
     import { daysLeftInTrial, billingIdToPlan } from '$lib/stores/billing';
     import { toLocaleDate } from '$lib/helpers/date';
+    import {
+        BODY_TOOLTIP_MAX_WIDTH,
+        BODY_TOOLTIP_WRAPPER_STYLE
+    } from '$lib/helpers/tooltipContent';
     import { goto } from '$app/navigation';
     import { Icon, Tooltip, Typography } from '@appwrite.io/pink-svelte';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
@@ -132,29 +136,30 @@
                                     {#await planName}
                                         <Skeleton width={30} height={20} variant="line" />
                                     {:then name}
-                                        <Tooltip>
+                                        <Tooltip maxWidth={BODY_TOOLTIP_MAX_WIDTH}>
                                             <Badge size="xs" variant="secondary" content={name} />
 
-                                            <span slot="tooltip">
+                                            <div slot="tooltip" style={BODY_TOOLTIP_WRAPPER_STYLE}>
                                                 You are limited to 1 free organization per account
-                                            </span>
+                                            </div>
                                         </Tooltip>
                                     {/await}
                                 {/if}
                             {/if}
 
                             {#if isOrganizationOnTrial(organization)}
-                                <Tooltip>
+                                <Tooltip maxWidth={BODY_TOOLTIP_MAX_WIDTH}>
                                     <div class="u-flex u-cross-center">
                                         <Badge
                                             class="eyebrow-heading-3"
                                             variant="secondary"
                                             content="TRIAL" />
                                     </div>
-                                    <span slot="tooltip"
-                                        >{`Your trial ends on ${toLocaleDate(
+                                    <div slot="tooltip" style={BODY_TOOLTIP_WRAPPER_STYLE}>
+                                        {`Your trial ends on ${toLocaleDate(
                                             organization.billingStartDate
-                                        )}. ${$daysLeftInTrial} days remaining.`}</span>
+                                        )}. ${$daysLeftInTrial} days remaining.`}
+                                    </div>
                                 </Tooltip>
                             {/if}
 
diff --git a/src/routes/(console)/organization-[organization]/+page.svelte b/src/routes/(console)/organization-[organization]/+page.svelte
index b022f8f879..7e8582095d 100644
--- a/src/routes/(console)/organization-[organization]/+page.svelte
+++ b/src/routes/(console)/organization-[organization]/+page.svelte
@@ -35,6 +35,10 @@
     } from '@appwrite.io/pink-icons-svelte';
     import type { PageProps } from './$types';
     import { getPlatformInfo } from '$lib/helpers/platform';
+    import {
+        BODY_TOOLTIP_MAX_WIDTH,
+        BODY_TOOLTIP_WRAPPER_STYLE
+    } from '$lib/helpers/tooltipContent';
     import CreateProjectCloud from './createProjectCloud.svelte';
     import { regions as regionsStore } from '$lib/stores/organization';
 
@@ -147,16 +151,16 @@
 
         {#if $canWriteProjects}
             {#if projectCreationDisabled && reachedProjectLimit}
-                <Tooltip placement="bottom">
+                <Tooltip placement="bottom" maxWidth={BODY_TOOLTIP_MAX_WIDTH}>
                     <div>
                         <Button event="create_project" disabled>
                             <Icon icon={IconPlus} slot="start" size="s" />
                             Create project
                         </Button>
                     </div>
-                    <span slot="tooltip">
+                    <div slot="tooltip" style={BODY_TOOLTIP_WRAPPER_STYLE}>
                         You have reached your limit of {projectsLimit} projects.
-                    </span>
+                    </div>
                 </Tooltip>
             {:else}
                 <Button
diff --git a/src/routes/(console)/organization-[organization]/domains/domain-[domain]/createRecordModal.svelte b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/createRecordModal.svelte
index f313f70732..5e80c9bde3 100644
--- a/src/routes/(console)/organization-[organization]/domains/domain-[domain]/createRecordModal.svelte
+++ b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/createRecordModal.svelte
@@ -99,7 +99,7 @@
         </Layout.Stack>
 
         <InputText id="value" label="Value" {placeholder} bind:value required>
-            <Tooltip slot="info">
+            <Tooltip slot="info" maxWidth="fit-content">
                 <Icon icon={IconInfo} size="s" />
                 <span slot="tooltip">
                     Enter the target or destination for this DNS record (e.g., IP address, hostname,
@@ -111,10 +111,10 @@
             <InputNumber id="ttl" label="TTL" placeholder="Enter number" bind:value={ttl}>
                 <Tooltip slot="info">
                     <Icon icon={IconInfo} size="s" />
-                    <span slot="tooltip">
+                    <div style="white-space: pre-line;" slot="tooltip">
                         TTL defines how long DNS information is cached. Lower values update faster;
                         higher values reduce server load.
-                    </span>
+                    </div>
                 </Tooltip>
             </InputNumber>
             {#if showPriority(type)}
diff --git a/src/routes/(console)/organization-[organization]/header.svelte b/src/routes/(console)/organization-[organization]/header.svelte
index d80dfb0639..3aedaf7dbf 100644
--- a/src/routes/(console)/organization-[organization]/header.svelte
+++ b/src/routes/(console)/organization-[organization]/header.svelte
@@ -5,6 +5,10 @@
     import { AvatarGroup, Tab, Tabs } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { toLocaleDate } from '$lib/helpers/date';
+    import {
+        BODY_TOOLTIP_MAX_WIDTH,
+        BODY_TOOLTIP_WRAPPER_STYLE
+    } from '$lib/helpers/tooltipContent';
     import { isTabSelected } from '$lib/helpers/load';
     import { Cover } from '$lib/layout';
     import { daysLeftInTrial, getServiceLimit, readOnly } from '$lib/stores/billing';
@@ -110,12 +114,14 @@
                     {/if}
 
                     {#if organization?.billingTrialStartDate && $daysLeftInTrial > 0 && organization.billingPlanDetails.trial && organization?.billingTrialDays}
-                        <Tooltip>
+                        <Tooltip maxWidth={BODY_TOOLTIP_MAX_WIDTH}>
                             <Badge variant="secondary" content="Trial" />
                             <svelte:fragment slot="tooltip">
-                                {`Your trial ends on ${toLocaleDate(
-                                    organization.billingStartDate
-                                )}. ${$daysLeftInTrial} days remaining.`}
+                                <div style={BODY_TOOLTIP_WRAPPER_STYLE}>
+                                    {`Your trial ends on ${toLocaleDate(
+                                        organization.billingStartDate
+                                    )}. ${$daysLeftInTrial} days remaining.`}
+                                </div>
                             </svelte:fragment>
                         </Tooltip>
                     {/if}
@@ -139,7 +145,10 @@
                     {/if}
 
                     {#if $isOwner}
-                        <Tooltip disabled={!areMembersLimited} placement="bottom-end">
+                        <Tooltip
+                            disabled={!areMembersLimited}
+                            placement="bottom-end"
+                            maxWidth={BODY_TOOLTIP_MAX_WIDTH}>
                             <div>
                                 <Button
                                     secondary
@@ -150,7 +159,7 @@
                                     Invite
                                 </Button>
                             </div>
-                            <div slot="tooltip">
+                            <div slot="tooltip" style={BODY_TOOLTIP_WRAPPER_STYLE}>
                                 {!(
                                     organization?.billingPlanDetails?.addons?.seats?.supported ??
                                     true
diff --git a/src/routes/(console)/organization-[organization]/members/+page.svelte b/src/routes/(console)/organization-[organization]/members/+page.svelte
index cdd4c98519..d422cfb810 100644
--- a/src/routes/(console)/organization-[organization]/members/+page.svelte
+++ b/src/routes/(console)/organization-[organization]/members/+page.svelte
@@ -7,6 +7,10 @@
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import Upgrade from '$lib/components/roles/upgrade.svelte';
     import { getServiceLimit, readOnly, getRoleLabel } from '$lib/stores/billing';
+    import {
+        BODY_TOOLTIP_MAX_WIDTH,
+        BODY_TOOLTIP_WRAPPER_STYLE
+    } from '$lib/helpers/tooltipContent';
     import { addNotification } from '$lib/stores/notifications';
     import { currentPlan, newMemberModal, organization } from '$lib/stores/organization';
     import { isOwner } from '$lib/stores/roles';
@@ -78,7 +82,10 @@
 <Container>
     <Layout.Stack direction="row" justifyContent="space-between">
         <Typography.Title>Members</Typography.Title>
-        <Tooltip disabled={!isButtonDisabled} placement="bottom-end">
+        <Tooltip
+            disabled={!isButtonDisabled}
+            placement="bottom-end"
+            maxWidth={BODY_TOOLTIP_MAX_WIDTH}>
             <div>
                 <ConsoleButton
                     size="s"
@@ -89,7 +96,7 @@
                     <span class="text">Invite</span>
                 </ConsoleButton>
             </div>
-            <div slot="tooltip">
+            <div slot="tooltip" style={BODY_TOOLTIP_WRAPPER_STYLE}>
                 {!supportsMembers
                     ? 'Upgrade to add more members'
                     : `You've reached the members limit for the ${$organization?.billingPlanDetails.name} plan`}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/+page.svelte
index 6140f5e2e9..f78f44b830 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/+page.svelte
@@ -18,6 +18,10 @@
     import EmptySearch from '$lib/components/emptySearch.svelte';
     import { isServiceLimited } from '$lib/stores/billing';
     import { organization } from '$lib/stores/organization';
+    import {
+        BODY_TOOLTIP_MAX_WIDTH,
+        BODY_TOOLTIP_WRAPPER_STYLE_PRELINE
+    } from '$lib/helpers/tooltipContent';
 
     import { resolveRoute } from '$lib/stores/navigation';
 
@@ -61,7 +65,7 @@
         view={data.view}
         searchPlaceholder="Search by name or ID">
         {#if $canWriteDatabases}
-            <Tooltip disabled={!isLimited}>
+            <Tooltip disabled={!isLimited} maxWidth={BODY_TOOLTIP_MAX_WIDTH}>
                 <div>
                     <Button
                         disabled={isLimited}
@@ -72,7 +76,7 @@
                     </Button>
                 </div>
                 <svelte:fragment slot="tooltip">
-                    <div style="white-space: pre-line;">
+                    <div style={BODY_TOOLTIP_WRAPPER_STYLE_PRELINE}>
                         You have reached the maximum number of databases for your plan.
                     </div>
                 </svelte:fragment>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/+page.svelte b/src/routes/(console)/project-[region]-[project]/functions/+page.svelte
index bcf39b756e..27f3d057a3 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/+page.svelte
@@ -16,6 +16,10 @@
     import { isServiceLimited } from '$lib/stores/billing';
     import { organization } from '$lib/stores/organization';
     import { wizard } from '$lib/stores/wizard';
+    import {
+        BODY_TOOLTIP_MAX_WIDTH,
+        BODY_TOOLTIP_WRAPPER_STYLE_PRELINE
+    } from '$lib/helpers/tooltipContent';
 
     import { parseExpression } from 'cron-parser';
     import { onMount } from 'svelte';
@@ -101,7 +105,7 @@
     <Layout.Stack direction="row" justifyContent="space-between">
         <SearchQuery placeholder="Search by name or ID" />
 
-        <Tooltip disabled={!isLimited}>
+        <Tooltip disabled={!isLimited} maxWidth={BODY_TOOLTIP_MAX_WIDTH}>
             <div>
                 <Button disabled={isLimited} href={createFunctionsUrl}>
                     <Icon icon={IconPlus} slot="start" />
@@ -109,7 +113,7 @@
                 </Button>
             </div>
             <svelte:fragment slot="tooltip">
-                <div style="white-space: pre-line;">
+                <div style={BODY_TOOLTIP_WRAPPER_STYLE_PRELINE}>
                     You have reached the maximum number of functions for your plan.
                 </div>
             </svelte:fragment>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/+page.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/+page.svelte
index b1b9e7f6ef..8cce6b5c19 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/+page.svelte
@@ -2,6 +2,10 @@
     import { invalidate } from '$app/navigation';
     import { Empty, EmptyFilter, PaginationWithLimit } from '$lib/components';
     import { Dependencies } from '$lib/constants';
+    import {
+        BODY_TOOLTIP_MAX_WIDTH,
+        BODY_TOOLTIP_WRAPPER_STYLE_PRELINE
+    } from '$lib/helpers/tooltipContent';
     import { Button } from '$lib/elements/forms';
     import { Container, ResponsiveContainerHeader } from '$lib/layout';
     import { realtime } from '$lib/stores/sdk';
@@ -27,7 +31,7 @@
 
 <Container>
     <ResponsiveContainerHeader hasFilters {columns} hideView analyticsSource="function_executions">
-        <Tooltip disabled={!!data.func?.deploymentId}>
+        <Tooltip disabled={!!data.func?.deploymentId} maxWidth={BODY_TOOLTIP_MAX_WIDTH}>
             <div>
                 <Button
                     event="execute_function"
@@ -37,9 +41,9 @@
                     Create execution
                 </Button>
             </div>
-            <span slot="tooltip">
+            <div slot="tooltip" style={BODY_TOOLTIP_WRAPPER_STYLE_PRELINE}>
                 Execution cannot be created because there is no active deployment.
-            </span>
+            </div>
         </Tooltip>
     </ResponsiveContainerHeader>
 
@@ -63,7 +67,7 @@
                     event="empty_documentation"
                     size="s"
                     ariaLabel="create execution">Documentation</Button>
-                <Tooltip disabled={!!data.func?.deploymentId}>
+                <Tooltip disabled={!!data.func?.deploymentId} maxWidth={BODY_TOOLTIP_MAX_WIDTH}>
                     <div>
                         <Button
                             secondary
@@ -73,9 +77,9 @@
                             Create execution
                         </Button>
                     </div>
-                    <span slot="tooltip">
+                    <div slot="tooltip" style={BODY_TOOLTIP_WRAPPER_STYLE_PRELINE}>
                         Execution cannot be created because there is no active deployment.
-                    </span>
+                    </div>
                 </Tooltip>
             </svelte:fragment>
         </Empty>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/action.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/action.svelte
index f08d2f0cc7..740f792ebb 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/action.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/action.svelte
@@ -14,13 +14,17 @@
     import { isServiceLimited } from '$lib/stores/billing';
     import { organization } from '$lib/stores/organization';
     import { page } from '$app/state';
+    import {
+        BODY_TOOLTIP_MAX_WIDTH,
+        BODY_TOOLTIP_WRAPPER_STYLE_PRELINE
+    } from '$lib/helpers/tooltipContent';
 
     $: isLimited = isServiceLimited('platforms', $organization, page.data.platforms.total);
 </script>
 
 {#if $canWritePlatforms}
     {#if isLimited}
-        <Tooltip>
+        <Tooltip maxWidth={BODY_TOOLTIP_MAX_WIDTH}>
             <div>
                 <Button disabled>
                     <Icon icon={IconPlus} slot="start" />
@@ -29,7 +33,7 @@
             </div>
 
             <svelte:fragment slot="tooltip">
-                <div style="white-space: pre-line;">
+                <div style={BODY_TOOLTIP_WRAPPER_STYLE_PRELINE}>
                     You have reached the maximum number of platforms for your plan in a project.
                 </div>
             </svelte:fragment>
diff --git a/src/routes/(console)/project-[region]-[project]/settings/webhooks/+page.svelte b/src/routes/(console)/project-[region]-[project]/settings/webhooks/+page.svelte
index 4a2f324ae2..3667ce4224 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/webhooks/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/webhooks/+page.svelte
@@ -18,6 +18,10 @@
     import { goto } from '$app/navigation';
     import { isServiceLimited } from '$lib/stores/billing';
     import { organization } from '$lib/stores/organization';
+    import {
+        BODY_TOOLTIP_MAX_WIDTH,
+        BODY_TOOLTIP_WRAPPER_STYLE_PRELINE
+    } from '$lib/helpers/tooltipContent';
 
     export let data: PageData;
 
@@ -39,7 +43,7 @@
     <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
         <ViewSelector ui="new" {columns} view={View.Table} hideView />
         {#if $canWriteWebhooks}
-            <Tooltip disabled={!isLimited}>
+            <Tooltip disabled={!isLimited} maxWidth={BODY_TOOLTIP_MAX_WIDTH}>
                 <div>
                     <Button disabled={isLimited} event="create_webhook" href={webhooksCreateUrl}>
                         <Icon icon={IconPlus} slot="start" size="s" />
@@ -47,7 +51,7 @@
                     </Button>
                 </div>
                 <svelte:fragment slot="tooltip">
-                    <div style="white-space: pre-line;">
+                    <div style={BODY_TOOLTIP_WRAPPER_STYLE_PRELINE}>
                         You have reached the maximum number of webhooks for your plan.
                     </div>
                 </svelte:fragment>
diff --git a/src/routes/(console)/project-[region]-[project]/settings/webhooks/create/+page.svelte b/src/routes/(console)/project-[region]-[project]/settings/webhooks/create/+page.svelte
index 3c95e0fed4..672093e9ed 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/webhooks/create/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/webhooks/create/+page.svelte
@@ -49,8 +49,11 @@
                 `${base}/project-${page.params.region}-${page.params.project}/settings/webhooks/${webhook.$id}`
             );
         } catch (error) {
-            trackError(error.message, Submit.DomainCreate);
-            throw new Error(error.message);
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.WebhookCreate);
         }
     }
 </script>
diff --git a/src/routes/(console)/project-[region]-[project]/settings/webhooks/create/step1.svelte b/src/routes/(console)/project-[region]-[project]/settings/webhooks/create/step1.svelte
index e4595151ed..274d114726 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/webhooks/create/step1.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/webhooks/create/step1.svelte
@@ -13,6 +13,7 @@
             label="POST URL"
             id="url"
             placeholder="https://example.com/callback"
+            helper="Must be https (or http) and a public domain — localhost and private URLs are not accepted on Appwrite Cloud."
             bind:value={url}
             required />
     </Layout.Stack>
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/+page.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/+page.svelte
index 45a17fc3bb..2d8db89b04 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/+page.svelte
@@ -10,6 +10,10 @@
     import { realtime } from '$lib/stores/sdk';
     import { invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
+    import {
+        BODY_TOOLTIP_MAX_WIDTH,
+        BODY_TOOLTIP_WRAPPER_STYLE
+    } from '$lib/helpers/tooltipContent';
     import { onMount } from 'svelte';
     import { page } from '$app/state';
     import { base } from '$app/paths';
@@ -44,7 +48,9 @@
                             Visit
                         </Button>
                     {/if}
-                    <Tooltip disabled={data.hasProdReadyDeployments}>
+                    <Tooltip
+                        disabled={data.hasProdReadyDeployments}
+                        maxWidth={BODY_TOOLTIP_MAX_WIDTH}>
                         <div>
                             <Button
                                 secondary
@@ -53,10 +59,10 @@
                                 Instant rollback
                             </Button>
                         </div>
-                        <span slot="tooltip">
+                        <div slot="tooltip" style={BODY_TOOLTIP_WRAPPER_STYLE}>
                             Rollback is possible only if there is a deployment that is ready and was
                             active.
-                        </span>
+                        </div>
                     </Tooltip>
                 {/snippet}
             </SiteCard>
diff --git a/src/routes/(console)/project-[region]-[project]/storage/+page.svelte b/src/routes/(console)/project-[region]-[project]/storage/+page.svelte
index aa629e2003..bc3f408da3 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/storage/+page.svelte
@@ -21,6 +21,10 @@
     import { isServiceLimited } from '$lib/stores/billing';
     import type { PageProps } from './$types';
     import { organization } from '$lib/stores/organization';
+    import {
+        BODY_TOOLTIP_MAX_WIDTH,
+        BODY_TOOLTIP_WRAPPER_STYLE_PRELINE
+    } from '$lib/helpers/tooltipContent';
 
     let { data }: PageProps = $props();
 
@@ -44,7 +48,7 @@
         view={data.view}
         searchPlaceholder="Search by name or ID">
         {#if $canWriteBuckets}
-            <Tooltip disabled={!isLimited}>
+            <Tooltip disabled={!isLimited} maxWidth={BODY_TOOLTIP_MAX_WIDTH}>
                 <div>
                     <Button
                         size="s"
@@ -56,7 +60,7 @@
                     </Button>
                 </div>
                 <svelte:fragment slot="tooltip">
-                    <div style="white-space: pre-line;">
+                    <div style={BODY_TOOLTIP_WRAPPER_STYLE_PRELINE}>
                         You have reached the maximum number of buckets for your plan.
                     </div>
                 </svelte:fragment>