Merge pull request #676 from appwrite/fix-project-usage-collapsible

fix: project usage dropdown

Author: eldadfux

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>

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"

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>