diff --git a/lib/mave_core_web/components/dashboard_components/states.ex b/lib/mave_core_web/components/dashboard_components/states.ex
index a0d5f8c..022fe96 100644
--- a/lib/mave_core_web/components/dashboard_components/states.ex
+++ b/lib/mave_core_web/components/dashboard_components/states.ex
@@ -296,7 +296,12 @@ defmodule MaveCoreWeb.DashboardComponents.States do
-
{@current}
+
0 && "text-red-500"]}
+ >
+ {@current}
+
{@max}
diff --git a/storybook/dashboard/states/usage_bar.story.exs b/storybook/dashboard/states/usage_bar.story.exs
index 8bf512e..0343c90 100644
--- a/storybook/dashboard/states/usage_bar.story.exs
+++ b/storybook/dashboard/states/usage_bar.story.exs
@@ -56,6 +56,16 @@ defmodule Storybook.Dashboard.States.UsageBar do
max: "10,000 calls",
percent: 100.0
}
+ },
+ %Variation{
+ id: :over_limit,
+ description: "Over limit (129%)",
+ attributes: %{
+ label: "Bandwidth",
+ current: "1.29 TB",
+ max: "1 TB",
+ percent: 129.0
+ }
}
]
end
diff --git a/test/mave_core_web/components/dashboard_components/states_test.exs b/test/mave_core_web/components/dashboard_components/states_test.exs
index 397710d..83bf2a2 100644
--- a/test/mave_core_web/components/dashboard_components/states_test.exs
+++ b/test/mave_core_web/components/dashboard_components/states_test.exs
@@ -16,6 +16,7 @@ defmodule MaveCoreWeb.DashboardComponents.StatesTest do
assert html =~ ~s(data-usage-segment="within-limit")
assert html =~ ~s(style="width: 25.0%;")
refute html =~ ~s(data-usage-segment="overage")
+ refute html =~ "text-red-500"
end
test "usage_bar shows the portion above the limit in red" do
@@ -31,5 +32,6 @@ defmodule MaveCoreWeb.DashboardComponents.StatesTest do
assert html =~ ~s(data-usage-segment="overage")
assert html =~ "bg-red-500"
assert html =~ ~s(style="width: 25.0%;")
+ assert html =~ ~r/data-usage-current[^>]*class="flex-grow text-red-500"/
end
end