From b52e8898134ab05cc18b890ff432c1f1792fa5c8 Mon Sep 17 00:00:00 2001
From: Zohar Manor-Abel <zohar.manor-abel@diamond.ac.uk>
Date: Thu, 15 Oct 2026 17:26:13 +0100
Subject: [PATCH] Grey disabled JsonForms labels to match their inputs

- JsonForms material renderers disable the input but not its FormControl or FormControlLabel
- Style labels in the JsonForms vertical layout renderer with text.disabled, so any theme gets it
---
 .../helpers/jsonforms/layouts/VerticalLayout.test.tsx    | 9 +++++++++
 .../helpers/jsonforms/layouts/VerticalLayout.tsx         | 9 +++++++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/helpers/jsonforms/layouts/VerticalLayout.test.tsx b/src/components/helpers/jsonforms/layouts/VerticalLayout.test.tsx
index c2dbdc5b..6e660f00 100644
--- a/src/components/helpers/jsonforms/layouts/VerticalLayout.test.tsx
+++ b/src/components/helpers/jsonforms/layouts/VerticalLayout.test.tsx
@@ -55,4 +55,13 @@ describe("VerticalLayout", () => {
     expect(wrappers).toHaveLength(2);
     expect(wrappers[1]).toBeEmptyDOMElement();
   });
+
+  test("greys labels of disabled inputs", () => {
+    renderForm();
+    const css = Array.from(document.querySelectorAll("style"))
+      .map((style) => style.textContent)
+      .join("");
+    expect(css).toMatch(/:has\(> \.MuiInputBase-root\.Mui-disabled\)/);
+    expect(css).toMatch(/:has\(input:disabled\)/);
+  });
 });
diff --git a/src/components/helpers/jsonforms/layouts/VerticalLayout.tsx b/src/components/helpers/jsonforms/layouts/VerticalLayout.tsx
index f065f284..96ee7874 100644
--- a/src/components/helpers/jsonforms/layouts/VerticalLayout.tsx
+++ b/src/components/helpers/jsonforms/layouts/VerticalLayout.tsx
@@ -26,8 +26,13 @@ const VerticalLayoutComponent = ({
     <Stack
       spacing={2}
       useFlexGap
-      // Hidden fields render nothing; drop their wrappers so they add no gap.
-      sx={{ "& > :empty": { display: "none" } }}
+      sx={{
+        // Hidden fields render nothing; drop their wrappers so they add no gap.
+        "& > :empty": { display: "none" },
+        // Material renderers disable the input but not its label.
+        "& .MuiFormControl-root:has(> .MuiInputBase-root.Mui-disabled) > .MuiInputLabel-root, & .MuiFormControlLabel-root:has(input:disabled) > .MuiFormControlLabel-label":
+          { color: "text.disabled" },
+      }}
     >
       {elements.map((child, index) => (
         <div key={`${path}-${index}`}>