MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Make usage stats responsive and fix layout issues

This commit is contained in:
Andrew Kingston 2023-01-13 12:11:14 +00:00
parent 00916a9b45
commit 355fb6fda2
2 changed files with 19 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
packages/builder/src/components/usage/Usage.svelte
View File

@ -39,15 +39,21 @@
{#if showWarning}
<Icon name="Alert" />
{/if}
<div class="heading header-item">
<Heading size="XS" weight="light">{usage.name}</Heading>
</div>
<Heading size="XS" weight="light">
<span class="nowrap">
{usage.name}
</span>
</Heading>
</div>
{#if unlimited}
<Body size="S">{usage.used} / Unlimited</Body>
{:else}
<Body size="S">{usage.used} / {usage.total}</Body>
{/if}
<Body size="S">
<span class="nowrap">
{#if unlimited}
{usage.used} / Unlimited
{:else}
{usage.used} / {usage.total}
{/if}
</span>
</Body>
</div>
<div>
{#if unlimited}
@ -89,13 +95,14 @@
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 12px;
gap: var(--spacing-m);
}
.header-container {
display: flex;
}
.heading {
margin-top: 3px;
margin-left: 5px;
.nowrap {
white-space: nowrap;
}
</style>

1
packages/builder/src/pages/builder/portal/account/usage.svelte
View File

@ -249,6 +249,7 @@
justify-content: flex-start;
align-items: flex-start;
gap: 40px;
flex-wrap: wrap;
}
.column {
flex: 1 1 0;