From 94dfd704e3379a3275e074bee4d1e72ab7e4f3f8 Mon Sep 17 00:00:00 2001
From: huong-li-nguyen <huong_li_nguyen@mckinsey.com>
Date: Tue, 31 Oct 2023 11:18:07 +0100
Subject: [PATCH] Fix overflow of table

---
 ...1125_huong_li_nguyen_fix_table_overflow.md | 47 +++++++++++++++++++
 .../src/vizro/models/_components/graph.py     |  2 +-
 .../src/vizro/models/_components/table.py     |  4 +-
 .../vizro/models/_components/test_graph.py    |  2 +-
 .../vizro/models/_components/test_table.py    |  4 +-
 5 files changed, 55 insertions(+), 4 deletions(-)
 create mode 100644 vizro-core/changelog.d/20231031_111125_huong_li_nguyen_fix_table_overflow.md

diff --git a/vizro-core/changelog.d/20231031_111125_huong_li_nguyen_fix_table_overflow.md b/vizro-core/changelog.d/20231031_111125_huong_li_nguyen_fix_table_overflow.md
new file mode 100644
index 000000000..b3193012b
--- /dev/null
+++ b/vizro-core/changelog.d/20231031_111125_huong_li_nguyen_fix_table_overflow.md
@@ -0,0 +1,47 @@
+<!--
+A new scriv changelog fragment.
+
+Uncomment the section that is right (remove the HTML comment wrapper).
+-->
+
+<!--
+### Highlights ✨
+
+- A bullet item for the Highlights ✨ category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Removed
+
+- A bullet item for the Removed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Added
+
+- A bullet item for the Added category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Changed
+
+- A bullet item for the Changed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Deprecated
+
+- A bullet item for the Deprecated category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+
+### Fixed
+
+- Fix overflowing of `Table` ([#137](https://github.com/mckinsey/vizro/pull/137))
+
+<!--
+### Security
+
+- A bullet item for the Security category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
diff --git a/vizro-core/src/vizro/models/_components/graph.py b/vizro-core/src/vizro/models/_components/graph.py
index 253007582..cb792615e 100644
--- a/vizro-core/src/vizro/models/_components/graph.py
+++ b/vizro-core/src/vizro/models/_components/graph.py
@@ -84,5 +84,5 @@ def build(self):
                 className="chart_container",
             ),
             color="grey",
-            parent_className="chart_container",
+            parent_className="loading-container",
         )
diff --git a/vizro-core/src/vizro/models/_components/table.py b/vizro-core/src/vizro/models/_components/table.py
index 8215cdacc..4dd0a33a3 100644
--- a/vizro-core/src/vizro/models/_components/table.py
+++ b/vizro-core/src/vizro/models/_components/table.py
@@ -61,5 +61,7 @@ def build(self):
                 ],
                 className="table-container",
                 id=f"{self.id}_outer",
-            )
+            ),
+            color="grey",
+            parent_className="loading-container",
         )
diff --git a/vizro-core/tests/unit/vizro/models/_components/test_graph.py b/vizro-core/tests/unit/vizro/models/_components/test_graph.py
index 794837a97..e45609321 100644
--- a/vizro-core/tests/unit/vizro/models/_components/test_graph.py
+++ b/vizro-core/tests/unit/vizro/models/_components/test_graph.py
@@ -53,7 +53,7 @@ def expected_graph():
             className="chart_container",
         ),
         color="grey",
-        parent_className="chart_container",
+        parent_className="loading-container",
     )
 
 
diff --git a/vizro-core/tests/unit/vizro/models/_components/test_table.py b/vizro-core/tests/unit/vizro/models/_components/test_table.py
index 5ef3d9a83..ca9eedc1b 100644
--- a/vizro-core/tests/unit/vizro/models/_components/test_table.py
+++ b/vizro-core/tests/unit/vizro/models/_components/test_table.py
@@ -33,7 +33,9 @@ def expected_table():
             ],
             className="table-container",
             id="text_table_outer",
-        )
+        ),
+        color="grey",
+        parent_className="loading-container",
     )