diff --git a/app/assets/stylesheets/components/big-number.scss b/app/assets/stylesheets/components/big-number.scss
index b8dabea7b..aeb78df42 100644
--- a/app/assets/stylesheets/components/big-number.scss
+++ b/app/assets/stylesheets/components/big-number.scss
@@ -3,14 +3,17 @@
display: block;
+ &-number,
+ &-label {
+ display: block;
+ }
+
&-number {
@include bold-48($tabular-numbers: true);
- display: block;
}
&-label {
@include core-19;
- display: inline-block;
padding-bottom: 10px;
}
diff --git a/app/templates/components/big-number.html b/app/templates/components/big-number.html
index 8b5176a04..50790b474 100644
--- a/app/templates/components/big-number.html
+++ b/app/templates/components/big-number.html
@@ -2,22 +2,22 @@
{% if link %}
{% endif %}
-
-
- {% if number is number %}
- {% if currency %}
- {{ "{}{:,.2f}".format(currency, number) }}
- {% else %}
- {{ "{:,}".format(number) }}
+
+
+ {% if number is number %}
+ {% if currency %}
+ {{ "{}{:,.2f}".format(currency, number) }}
+ {% else %}
+ {{ "{:,}".format(number) }}
+ {% endif %}
+ {% else %}
+ {{ number }}
+ {% endif %}
+
+ {% if label %}
+ {{ label }}
{% endif %}
- {% else %}
- {{ number }}
- {% endif %}
-
- {% if label %}
-
{{ label }}
- {% endif %}
-
+
{% if link %}
{% endif %}
@@ -36,10 +36,10 @@
smaller=False,
smallest=False
) %}
-
+
{{ big_number(number, label, link=link, smaller=smaller, smallest=smallest) }}
{% if show_failures %}
-
+
{% endif %}
-
+
{% endmacro %}
{% macro big_number_simple(number, label) %}
-
-
+
+
{% if number is number %}
{{ "{:,}".format(number) }}
{% else %}
{{ number }}
{% endif %}
-
+
{% if label %}
{{ label }}
{% endif %}
-
+
{% endmacro %}
diff --git a/tests/app/main/views/test_dashboard.py b/tests/app/main/views/test_dashboard.py
index 90eb91c76..23dc8ceab 100644
--- a/tests/app/main/views/test_dashboard.py
+++ b/tests/app/main/views/test_dashboard.py
@@ -1426,7 +1426,7 @@ def test_service_dashboard_updates_gets_dashboard_totals(
service_id=SERVICE_ONE_ID,
)
- numbers = [number.text.strip() for number in page.find_all('div', class_='big-number-number')]
+ numbers = [number.text.strip() for number in page.find_all('span', class_='big-number-number')]
assert '123' in numbers
assert '456' in numbers
diff --git a/tests/app/main/views/test_platform_admin.py b/tests/app/main/views/test_platform_admin.py
index e4b99cb45..bff8eb62c 100644
--- a/tests/app/main/views/test_platform_admin.py
+++ b/tests/app/main/views/test_platform_admin.py
@@ -627,7 +627,7 @@ def test_platform_admin_displays_stats_in_right_boxes_and_with_correct_styling(
# Email complaints status box - link exists and number is correct
assert page.find('a', string='15 complaints')
# SMS total box - number is correct
- assert page.find_all('div', class_='big-number-number')[1].text.strip() == '168'
+ assert page.find_all('span', class_='big-number-number')[1].text.strip() == '168'
# Test SMS box - number is correct
assert '5' in page.find_all('div', class_='govuk-grid-column-one-third')[4].text
# SMS technical failure status box - number is correct and failure class is used