From b03b1ff1ac50d00dede8047d7be68eace89b4371 Mon Sep 17 00:00:00 2001
From: NatLeung96 <nathanael.leung96@gmail.com>
Date: Thu, 27 Mar 2025 09:36:46 +0000
Subject: [PATCH 01/13] Replaced div with MUI Typography

---
 src/ui/widgets/Label/label.tsx | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/ui/widgets/Label/label.tsx b/src/ui/widgets/Label/label.tsx
index 64be7186..2dc1de14 100644
--- a/src/ui/widgets/Label/label.tsx
+++ b/src/ui/widgets/Label/label.tsx
@@ -15,6 +15,8 @@ import {
   FloatPropOpt,
   MacrosPropOpt
 } from "../propTypes";
+import { Typography, ThemeProvider } from "@mui/material";
+import { defaultColours } from "../../../colourscheme";
 
 const LabelProps = {
   macros: MacrosPropOpt,
@@ -53,7 +55,6 @@ export const LabelComponent = (
     rotationAngle,
     wrapWords
   } = props;
-  const className = props.className ?? `Label ${classes.Label}`;
   // Since display is "flex", use "flex-start" and "flex-end" to align
   // the content.
   let alignment = "center";
@@ -93,9 +94,20 @@ export const LabelComponent = (
 
   // Simple component to display text - defaults to black text and dark grey background
   return (
-    <div className={className} style={style}>
-      <span style={{ transform }}> {text} </span>
-    </div>
+    <ThemeProvider theme={defaultColours}>
+      <Typography
+        sx={{
+          color:
+            props.foregroundColor?.toString() ??
+            defaultColours.palette.primary.contrastText,
+          fontFamily: props.font?.css() ?? null,
+          transform: transform?.toString() ?? null,
+          border: "2px"
+        }}
+      >
+        {text}
+      </Typography>
+    </ThemeProvider>
   );
 };
 

From dbbe3c6f55bde866661046c60b8829820a3416b2 Mon Sep 17 00:00:00 2001
From: NatLeung96 <nathanael.leung96@gmail.com>
Date: Thu, 27 Mar 2025 10:42:51 +0000
Subject: [PATCH 02/13] Added styling props to Typography

---
 src/ui/widgets/Label/label.tsx | 49 +++++++++++++++-------------------
 1 file changed, 21 insertions(+), 28 deletions(-)

diff --git a/src/ui/widgets/Label/label.tsx b/src/ui/widgets/Label/label.tsx
index 2dc1de14..b0db73ad 100644
--- a/src/ui/widgets/Label/label.tsx
+++ b/src/ui/widgets/Label/label.tsx
@@ -1,7 +1,6 @@
-import React, { CSSProperties } from "react";
+import React from "react";
 
-import classes from "./label.module.css";
-import { Widget, commonCss } from "../widget";
+import { Widget } from "../widget";
 import { WidgetPropType } from "../widgetProps";
 import { registerWidget } from "../register";
 import {
@@ -43,11 +42,9 @@ export const LabelComponent = (
   props: InferWidgetProps<typeof LabelProps>
 ): JSX.Element => {
   // Default labels to transparent.
-  const editedProps = {
-    ...props,
-    transparent: props.transparent ?? true
-  };
-  const style: CSSProperties = commonCss(editedProps);
+
+  const transparent = props.transparent ?? true;
+
   const {
     textAlign = "left",
     textAlignV = "top",
@@ -60,49 +57,45 @@ export const LabelComponent = (
   let alignment = "center";
   if (textAlign === "left") {
     alignment = "flex-start";
-    if (wrapWords) {
-      style["textAlign"] = "left";
-    }
   } else if (textAlign === "right") {
     alignment = "flex-end";
-    if (wrapWords) {
-      style["textAlign"] = "right";
-    }
-  } else {
-    if (wrapWords) {
-      style["textAlign"] = "center";
-    }
   }
-  style["justifyContent"] = alignment;
-  style["cursor"] = "default";
+
   let alignmentV = "center";
   if (textAlignV === "top") {
     alignmentV = "flex-start";
   } else if (textAlignV === "bottom") {
     alignmentV = "flex-end";
   }
-  style["alignItems"] = alignmentV;
+
   let transform = undefined;
   if (rotationAngle) {
     transform = `rotate(${rotationAngle}deg)`;
   }
 
-  if (wrapWords) {
-    style["wordBreak"] = "break-word";
-    style["whiteSpace"] = "break-spaces";
-  }
-
   // Simple component to display text - defaults to black text and dark grey background
   return (
     <ThemeProvider theme={defaultColours}>
       <Typography
+        noWrap={!wrapWords}
         sx={{
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          justifyContent: alignment,
+          alignItems: alignmentV,
+          textAlign: textAlign,
+          wordBreak: wrapWords ? "break-word" : null,
+          whiteSpace: wrapWords ? "break-spaces" : null,
           color:
             props.foregroundColor?.toString() ??
             defaultColours.palette.primary.contrastText,
+          backgroundColor: transparent
+            ? null
+            : (props.backgroundColor?.toString() ??
+              defaultColours.palette.primary.main),
           fontFamily: props.font?.css() ?? null,
-          transform: transform?.toString() ?? null,
-          border: "2px"
+          transform: transform?.toString() ?? null
         }}
       >
         {text}

From ece0b0e80cdb6f7c4b30eec6f69a2250f5f02797 Mon Sep 17 00:00:00 2001
From: NatLeung96 <nathanael.leung96@gmail.com>
Date: Thu, 27 Mar 2025 10:56:27 +0000
Subject: [PATCH 03/13] Updated the tests for label

---
 .../Label/__snapshots__/label.test.tsx.snap   | 11 ++++-----
 src/ui/widgets/Label/label.test.tsx           | 24 +++++++++----------
 2 files changed, 16 insertions(+), 19 deletions(-)

diff --git a/src/ui/widgets/Label/__snapshots__/label.test.tsx.snap b/src/ui/widgets/Label/__snapshots__/label.test.tsx.snap
index 0f776d0e..0710eb3a 100644
--- a/src/ui/widgets/Label/__snapshots__/label.test.tsx.snap
+++ b/src/ui/widgets/Label/__snapshots__/label.test.tsx.snap
@@ -2,13 +2,10 @@
 
 exports[`<Label /> > it matches the snapshot 1`] = `
 <DocumentFragment>
-  <div
-    class="Label _Label_c35983"
-    style="background-color: transparent; cursor: default; justify-content: flex-start; align-items: flex-start;"
+  <p
+    class="MuiTypography-root MuiTypography-body1 MuiTypography-noWrap css-1psacti-MuiTypography-root"
   >
-    <span>
-       hello 
-    </span>
-  </div>
+    hello
+  </p>
 </DocumentFragment>
 `;
diff --git a/src/ui/widgets/Label/label.test.tsx b/src/ui/widgets/Label/label.test.tsx
index 0274e94e..178b10c7 100644
--- a/src/ui/widgets/Label/label.test.tsx
+++ b/src/ui/widgets/Label/label.test.tsx
@@ -13,16 +13,16 @@ describe("<Label />", (): void => {
     expect(screen.getByText("hello")).toBeInTheDocument();
   });
 
-  test("it handles transparent prop", (): void => {
-    render(<LabelComponent text="hello" transparent={true} />);
-    const label = screen.getByText("hello");
-    // The text is in the span, not the parent div.
-    if (label.parentElement && "style" in label.parentElement) {
-      expect(label.parentElement.style).toHaveProperty(
-        "backgroundColor",
-        "transparent"
-      );
-    }
-    expect.assertions(1);
-  });
+  // test("it handles transparent prop", (): void => {
+  //   render(<LabelComponent text="hello" transparent={true} />);
+  //   const label = screen.getByText("hello");
+  //   // The text is in the span, not the parent div.
+  //   if (label.parentElement && "style" in label.parentElement) {
+  //     expect(label.parentElement.style).toHaveProperty(
+  //       "backgroundColor",
+  //       "transparent"
+  //     );
+  //   }
+  //   expect.assertions(1);
+  // });
 });

From 965277ecaf233c5834d11610443aebe352918746 Mon Sep 17 00:00:00 2001
From: NatLeung96 <nathanael.leung96@gmail.com>
Date: Thu, 27 Mar 2025 11:03:59 +0000
Subject: [PATCH 04/13] Updated symbols test

---
 .../widgets/Symbol/__snapshots__/symbol.test.tsx.snap | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/ui/widgets/Symbol/__snapshots__/symbol.test.tsx.snap b/src/ui/widgets/Symbol/__snapshots__/symbol.test.tsx.snap
index 27183781..33277c7f 100644
--- a/src/ui/widgets/Symbol/__snapshots__/symbol.test.tsx.snap
+++ b/src/ui/widgets/Symbol/__snapshots__/symbol.test.tsx.snap
@@ -82,14 +82,11 @@ exports[`<Symbol /> from .opi file > matches snapshot 1`] = `
     <div
       style="padding: 5%;"
     >
-      <div
-        class="Label _Label_c35983"
-        style="background-color: transparent; cursor: default; justify-content: flex-start; align-items: flex-start;"
+      <p
+        class="MuiTypography-root MuiTypography-body1 MuiTypography-noWrap css-1psacti-MuiTypography-root"
       >
-        <span>
-           Fake value 
-        </span>
-      </div>
+        Fake value
+      </p>
     </div>
   </div>
 </DocumentFragment>

From da0ddcdcef5049af0987de70bb75589eb464f142 Mon Sep 17 00:00:00 2001
From: NatLeung96 <nathanael.leung96@gmail.com>
Date: Wed, 2 Apr 2025 13:41:28 +0100
Subject: [PATCH 05/13] Removed ThemeProvider and tidied styling parameters

---
 src/ui/widgets/Label/label.tsx | 67 +++++++++++++++-------------------
 1 file changed, 30 insertions(+), 37 deletions(-)

diff --git a/src/ui/widgets/Label/label.tsx b/src/ui/widgets/Label/label.tsx
index b0db73ad..3602aab7 100644
--- a/src/ui/widgets/Label/label.tsx
+++ b/src/ui/widgets/Label/label.tsx
@@ -14,7 +14,7 @@ import {
   FloatPropOpt,
   MacrosPropOpt
 } from "../propTypes";
-import { Typography, ThemeProvider } from "@mui/material";
+import { Typography } from "@mui/material";
 import { defaultColours } from "../../../colourscheme";
 
 const LabelProps = {
@@ -29,7 +29,7 @@ const LabelProps = {
   foregroundColor: ColorPropOpt,
   backgroundColor: ColorPropOpt,
   border: BorderPropOpt,
-  rotationAngle: FloatPropOpt,
+  rotationStep: FloatPropOpt,
   wrapWords: BoolPropOpt
 };
 
@@ -42,16 +42,21 @@ export const LabelComponent = (
   props: InferWidgetProps<typeof LabelProps>
 ): JSX.Element => {
   // Default labels to transparent.
-
-  const transparent = props.transparent ?? true;
-
   const {
+    transparent = true,
+    foregroundColor = defaultColours.palette.primary.contrastText,
     textAlign = "left",
     textAlignV = "top",
     text = "",
-    rotationAngle,
+    rotationStep = 0,
     wrapWords
   } = props;
+  const backgroundColor = transparent
+    ? "transparent"
+    : (props.backgroundColor?.toString() ??
+      defaultColours.palette.primary.main);
+  const font = props.font?.css() ?? defaultColours.typography;
+
   // Since display is "flex", use "flex-start" and "flex-end" to align
   // the content.
   let alignment = "center";
@@ -68,39 +73,27 @@ export const LabelComponent = (
     alignmentV = "flex-end";
   }
 
-  let transform = undefined;
-  if (rotationAngle) {
-    transform = `rotate(${rotationAngle}deg)`;
-  }
-
   // Simple component to display text - defaults to black text and dark grey background
   return (
-    <ThemeProvider theme={defaultColours}>
-      <Typography
-        noWrap={!wrapWords}
-        sx={{
-          width: "100%",
-          height: "100%",
-          display: "flex",
-          justifyContent: alignment,
-          alignItems: alignmentV,
-          textAlign: textAlign,
-          wordBreak: wrapWords ? "break-word" : null,
-          whiteSpace: wrapWords ? "break-spaces" : null,
-          color:
-            props.foregroundColor?.toString() ??
-            defaultColours.palette.primary.contrastText,
-          backgroundColor: transparent
-            ? null
-            : (props.backgroundColor?.toString() ??
-              defaultColours.palette.primary.main),
-          fontFamily: props.font?.css() ?? null,
-          transform: transform?.toString() ?? null
-        }}
-      >
-        {text}
-      </Typography>
-    </ThemeProvider>
+    <Typography
+      noWrap={!wrapWords}
+      sx={{
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        justifyContent: alignment,
+        alignItems: alignmentV,
+        textAlign: textAlign,
+        wordBreak: wrapWords ? "break-word" : null,
+        whiteSpace: wrapWords ? "break-spaces" : null,
+        color: foregroundColor.toString(),
+        backgroundColor: backgroundColor,
+        fontFamily: font,
+        transform: `rotate(${rotationStep * -90}deg)`.toString()
+      }}
+    >
+      {text}
+    </Typography>
   );
 };
 

From 96994ae100c03d15ae45505a6a8228a30086dc75 Mon Sep 17 00:00:00 2001
From: NatLeung96 <nathanael.leung96@gmail.com>
Date: Thu, 3 Apr 2025 11:27:34 +0100
Subject: [PATCH 06/13] Updated tokens and fixed rotation

---
 src/ui/widgets/Label/label.tsx       | 9 ++++-----
 src/ui/widgets/Readback/readback.tsx | 6 +++---
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/ui/widgets/Label/label.tsx b/src/ui/widgets/Label/label.tsx
index 3602aab7..04f786b5 100644
--- a/src/ui/widgets/Label/label.tsx
+++ b/src/ui/widgets/Label/label.tsx
@@ -15,7 +15,7 @@ import {
   MacrosPropOpt
 } from "../propTypes";
 import { Typography } from "@mui/material";
-import { defaultColours } from "../../../colourscheme";
+import { diamondTheme } from "../../../diamondTheme";
 
 const LabelProps = {
   macros: MacrosPropOpt,
@@ -44,7 +44,7 @@ export const LabelComponent = (
   // Default labels to transparent.
   const {
     transparent = true,
-    foregroundColor = defaultColours.palette.primary.contrastText,
+    foregroundColor = diamondTheme.palette.primary.contrastText,
     textAlign = "left",
     textAlignV = "top",
     text = "",
@@ -53,9 +53,8 @@ export const LabelComponent = (
   } = props;
   const backgroundColor = transparent
     ? "transparent"
-    : (props.backgroundColor?.toString() ??
-      defaultColours.palette.primary.main);
-  const font = props.font?.css() ?? defaultColours.typography;
+    : (props.backgroundColor?.toString() ?? diamondTheme.palette.primary.main);
+  const font = props.font?.css() ?? diamondTheme.typography;
 
   // Since display is "flex", use "flex-start" and "flex-end" to align
   // the content.
diff --git a/src/ui/widgets/Readback/readback.tsx b/src/ui/widgets/Readback/readback.tsx
index 82162193..7b9fa5f4 100644
--- a/src/ui/widgets/Readback/readback.tsx
+++ b/src/ui/widgets/Readback/readback.tsx
@@ -34,7 +34,7 @@ const ReadbackProps = {
   foregroundColor: ColorPropOpt,
   backgroundColor: ColorPropOpt,
   border: BorderPropOpt,
-  rotationAngle: FloatPropOpt,
+  rotationStep: FloatPropOpt,
   visible: BoolPropOpt,
   wrapWords: BoolPropOpt
 };
@@ -60,7 +60,7 @@ export const ReadbackComponent = (
     textAlignV = "top",
     showUnits = false,
     precisionFromPv = false,
-    rotationAngle,
+    rotationStep,
     visible,
     wrapWords = false
   } = props;
@@ -140,7 +140,7 @@ export const ReadbackComponent = (
       foregroundColor={foregroundColor}
       backgroundColor={backgroundColor}
       border={border}
-      rotationAngle={rotationAngle}
+      rotationStep={rotationStep}
       visible={visible}
       wrapWords={wrapWords}
     ></LabelComponent>

From 7983a026343aaef6dd826a8b23154681bd0ebb38 Mon Sep 17 00:00:00 2001
From: NatLeung96 <nathanael.leung96@gmail.com>
Date: Thu, 3 Apr 2025 11:32:26 +0100
Subject: [PATCH 07/13] Updated snapshots

---
 src/ui/widgets/Label/__snapshots__/label.test.tsx.snap   | 2 +-
 src/ui/widgets/Symbol/__snapshots__/symbol.test.tsx.snap | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/ui/widgets/Label/__snapshots__/label.test.tsx.snap b/src/ui/widgets/Label/__snapshots__/label.test.tsx.snap
index 0710eb3a..4a7823a1 100644
--- a/src/ui/widgets/Label/__snapshots__/label.test.tsx.snap
+++ b/src/ui/widgets/Label/__snapshots__/label.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<Label /> > it matches the snapshot 1`] = `
 <DocumentFragment>
   <p
-    class="MuiTypography-root MuiTypography-body1 MuiTypography-noWrap css-1psacti-MuiTypography-root"
+    class="MuiTypography-root MuiTypography-body1 MuiTypography-noWrap css-k3pvii-MuiTypography-root"
   >
     hello
   </p>
diff --git a/src/ui/widgets/Symbol/__snapshots__/symbol.test.tsx.snap b/src/ui/widgets/Symbol/__snapshots__/symbol.test.tsx.snap
index 33277c7f..c6486ef8 100644
--- a/src/ui/widgets/Symbol/__snapshots__/symbol.test.tsx.snap
+++ b/src/ui/widgets/Symbol/__snapshots__/symbol.test.tsx.snap
@@ -83,7 +83,7 @@ exports[`<Symbol /> from .opi file > matches snapshot 1`] = `
       style="padding: 5%;"
     >
       <p
-        class="MuiTypography-root MuiTypography-body1 MuiTypography-noWrap css-1psacti-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 MuiTypography-noWrap css-k3pvii-MuiTypography-root"
       >
         Fake value
       </p>

From 6bf30a5dddb5f8700a3dd0b4ace737e3992763bf Mon Sep 17 00:00:00 2001
From: NatLeung96 <nathanael.leung96@gmail.com>
Date: Fri, 4 Apr 2025 09:04:56 +0100
Subject: [PATCH 08/13] Removed redundant css file

---
 src/ui/widgets/Label/label.module.css | 15 ---------------
 1 file changed, 15 deletions(-)
 delete mode 100644 src/ui/widgets/Label/label.module.css

diff --git a/src/ui/widgets/Label/label.module.css b/src/ui/widgets/Label/label.module.css
deleted file mode 100644
index 3de03a30..00000000
--- a/src/ui/widgets/Label/label.module.css
+++ /dev/null
@@ -1,15 +0,0 @@
-.Label {
-  left: 0%;
-  top: 0%;
-  height: 100%;
-  width: 100%;
-  display: flex;
-  padding: 0;
-  background-color: #ffffff;
-  font: 14px helvetica, sans-serif;
-  text-align: center;
-  justify-content: center;
-  align-items: center;
-  white-space: pre;
-  overflow: hidden;
-}
\ No newline at end of file

From e4ff2512f2e091401248bbf2691e7affd30dd303 Mon Sep 17 00:00:00 2001
From: NatLeung96 <nathanael.leung96@gmail.com>
Date: Fri, 4 Apr 2025 09:05:31 +0100
Subject: [PATCH 09/13] Moved static styling to styled API

---
 src/ui/widgets/Label/label.tsx | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/ui/widgets/Label/label.tsx b/src/ui/widgets/Label/label.tsx
index 04f786b5..5d11c422 100644
--- a/src/ui/widgets/Label/label.tsx
+++ b/src/ui/widgets/Label/label.tsx
@@ -14,7 +14,7 @@ import {
   FloatPropOpt,
   MacrosPropOpt
 } from "../propTypes";
-import { Typography } from "@mui/material";
+import { Typography as MuiTypography, styled } from "@mui/material";
 import { diamondTheme } from "../../../diamondTheme";
 
 const LabelProps = {
@@ -38,6 +38,14 @@ const LabelWidgetProps = {
   ...WidgetPropType
 };
 
+const Typography = styled(MuiTypography)({
+  width: "100%",
+  height: "100%",
+  display: "block",
+  overflow: "hidden",
+  padding: 0
+});
+
 export const LabelComponent = (
   props: InferWidgetProps<typeof LabelProps>
 ): JSX.Element => {
@@ -49,7 +57,7 @@ export const LabelComponent = (
     textAlignV = "top",
     text = "",
     rotationStep = 0,
-    wrapWords
+    wrapWords = true
   } = props;
   const backgroundColor = transparent
     ? "transparent"
@@ -77,9 +85,6 @@ export const LabelComponent = (
     <Typography
       noWrap={!wrapWords}
       sx={{
-        width: "100%",
-        height: "100%",
-        display: "flex",
         justifyContent: alignment,
         alignItems: alignmentV,
         textAlign: textAlign,

From 9846f9b5f1ea20ad8e0c12c374c518b73dd4599f Mon Sep 17 00:00:00 2001
From: NatLeung96 <nathanael.leung96@gmail.com>
Date: Fri, 4 Apr 2025 09:23:54 +0100
Subject: [PATCH 10/13] Updated tests and snapshots

---
 .../Label/__snapshots__/label.test.tsx.snap   | 22 ++++++++++++++++++-
 src/ui/widgets/Label/label.test.tsx           | 18 +++++----------
 .../Symbol/__snapshots__/symbol.test.tsx.snap |  2 +-
 3 files changed, 28 insertions(+), 14 deletions(-)

diff --git a/src/ui/widgets/Label/__snapshots__/label.test.tsx.snap b/src/ui/widgets/Label/__snapshots__/label.test.tsx.snap
index 4a7823a1..0d6a2df3 100644
--- a/src/ui/widgets/Label/__snapshots__/label.test.tsx.snap
+++ b/src/ui/widgets/Label/__snapshots__/label.test.tsx.snap
@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`<Label /> > it matches the snapshot 1`] = `
+exports[`<Label /> > it handles transparent prop`] = `
 <DocumentFragment>
   <p
     class="MuiTypography-root MuiTypography-body1 MuiTypography-noWrap css-k3pvii-MuiTypography-root"
@@ -9,3 +9,23 @@ exports[`<Label /> > it matches the snapshot 1`] = `
   </p>
 </DocumentFragment>
 `;
+
+exports[`<Label /> > it handles transparent prop 1`] = `
+<DocumentFragment>
+  <p
+    class="MuiTypography-root MuiTypography-body1 css-io8o49-MuiTypography-root"
+  >
+    hello
+  </p>
+</DocumentFragment>
+`;
+
+exports[`<Label /> > it matches the snapshot 1`] = `
+<DocumentFragment>
+  <p
+    class="MuiTypography-root MuiTypography-body1 css-io8o49-MuiTypography-root"
+  >
+    hello
+  </p>
+</DocumentFragment>
+`;
diff --git a/src/ui/widgets/Label/label.test.tsx b/src/ui/widgets/Label/label.test.tsx
index 178b10c7..10fae2f0 100644
--- a/src/ui/widgets/Label/label.test.tsx
+++ b/src/ui/widgets/Label/label.test.tsx
@@ -13,16 +13,10 @@ describe("<Label />", (): void => {
     expect(screen.getByText("hello")).toBeInTheDocument();
   });
 
-  // test("it handles transparent prop", (): void => {
-  //   render(<LabelComponent text="hello" transparent={true} />);
-  //   const label = screen.getByText("hello");
-  //   // The text is in the span, not the parent div.
-  //   if (label.parentElement && "style" in label.parentElement) {
-  //     expect(label.parentElement.style).toHaveProperty(
-  //       "backgroundColor",
-  //       "transparent"
-  //     );
-  //   }
-  //   expect.assertions(1);
-  // });
+  test("it handles transparent prop", (): void => {
+    const { asFragment } = render(
+      <LabelComponent text="hello" transparent={true} />
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
 });
diff --git a/src/ui/widgets/Symbol/__snapshots__/symbol.test.tsx.snap b/src/ui/widgets/Symbol/__snapshots__/symbol.test.tsx.snap
index c6486ef8..017c94ac 100644
--- a/src/ui/widgets/Symbol/__snapshots__/symbol.test.tsx.snap
+++ b/src/ui/widgets/Symbol/__snapshots__/symbol.test.tsx.snap
@@ -83,7 +83,7 @@ exports[`<Symbol /> from .opi file > matches snapshot 1`] = `
       style="padding: 5%;"
     >
       <p
-        class="MuiTypography-root MuiTypography-body1 MuiTypography-noWrap css-k3pvii-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-io8o49-MuiTypography-root"
       >
         Fake value
       </p>

From 7bc434da81e531683d3d4f03ed61aa0b86037c1b Mon Sep 17 00:00:00 2001
From: NatLeung96 <nathanael.leung96@gmail.com>
Date: Fri, 4 Apr 2025 09:40:53 +0100
Subject: [PATCH 11/13] Set display to flex

---
 src/ui/widgets/Label/label.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ui/widgets/Label/label.tsx b/src/ui/widgets/Label/label.tsx
index 5d11c422..0cb4966f 100644
--- a/src/ui/widgets/Label/label.tsx
+++ b/src/ui/widgets/Label/label.tsx
@@ -41,7 +41,7 @@ const LabelWidgetProps = {
 const Typography = styled(MuiTypography)({
   width: "100%",
   height: "100%",
-  display: "block",
+  display: "flex",
   overflow: "hidden",
   padding: 0
 });

From 721102b016569c4eb96ddcb8075baa63e7cb1f15 Mon Sep 17 00:00:00 2001
From: NatLeung96 <nathanael.leung96@gmail.com>
Date: Fri, 4 Apr 2025 10:10:59 +0100
Subject: [PATCH 12/13] Updated snapshots

---
 src/ui/widgets/Label/__snapshots__/label.test.tsx.snap | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/ui/widgets/Label/__snapshots__/label.test.tsx.snap b/src/ui/widgets/Label/__snapshots__/label.test.tsx.snap
index 0d6a2df3..9d92959c 100644
--- a/src/ui/widgets/Label/__snapshots__/label.test.tsx.snap
+++ b/src/ui/widgets/Label/__snapshots__/label.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`<Label /> > it handles transparent prop`] = `
 exports[`<Label /> > it handles transparent prop 1`] = `
 <DocumentFragment>
   <p
-    class="MuiTypography-root MuiTypography-body1 css-io8o49-MuiTypography-root"
+    class="MuiTypography-root MuiTypography-body1 css-1fe740m-MuiTypography-root"
   >
     hello
   </p>
@@ -23,7 +23,7 @@ exports[`<Label /> > it handles transparent prop 1`] = `
 exports[`<Label /> > it matches the snapshot 1`] = `
 <DocumentFragment>
   <p
-    class="MuiTypography-root MuiTypography-body1 css-io8o49-MuiTypography-root"
+    class="MuiTypography-root MuiTypography-body1 css-1fe740m-MuiTypography-root"
   >
     hello
   </p>

From dda405840ec98984ad61ef794e5e60f54182b07c Mon Sep 17 00:00:00 2001
From: NatLeung96 <nathanael.leung96@gmail.com>
Date: Fri, 4 Apr 2025 10:16:27 +0100
Subject: [PATCH 13/13] Updated snapshot

---
 src/ui/widgets/Symbol/__snapshots__/symbol.test.tsx.snap | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ui/widgets/Symbol/__snapshots__/symbol.test.tsx.snap b/src/ui/widgets/Symbol/__snapshots__/symbol.test.tsx.snap
index 017c94ac..55519cea 100644
--- a/src/ui/widgets/Symbol/__snapshots__/symbol.test.tsx.snap
+++ b/src/ui/widgets/Symbol/__snapshots__/symbol.test.tsx.snap
@@ -83,7 +83,7 @@ exports[`<Symbol /> from .opi file > matches snapshot 1`] = `
       style="padding: 5%;"
     >
       <p
-        class="MuiTypography-root MuiTypography-body1 css-io8o49-MuiTypography-root"
+        class="MuiTypography-root MuiTypography-body1 css-1fe740m-MuiTypography-root"
       >
         Fake value
       </p>