From 0b3f30dedccf167ef1a6385cd232c116e699f1a8 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 21 Dec 2023 10:54:00 +0100
Subject: [PATCH] fix: project usage dropdown

---
 src/lib/components/cardGrid.svelte            |  2 +-
 src/lib/components/collapsibleItem.svelte     |  2 +-
 .../usage/[[invoice]]/ProjectBreakdown.svelte | 50 +++++++++----------
 3 files changed, 26 insertions(+), 28 deletions(-)

diff --git a/src/lib/components/cardGrid.svelte b/src/lib/components/cardGrid.svelte
index 33dff20d1b..67e0d2ad40 100644
--- a/src/lib/components/cardGrid.svelte
+++ b/src/lib/components/cardGrid.svelte
@@ -10,7 +10,7 @@
         <div class="grid-1-2-col-1 u-flex u-flex-vertical u-gap-16">
             <slot />
         </div>
-        <div class="grid-1-2-col-2 u-flex u-flex-vertical u-gap-16">
+        <div class="grid-1-2-col-2 u-flex u-flex-vertical u-gap-16 u-min-width-0">
             <slot name="aside" />
         </div>
     </div>
diff --git a/src/lib/components/collapsibleItem.svelte b/src/lib/components/collapsibleItem.svelte
index cd44bc824a..8397454dcf 100644
--- a/src/lib/components/collapsibleItem.svelte
+++ b/src/lib/components/collapsibleItem.svelte
@@ -9,7 +9,7 @@
     <details class="collapsible-wrapper" {open}>
         <!-- svelte-ignore a11y-no-redundant-roles -->
         <summary
-            class="collapsible-button"
+            class="collapsible-button u-position-relative"
             on:keyup={clickOnEnter}
             on:click
             role="button"
diff --git a/src/routes/console/organization-[organization]/usage/[[invoice]]/ProjectBreakdown.svelte b/src/routes/console/organization-[organization]/usage/[[invoice]]/ProjectBreakdown.svelte
index ff788056b5..4565592726 100644
--- a/src/routes/console/organization-[organization]/usage/[[invoice]]/ProjectBreakdown.svelte
+++ b/src/routes/console/organization-[organization]/usage/[[invoice]]/ProjectBreakdown.svelte
@@ -3,12 +3,12 @@
     import { Collapsible, CollapsibleItem } from '$lib/components';
     import {
         TableBody,
-        TableCell,
         TableCellLink,
         TableCellHead,
         TableHeader,
         TableRow,
-        Table
+        TableScroll,
+        TableCellText
     } from '$lib/elements/table';
     import { abbreviateNumber } from '$lib/helpers/numbers';
     import { humanFileSize } from '$lib/helpers/sizeConvertion';
@@ -55,29 +55,27 @@
 <Collapsible>
     <CollapsibleItem>
         <svelte:fragment slot="title">Project breakdown</svelte:fragment>
-        <div class="table-wrapper" data-sveltekit-preload-data="off">
-            <Table noMargin noStyles>
-                <TableHeader>
-                    <TableCellHead width={285}>Project</TableCellHead>
-                    <TableCellHead>Usage</TableCellHead>
-                    <TableCellHead width={140} />
-                </TableHeader>
-                <TableBody>
-                    {#each groupByProject(metric).sort((a, b) => b.usage - a.usage) as project}
-                        <TableRow>
-                            <TableCell title="Project">
-                                {getProjectName(project.projectId)}
-                            </TableCell>
-                            <TableCell title="Usage">{format(project.usage)}</TableCell>
-                            <TableCellLink
-                                title="Go to project usage"
-                                href={getProjectUsageLink(project.projectId)}>
-                                View project usage
-                            </TableCellLink>
-                        </TableRow>
-                    {/each}
-                </TableBody>
-            </Table>
-        </div>
+        <TableScroll noMargin>
+            <TableHeader>
+                <TableCellHead width={185}>Project</TableCellHead>
+                <TableCellHead width={100}>Usage</TableCellHead>
+                <TableCellHead width={140} />
+            </TableHeader>
+            <TableBody>
+                {#each groupByProject(metric).sort((a, b) => b.usage - a.usage) as project}
+                    <TableRow>
+                        <TableCellText title="Project">
+                            {getProjectName(project.projectId)}
+                        </TableCellText>
+                        <TableCellText title="Usage">{format(project.usage)}</TableCellText>
+                        <TableCellLink
+                            title="Go to project usage"
+                            href={getProjectUsageLink(project.projectId)}>
+                            View project usage
+                        </TableCellLink>
+                    </TableRow>
+                {/each}
+            </TableBody>
+        </TableScroll>
     </CollapsibleItem>
 </Collapsible>