From 7a05af5122eb499250f89ac9f0115cc3e49f5c92 Mon Sep 17 00:00:00 2001
From: Patricia Romaniuc <romaniucpatricia@yahoo.com>
Date: Fri, 6 Mar 2026 13:35:40 +0200
Subject: [PATCH] fix(rubric): rubricless intructions fix PD-5657

---
 packages/rubric/src/__tests__/rubric.test.jsx |  5 +++
 packages/rubric/src/authoring.jsx             | 38 +++++++++++--------
 2 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/packages/rubric/src/__tests__/rubric.test.jsx b/packages/rubric/src/__tests__/rubric.test.jsx
index 0274101a2..34be5d1f8 100644
--- a/packages/rubric/src/__tests__/rubric.test.jsx
+++ b/packages/rubric/src/__tests__/rubric.test.jsx
@@ -13,6 +13,11 @@ jest.mock('@pie-lib/editable-html-tip-tap', () => {
 
 jest.mock('@pie-lib/config-ui', () => ({
   FeedbackConfig: ({ feedback }) => <div data-testid="feedback-config">{JSON.stringify(feedback)}</div>,
+  InputContainer: ({ children, label }) => (
+    <div data-testid="input-container" data-label={label}>
+      {children}
+    </div>
+  ),
 }));
 
 jest.mock('@hello-pangea/dnd', () => ({
diff --git a/packages/rubric/src/authoring.jsx b/packages/rubric/src/authoring.jsx
index 690b726d8..098e529e8 100644
--- a/packages/rubric/src/authoring.jsx
+++ b/packages/rubric/src/authoring.jsx
@@ -142,12 +142,19 @@ const Container = styled('div')(({ theme }) => ({
   padding: theme.spacing(2),
   margin: theme.spacing(1),
 }));
-const InputContainerWrapper = styled('div')(({ theme }) => ({
+
+const StyledInputContainer = styled(InputContainer)(({ theme }) => ({
   width: '100%',
-  paddingTop: theme.spacing(2),
+  paddingTop: theme.spacing(2.5),
   marginBottom: theme.spacing(2),
-  '& MuiFormControl-root': { width: '100%' },
+  marginTop: theme.spacing(1),
+  '& .MuiFormControl-root': { width: '100%' },
+  '& > .MuiFormLabel-root.MuiInputLabel-shrink': {
+    fontSize: theme.typography.fontSize + 2,
+    transform: 'translate(0, 1.5px) scale(0.75)',
+  },
 }));
+
 const Rubricless = styled('div')(() => ({ display: 'none' }));
 const ConfigHolder = styled('div')(({ theme }) => ({ paddingTop: theme.spacing(1), paddingBottom: theme.spacing(1) }));
 const RubricTitle = styled(Typography)(({ theme }) => ({ paddingLeft: theme.spacing(1), margin: theme.spacing(1) }));
@@ -301,19 +308,18 @@ export class RawAuthoring extends React.Component {
         </FormGroup>
 
         {rubriclessInstructionEnabled && rubricless && (
-          <InputContainerWrapper>
-            <InputContainer label={rubriclessInstruction.label}>
-              <EditableHtml
-                markup={value.rubriclessInstruction || ''}
-                onChange={this.changeRubriclessInstruction}
-                pluginProps={pluginOpts}
-                nonEmpty={false}
-                disableUnderline
-                languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
-                mathMlOptions={mathMlOptions}
-              />
-            </InputContainer>
-          </InputContainerWrapper>
+          <StyledInputContainer label={rubriclessInstruction.label}>
+            <EditableHtml
+              markup={value.rubriclessInstruction || ''}
+              onChange={this.changeRubriclessInstruction}
+              pluginProps={pluginOpts}
+              nonEmpty={false}
+              disableUnderline
+              languageCharactersProps={[{ language: 'spanish' }, { language: 'special' }]}
+              mathMlOptions={mathMlOptions}
+              autoWidthToolbar
+            />
+          </StyledInputContainer>
         )}
 
         <div>