diff --git a/src/components/ParamSection/ItemContent.tsx b/src/components/ParamSection/ItemContent.tsx
index efa4700..193fb22 100644
--- a/src/components/ParamSection/ItemContent.tsx
+++ b/src/components/ParamSection/ItemContent.tsx
@@ -13,6 +13,7 @@ const nameContainerSx = {
display: "flex",
alignItems: "center",
columnGap: 1.25,
+ whiteSpace: "nowrap",
};
type ParamItemContentProps = {
diff --git a/src/components/ParamSection/LeafItemContent.tsx b/src/components/ParamSection/LeafItemContent.tsx
index 1e0318a..dc3a5e3 100644
--- a/src/components/ParamSection/LeafItemContent.tsx
+++ b/src/components/ParamSection/LeafItemContent.tsx
@@ -19,6 +19,23 @@ import { originalDataAtom } from "@/atoms/api";
import { roundAtom, editModeAtom, editedDataAtom } from "@/atoms/paramList";
import ItemContent from "./ItemContent";
+const leafItemContentSx = {
+ pl: "24px",
+ background: "white",
+};
+
+const leafItemReadModeContentSx = {
+ ml: 2,
+ display: "flex",
+ overflow: "hidden",
+ direction: "rtl", // Hack to overflow to the left instead of the right
+};
+
+const leafItemReadModeTextSx = {
+ whiteSpace: "nowrap",
+ direction: "ltr", // Switch direction back so text is not messed up
+};
+
type LeafItemReadModeContentProps = {
/** Leaf value to display. */
leaf: Leaf;
@@ -28,7 +45,13 @@ type LeafItemReadModeContentProps = {
function LeafItemReadModeContent({ leaf }: LeafItemReadModeContentProps) {
const [round] = useAtom(roundAtom);
- return {leafToString(leaf, round)};
+ return (
+
+
+ {leafToString(leaf, round)}
+
+
+ );
}
type LeafItemEditModeContentProps = {
@@ -235,11 +258,6 @@ function LeafItemEditModeContent({ editedLeaf, path }: LeafItemEditModeContentPr
);
}
-const leafItemContentSx = {
- pl: "24px",
- background: "white",
-};
-
type LeafItemContentProps = {
/** Name to display. */
name: string;