[web] Description box shouldn't be resizable horizontally
ClosedPublic
Actions

Authored by rohan on Oct 19 2022, 9:34 AM.

Details

Reviewers

atul
ginsu
michal

Commits

rCOMMe9829c6ab40c: [web] Description box shouldn't be resizable horizontally

Summary

Set the textarea to be resizable only vertically through it's supported CSS properties. Also set a min-width so it isn't resizable small
enough to cut out the description.

Linear: https://linear.app/comm/issue/ENG-2016/description-box-shouldnt-be-resizable-horizontally

Test Plan

Works as expected, and tested before & after this change.

Before

After

Diff Detail

Repository

rCOMM Comm

Lint

Lint Not Applicable

Unit

Tests Not Applicable

Event Timeline

rohan created this revision.Oct 19 2022, 9:34 AM

Herald added subscribers: • abosh, tomek, ashoat. · View Herald TranscriptOct 19 2022, 9:34 AM

rohan edited the summary of this revision. (Show Details)Oct 19 2022, 9:35 AM

rohan edited the test plan for this revision. (Show Details)

rohan attached a referenced file: F203164: Before.mov. (Show Details)

rohan attached a referenced file: F203163: After.mov. (Show Details)

I'm not sure why Phabricator isn't rendering the before video properly, but if needed you can download the 15 second video to see what the current state is

Harbormaster completed remote builds in B12868: Diff 17659.Oct 19 2022, 9:44 AM

rohan requested review of this revision.Oct 19 2022, 9:44 AM

rohan attached a referenced file: F203162: Before.mov. (Show Details)Oct 19 2022, 9:45 AM

atul accepted this revision.Oct 19 2022, 10:22 AM

atul added inline comments.

web/modals/threads/settings/thread-settings-general-tab.css
24 ↗	(On Diff #17659)	Is it possible to set the minimum height based on the number of lines in `textarea` rather than hardcoding pixel values? I see that `textarea` has a `rows` prop, it would be nice if it had a `minRows` prop or something... Can you do some brief research on this sort of alternative approach before landing? Feel free to land as is if you don't find anything

This revision is now accepted and ready to land.Oct 19 2022, 10:22 AM

rohan added inline comments.Oct 20 2022, 5:24 AM

web/modals/threads/settings/thread-settings-general-tab.css
24 ↗	(On Diff #17659)	So it looks like the number of rows in the textArea is basically the number of `\n` or linebreaks when typing. This is pretty easy to get with RegEx, but if you don't have any linebreaks, then your text is just overflowing and going to the next line. This is still considered 1 row, so to get the true number of rows it seems like it involves some JS manipulation based on CSS attributes, but it doesn't seem very consistent from what I've seen.