Bugfix: Long output content causes full page scroll instead of box sc…#235
Conversation
There was a problem hiding this comment.
Pull request overview
This PR attempts to fix a scrolling issue where long output content causes full page scroll instead of limiting scroll to the textarea box. The fix adds a maxHeight prop to the TextArea component with a default value of "500px".
Key changes:
- Add
maxHeightprop toTextAreaPropsinterface - Set default
maxHeightvalue to "500px" - Pass
maxHeightto the underlying CodeMirror component
| theme = "light", | ||
| lineWrapping = false, | ||
| fixedHeight = true, | ||
| maxHeight = "500px", |
There was a problem hiding this comment.
The new maxHeight prop with a default value of "500px" conflicts with the existing heightLimitExtension mechanism (lines 283-289).
When fixedHeight=true (the default), the component already sets a dynamic max-height via the heightLimitExtension based on line count:
- Desktop: ~5400px (300 lines × 18px)
- Mobile: ~1800px (100 lines × 18px)
The new maxHeight="500px" default will override this existing behavior, effectively breaking the line-based height limiting. This means all textareas will now be capped at 500px regardless of the fixedHeight setting.
Recommendation: Consider one of these approaches:
- Only pass
maxHeightto CodeMirror whenfixedHeight=false, or - Set
maxHeightdefault toundefinedand only apply it when explicitly provided by consumers, or - Conditionally apply maxHeight based on fixedHeight:
maxHeight={isFixedHeight ? undefined : maxHeight}
This maintains backward compatibility while allowing consumers to opt into a fixed max-height when needed.
| maxHeight = "500px", | |
| maxHeight, |
| readOnly?: boolean; | ||
| autoFocus?: boolean; | ||
| rows?: number; | ||
| maxHeight?: string; |
There was a problem hiding this comment.
The new maxHeight prop is missing documentation. Following the pattern of the fixedHeight prop (line 108), consider adding a comment to explain its purpose and interaction with other height-related props.
For example:
maxHeight?: string; // Maximum height in CSS units (e.g., "500px"). Note: when fixedHeight is true, this may conflict with line-based height limiting.| maxHeight?: string; | |
| maxHeight?: string; // Maximum height in CSS units (e.g., "500px"). Note: when fixedHeight is true, this may conflict with line-based height limiting. |
✅ Deploy Preview for freedevtool ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
@waseemkhan00777 this screenshot appears old, can you please try this problem in the main branch and see if it still exists? |
Reduce number of lines so that it shows scrollbars for larger text.
…roll.
Pull Request
📋 Description
Long output content causes full page scroll instead of box scroll.
In many tools, we had the content pull page scroll issue.
The fix is provided to restrict the full page scroll.
Max height is added to common textarea component to handle it.
🔧 Type of Change
📱 Screenshots/Videos
📝 Checklist
🔗 Related Issues
#153