From e19828b43b3f01317befa57e65400aff7adbc86d Mon Sep 17 00:00:00 2001
From: Vio <vio@beanon.com>
Date: Sat, 19 Mar 2022 23:48:12 +0100
Subject: [PATCH] FIXUP

---
 packages/ui/src/ui/treemap/treemap.jsx        | 17 ++++++++++++++++-
 packages/ui/src/ui/treemap/treemap.module.css |  6 ++++--
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/ui/treemap/treemap.jsx b/packages/ui/src/ui/treemap/treemap.jsx
index a35f4e506f..31a50ba6eb 100644
--- a/packages/ui/src/ui/treemap/treemap.jsx
+++ b/packages/ui/src/ui/treemap/treemap.jsx
@@ -7,6 +7,19 @@ import css from './treemap.module.css';
 
 const getPercentageValue = (value, ref) => `${(value / ref) * 100}%`;
 
+const ItemWrapper = ({ style, children }) => {
+  return (
+    <div className={css.itemWrapper} style={style}>
+      {children}
+    </div>
+  );
+};
+
+ItemWrapper.propTypes = {
+  style: PropTypes.object.isRequired, // eslint-ignore-line react/forbid-prop-types
+  children: PropTypes.node.isRequired,
+};
+
 const DefaultItem = ({ item, ...restProps }) => (
   <div {...restProps}>
     <span className={css.itemLabel}>{item.label || item.id}</span>
@@ -61,7 +74,9 @@ export const Treemap = ({ className, data, Item }) => {
   return (
     <div className={rootClassName} ref={containerRef}>
       {items.map((item) => (
-        <Item className={css.item} style={item.style} item={item} />
+        <ItemWrapper key={item.id} style={item.style}>
+          <Item className={css.item} item={item} />
+        </ItemWrapper>
       ))}
     </div>
   );
diff --git a/packages/ui/src/ui/treemap/treemap.module.css b/packages/ui/src/ui/treemap/treemap.module.css
index 65e6092e7e..8350fa0c9d 100644
--- a/packages/ui/src/ui/treemap/treemap.module.css
+++ b/packages/ui/src/ui/treemap/treemap.module.css
@@ -1,6 +1,8 @@
 .root {
   position: relative;
   border: 1px solid var(--color-outline);
+  border-radius: var(--radius-medium);
+  overflow: hidden;
 }
 
 .root::before {
@@ -9,7 +11,7 @@
   padding: 0 0 40%;
 }
 
-.item {
+.itemWrapper {
   position: absolute;
   display: flex;
   align-items: center;
@@ -18,7 +20,7 @@
   outline: 1px solid var(--color-outline);
 }
 
-.itemLabel {
+.item {
   max-width: 100%;
   color: var(--color-text-light);
   font-size: var(--size-small);