From ea74e5705f0e7cbb71de9b19f34313b73454dcc0 Mon Sep 17 00:00:00 2001
From: Luke <39926192+LukeWasTakenn@users.noreply.github.com>
Date: Sat, 28 Jan 2023 18:03:51 +0100
Subject: [PATCH] refactor(web/menu): display bg circle when there's less than
 3 item

---
 web/src/features/menu/radial/index.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/web/src/features/menu/radial/index.tsx b/web/src/features/menu/radial/index.tsx
index 20929e6..2a11743 100644
--- a/web/src/features/menu/radial/index.tsx
+++ b/web/src/features/menu/radial/index.tsx
@@ -104,9 +104,12 @@ const RadialMenu: React.FC = () => {
     <>
       <Box className={classes.wrapper}>
         <svg width="350px" height="350px" transform="rotate(90)">
-          <g transform="translate(175, 175)">
-            <circle r={175} className={classes.backgroundCircle} />
-          </g>
+          {/*Fixed issues with background circle extending the circle when there's less than 3 items*/}
+          {menu.items.length >= 3 && (
+            <g transform="translate(175, 175)">
+              <circle r={175} className={classes.backgroundCircle} />
+            </g>
+          )}
           {menu.items.map((item, index) => {
             const pieAngle = 360 / menu.items.length;
             const angle = degToRad(pieAngle / 2 + 90);
@@ -140,7 +143,6 @@ const RadialMenu: React.FC = () => {
             );
           })}
           <g transform="translate(175, 175)">
-            {/*TODO: Fix background circle when there's 2 items*/}
             <circle r={30} className={classes.centerCircle} />
           </g>
           <FontAwesomeIcon