From 715fc0413ef58ea3b0b71e22fafb3d8adddf165c Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 13 Jan 2023 12:11:14 +0000 Subject: [PATCH] Make usage stats responsive and fix layout issues --- .../builder/src/components/usage/Usage.svelte | 29 ++++++++++++------- .../pages/builder/portal/account/usage.svelte | 1 + 2 files changed, 19 insertions(+), 11 deletions(-) diff --git a/packages/builder/src/components/usage/Usage.svelte b/packages/builder/src/components/usage/Usage.svelte index 49c4205a4c..6e81abfe63 100644 --- a/packages/builder/src/components/usage/Usage.svelte +++ b/packages/builder/src/components/usage/Usage.svelte @@ -39,15 +39,21 @@ {#if showWarning} {/if} -
- {usage.name} -
+ + + {usage.name} + + - {#if unlimited} - {usage.used} / Unlimited - {:else} - {usage.used} / {usage.total} - {/if} + + + {#if unlimited} + {usage.used} / Unlimited + {:else} + {usage.used} / {usage.total} + {/if} + +
{#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; } diff --git a/packages/builder/src/pages/builder/portal/account/usage.svelte b/packages/builder/src/pages/builder/portal/account/usage.svelte index c502d35f79..39970a4814 100644 --- a/packages/builder/src/pages/builder/portal/account/usage.svelte +++ b/packages/builder/src/pages/builder/portal/account/usage.svelte @@ -249,6 +249,7 @@ justify-content: flex-start; align-items: flex-start; gap: 40px; + flex-wrap: wrap; } .column { flex: 1 1 0;