fix: tooltips and Correct relationship text on many side

Author: HarshMN2345

src/routes/(console)/project-[region]-[project]/databases/+page.svelte

@@ -72,7 +72,9 @@
                     </Button>
                 </div>
                 <svelte:fragment slot="tooltip">
-                    You have reached the maximum number of databases for your plan.
+                    <div style="white-space: pre-line;">
+                        You have reached the maximum number of databases for your plan.
+                    </div>
                 </svelte:fragment>
             </Tooltip>
         {/if}

src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/relationship.svelte

@@ -229,23 +229,36 @@
             </div>
         </Box>
         {#if data.relationType}
+            {@const isManySide =
+                data.side === 'child' && ['oneToMany', 'manyToOne'].includes(data.relationType)}
             <div>
-                <p class="u-text-center">
-                    <b data-private>{camelize(currentTable.name)}</b> can contain {[
-                        'oneToOne',
-                        'manyToOne'
-                    ].includes(data.relationType)
-                        ? 'one'
-                        : 'many'}
-                    <b data-private>{camelize(data.key)}</b>
-                </p>
-                <p class="u-text-center">
-                    <b data-private>{camelize(data.key)}</b>
-                    can belong to {['oneToOne', 'oneToMany'].includes(data.relationType)
-                        ? 'one'
-                        : 'many'}
-                    <b data-private>{camelize(currentTable.name)}</b>
-                </p>
+                {#if isManySide}
+                    <p class="u-text-center">
+                        <b data-private>{camelize(currentTable.name)}</b> can belong to one
+                        <b data-private>{camelize(data.key)}</b>
+                    </p>
+                    <p class="u-text-center">
+                        <b data-private>{camelize(data.key)}</b> can have many
+                        <b data-private>{camelize(currentTable.name)}</b>
+                    </p>
+                {:else}
+                    <p class="u-text-center">
+                        <b data-private>{camelize(currentTable.name)}</b> can contain {[
+                            'oneToOne',
+                            'manyToOne'
+                        ].includes(data.relationType)
+                            ? 'one'
+                            : 'many'}
+                        <b data-private>{camelize(data.key)}</b>
+                    </p>
+                    <p class="u-text-center">
+                        <b data-private>{camelize(data.key)}</b>
+                        can belong to {['oneToOne', 'oneToMany'].includes(data.relationType)
+                            ? 'one'
+                            : 'many'}
+                        <b data-private>{camelize(currentTable.name)}</b>
+                    </p>
+                {/if}
             </div>
         {/if}
     </div>

src/routes/(console)/project-[region]-[project]/functions/+page.svelte

@@ -109,7 +109,9 @@
                 </Button>
             </div>
             <svelte:fragment slot="tooltip">
-                You have reached the maximum number of functions for your plan.
+                <div style="white-space: pre-line;">
+                    You have reached the maximum number of functions for your plan.
+                </div>
             </svelte:fragment>
         </Tooltip>
     </Layout.Stack>

src/routes/(console)/project-[region]-[project]/overview/platforms/action.svelte

@@ -20,7 +20,7 @@
 
 {#if $canWritePlatforms}
     {#if isLimited}
-        <Tooltip maxWidth="200px">
+        <Tooltip>
             <div>
                 <Button disabled>
                     <Icon icon={IconPlus} slot="start" />
@@ -29,7 +29,9 @@
             </div>
 
             <svelte:fragment slot="tooltip">
-                You have reached the maximum number of platforms for your plan in a project.
+                <div style="white-space: pre-line;">
+                    You have reached the maximum number of platforms for your plan in a project.
+                </div>
             </svelte:fragment>
         </Tooltip>
     {:else}

src/routes/(console)/project-[region]-[project]/settings/webhooks/+page.svelte

@@ -39,15 +39,17 @@
     <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
         <ViewSelector ui="new" {columns} view={View.Table} hideView />
         {#if $canWriteWebhooks}
-            <Tooltip disabled={!isLimited} maxWidth="200px">
+            <Tooltip disabled={!isLimited}>
                 <div>
                     <Button disabled={isLimited} event="create_webhook" href={webhooksCreateUrl}>
                         <Icon icon={IconPlus} slot="start" size="s" />
                         Create webhook
                     </Button>
                 </div>
                 <svelte:fragment slot="tooltip">
-                    You have reached the maximum number of webhooks for your plan.
+                    <div style="white-space: pre-line;">
+                        You have reached the maximum number of webhooks for your plan.
+                    </div>
                 </svelte:fragment>
             </Tooltip>
         {/if}

src/routes/(console)/project-[region]-[project]/storage/+page.svelte

@@ -44,7 +44,7 @@
         view={data.view}
         searchPlaceholder="Search by name or ID">
         {#if $canWriteBuckets}
-            <Tooltip disabled={!isLimited} maxWidth="200px">
+            <Tooltip disabled={!isLimited}>
                 <div>
                     <Button
                         size="s"
@@ -56,7 +56,9 @@
                     </Button>
                 </div>
                 <svelte:fragment slot="tooltip">
-                    You have reached the maximum number of buckets for your plan.
+                    <div style="white-space: pre-line;">
+                        You have reached the maximum number of buckets for your plan.
+                    </div>
                 </svelte:fragment>
             </Tooltip>
         {/if}