fix: small ui fixes

Author: HarshMN2345

src/lib/components/progressbar/ProgressBar.svelte

@@ -66,6 +66,7 @@
             flex-direction: row;
             gap: 2px;
             margin-top: 1rem;
+            overflow: hidden;
         }
 
         &__content {

src/routes/(console)/organization-[organization]/+page.svelte

@@ -144,26 +144,11 @@
 
     {#if isCloud && $currentPlan?.projects && $currentPlan?.projects > 0 && data.organization.projects.length > 0 && $canWriteProjects && (projectsToArchive.length > 0 || data.projects.total > $currentPlan.projects)}
         <Alert.Inline
-            title={projectsToArchive.length > 0
-                ? `${projectsToArchive.length} projects will be archived on ${toLocaleDate(billingProjectsLimitDate)}`
-                : `Your organization has exceeded the project limit. Projects will be archived on ${toLocaleDate(billingProjectsLimitDate)}`}>
-            <Typography.Text>
-                {#if projectsToArchive.length > 0}
-                    {#each projectsToArchive as project, index}{@const text = `<b>${project.name}</b>`}
-                        {@html text}{index == projectsToArchive.length - 2
-                            ? ', and '
-                            : index < projectsToArchive.length - 1
-                              ? ', '
-                              : ''}
-                    {/each}
-                    will be archived
-                {/if}
-            </Typography.Text>
+            title={`${projectsToArchive.length} projects will be archived on ${toLocaleDate(billingProjectsLimitDate)}`}>
+            <Typography.Text>Upgrade your plan to restore archived projects</Typography.Text>
             <svelte:fragment slot="actions">
-                <Button secondary size="s" on:click={() => (showSelectProject = true)}>
-                    Manage projects
-                </Button>
                 <Button
+                    compact
                     size="s"
                     href={$upgradeURL}
                     on:click={() => {

src/routes/(console)/organization-[organization]/billing/planSummary.svelte

@@ -10,11 +10,11 @@
     import { BillingPlan } from '$lib/constants';
     import { Click, trackEvent } from '$lib/actions/analytics';
     import {
-        Divider,
         Typography,
         Expandable as ExpandableTable,
         Icon,
-        Layout
+        Layout,
+        Divider
     } from '@appwrite.io/pink-svelte';
     import { humanFileSize } from '$lib/helpers/sizeConvertion';
     import { formatNum } from '$lib/helpers/string';
@@ -146,7 +146,7 @@
             id: 'base-plan',
             expandable: false,
             cells: {
-                item: 'Base plan',
+                item: currentPlan?.price === 0 ? 'Free plan' : 'Base plan',
                 usage: '',
                 price: formatCurrency(currentPlan?.price || 0)
             },
@@ -286,28 +286,14 @@
                 {
                     id: `project-${project.projectId}-usage-details`,
                     cells: {
-                        item: `<a href="${base}/project-${project.region}-${project.projectId}/settings/usage" style="text-decoration: underline; color: var(--fgcolor-accent-neutral);">Usage details</a>`,
+                        item: `<a href="/console/project-${String(project.region || 'default')}-${project.projectId}/settings/usage" style="text-decoration: underline; color: var(--fgcolor-accent-neutral);">Usage details</a>`,
                         usage: '',
                         price: ''
                     }
                 }
             ]
         }));
-        const noProjects =
-            projectsList && projectsList.length === 0
-                ? [
-                      {
-                          id: 'no-projects',
-                          expandable: false,
-                          cells: {
-                              item: 'No projects found',
-                              usage: '',
-                              price: formatCurrency(0)
-                          },
-                          children: []
-                      }
-                  ]
-                : [];
+        const noProjects = [];
         return [base, ...addons, ...projects, ...noProjects];
     }
 
@@ -321,17 +307,21 @@
 
 {#if $organization}
     <EstimatedCard>
-        <Typography.Title size="s">{currentPlan.name} plan</Typography.Title>
-
-        <Typography.Text color="--fgcolor-neutral-primary">
-            Next payment of <span class="text u-bold">{formatCurrency(totalAmount)}</span>
-            will occur on
-            <span class="text u-bold">{toLocaleDate($organization?.billingNextInvoiceDate)}</span>.
-        </Typography.Text>
-
+        <Typography.Title size="s" gap="s">{currentPlan.name} plan</Typography.Title>
+
+        {#if currentPlan?.price > 0}
+            <Typography.Text color="--fgcolor-neutral-secondary">
+                Next payment of <span class="text --fgcolor-neutral-primary u-bold"
+                    >{formatCurrency(totalAmount)}</span>
+                will occur on
+                <span class="text --fgcolor-neutral-primary u-bold"
+                    >{toLocaleDate($organization?.billingNextInvoiceDate)}</span
+                >.
+            </Typography.Text>
+        {/if}
         <Divider />
         <div class="billing-cycle-header">
-            <Typography.Text color="--fgcolor-neutral-primary" variant="m-500">
+            <Typography.Text color="--fgcolor-neutral-secondary" variant="m-500">
                 Current billing cycle ({new Date(
                     $organization?.billingCurrentInvoiceDate
                 ).toLocaleDateString('en', { day: 'numeric', month: 'short' })}-{new Date(
@@ -575,8 +565,6 @@
         display: flex;
         justify-content: space-between;
         align-items: flex-start;
-        margin-bottom: 0.5rem;
-        margin-top: 1rem;
     }
 
     :global(.card-only-on-desktop) {