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;