Fix Ghost Focus Dead Zone Between Rubric Feedback Text Boxes

[Copilot]

Clicking in the margin between the "Great Job" and "Think About" feedback text boxes caused the cursor to enter an unrecoverable ghost-focused state where no input was possible.

Root Cause

A CSS specificity conflict between two MUI sx props silently zeroed out TableCell padding, while TextField retained an 8px p: 1 wrapper padding — creating a dead zone on each side of every input.

• TableRow sx: '& .MuiTableCell-root': { padding: '0px' } — specificity (0,2,0), overrides TableCell's own padding: '0.75em' at (0,1,0)
• TextField sx: p: 1 — 8px on the FormControl wrapper (not the <textarea>)
• Net result: ~17px unclickable gap (8px + 1px border + 8px) where clicks land on a non-focusable div

Changes

• apps/frontend & apps/portal — feedback-row.tsx:
  • Removed padding: '0px' from TableRow's nested '& .MuiTableCell-root' selector, allowing TableCell's padding: '0.75em' to apply correctly
  • Removed p: 1 from TextField's sx, eliminating the dead-zone wrapper padding

- '& .MuiTableCell-root': {
-   padding: '0px',
-   '&:first-of-type': { borderRadius: '0 0 0 12px' },
+ '& .MuiTableCell-root': {
+   '&:first-of-type': { borderRadius: '0 0 0 12px' },

- sx={{
-   p: 1,
-   borderRadius: '12px',
+ sx={{
+   borderRadius: '12px',

The TableCell now correctly provides 0.75em spacing; TextField fills the padded area with no dead zones. Border-radius styles on the row are preserved.

Type of change

• Bug fix (non-breaking change which fixes an issue)

Screenshots

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my code
• My changes generate no new warnings