OpenNoodl/dev-docs/tasks/phase-3-editor-ux-overhaul/TASK-013-integration-bugfixes/BUG-9-property-panel-width.md

BUG-9: Properties Panel Not Responsive to Width Changes

Priority: P1 - UX annoyance
Status: 🔴 Research needed
Reported: January 16, 2026

---

Issue

When resizing the left sidebar panel by dragging:

• ✅ The left panel container correctly expands/shrinks
• ❌ The properties panel content stays fixed width and doesn't expand to fill the available space
• Result: Wasted whitespace when panel is widened

---

Expected Behavior

When the user widens the left panel by dragging:

1. The entire side panel container expands
2. The properties panel content responsively expands to use the new width
3. Form fields, inputs, and content fill the available horizontal space

---

Current Behavior

1. User widens the left panel by dragging
2. The container expands
3. The properties panel content stays at a fixed width
4. Large empty space appears on the right side of the panel

---

Likely Causes

1. Fixed Width on PropertyEditor Container

The property editor or one of its parent containers likely has a fixed width value instead of responsive sizing:

// Problem pattern:
.PropertyEditor {
  width: 280px; // ❌ Fixed - won't expand
}

// Should be:
.PropertyEditor {
  width: 100%; // ✅ Fills available space
  max-width: 400px; // Optional upper limit
}

2. Missing Flex Properties

Parent containers may be missing proper flex properties:

// Problem pattern:
.Container {
  display: flex;
}

// Should have:
.Container {
  display: flex;
  flex: 1; // Grow to fill space
}

3. Incorrect Content Sizing

Inner content may have fixed widths that override responsive parent:

// Problem pattern:
.PropertyPanelInput {
  width: 200px; // ❌ Fixed
}

// Should be:
.PropertyPanelInput {
  width: 100%; // ✅ Fills parent
}

---

Files to Investigate

Primary Files

1. packages/noodl-editor/src/editor/src/views/panels/propertyeditor/index.tsx

   • Main property editor container
   • Check container width styling

2. packages/noodl-editor/src/editor/src/views/panels/propertyeditor/propertyeditor.scss

   • Check for fixed width values
   • Verify flex properties

3. packages/noodl-editor/src/editor/src/views/SidePanel/SidePanel.model.scss

   • Panel container styling
   • Check how panel receives width

Component Files

4. packages/noodl-core-ui/src/components/property-panel/PropertyPanelInput/PropertyPanelInput.module.scss

   • Input field sizing
   • May have fixed widths

5. packages/noodl-core-ui/src/components/property-panel/PropertyPanelRow/PropertyPanelRow.module.scss

   • Row container sizing

SideNavigation Container

6. packages/noodl-core-ui/src/components/app/SideNavigation/SideNavigation.module.scss
   • May constrain panel width

---

Investigation Steps

1. Inspect in DevTools

Open DevTools (Cmd+Opt+I) and:

1. Select the property panel container
2. Manually adjust width in CSS
3. Identify which element is constraining width

2. Search for Fixed Widths

# Find fixed width declarations in property panel files
grep -rn "width:" packages/noodl-editor/src/editor/src/views/panels/propertyeditor/
grep -rn "width:" packages/noodl-core-ui/src/components/property-panel/

3. Check Flex Properties

# Find flex-related styles
grep -rn "flex:" packages/noodl-editor/src/editor/src/views/panels/propertyeditor/
grep -rn "flex-grow\|flex-shrink" packages/noodl-editor/src/editor/src/views/panels/propertyeditor/

---

Potential Fixes

Option A: Make PropertyEditor Container Responsive

.PropertyEditor {
  width: 100%;
  min-width: 200px; // Minimum usable width
  max-width: 100%; // Allow full expansion
}

Option B: Add Flex Growth

.PanelItem {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
}

.PropertyEditor {
  flex: 1;
  width: 100%;
}

Option C: Fix Input Field Widths

If inputs have fixed widths:

.PropertyPanelInput {
  width: 100%;
  max-width: none; // Remove any max-width constraint
}

---

Testing Plan

• Open a project and select a node with properties
• Drag the left panel border to widen it
• Verify property panel content expands with the panel
• Test with different panel widths (narrow, medium, wide)
• Verify input fields remain usable at all sizes
• Test with nested property groups (expanded sections)
• Test on different node types (simple vs complex properties)

---

Success Criteria

• Properties panel content fills available horizontal space
• No large empty areas when panel is widened
• Input fields expand proportionally
• Layout remains usable at minimum width
• No overflow/cutoff issues at narrow widths
• Smooth resize without jank

---

Related

• This may affect other panels (Components, Cloud Functions, etc.)
• Sidebar resize is handled by the SideNavigation component
• Property panel renders into a slot provided by SidePanel

---

Last Updated: January 16, 2026