Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Allow 16 lines of text in the rich text editors #10670

Merged
merged 6 commits into from
Apr 27, 2023
Merged

Allow 16 lines of text in the rich text editors #10670

Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9980b6a
bump max-height to 16 lines in the rich text editors
Apr 20, 2023
dac714e
Merge branch 'develop' into alunturner/increase-max-height-rte
alunturner Apr 20, 2023
2447fbf
Merge branch 'develop' into alunturner/increase-max-height-rte
alunturner Apr 20, 2023
2fa7d53
Merge branch 'develop' into alunturner/increase-max-height-rte
alunturner Apr 21, 2023
0fca327
Merge branch 'develop' into alunturner/increase-max-height-rte
alunturner Apr 26, 2023
b913e91
Merge branch 'develop' into alunturner/increase-max-height-rte
alunturner Apr 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions res/css/views/rooms/wysiwyg_composer/_SendWysiwygComposer.pcss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,8 +71,8 @@ limitations under the License.
/* while keeping the autocomplete at the top */
/* of the composer. The parent needs to be a flex container for this to work. */
margin: auto 0;
/* max-height at this level so autocomplete doesn't get scrolled too */
max-height: 140px;
/* the line height is $font-22px (set in _Editor.pcss) and we want to display 16 lines */
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like there's a few bits that are hardcoding 22px in this file too. min-height just a few lines above being a good example.

That looks good in principle but I'm a bit worried about the connection with _Editor.pcss and how easily this might get thrown out the window. But I'm not sure I can think of a much better way to connect these two

Copy link
Contributor Author

@alunturner alunturner Apr 20, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What do you mean by thrown out of the window? As in it forces something useful offscreen?

I've played around with it in a browser at different zoom levels and in it's current guise, it was usable at full height up to 200% zoom on a laptop (16" screen). Do we have any aims in terms of the zoom levels we try to support?

Usability can be increased by doing something like

      @media screen and (max-height: 550px) {
                .mx_WysiwygComposer_Editor_content {
                    max-height: calc(8 * $font-22px);
                }
            }

To help us out on tiny screens (effectively how Chrome seems to represent heavily zoomed in views). The snippet above would keep it usable to 300% zoom.

max-height: calc(16 * $font-22px);
overflow-y: auto;
}
}
Expand Down