Stylus Editor - Floating Sidebar: Adds more space on the left, but then wastes even more space on the right #11

Closed
opened 1 year ago by Karl_255 · 4 comments

Describe the issue:
The problem is the property on line 169. It adds a right padding of 400px to every line of the editor, effectively making the rightmost 400px of code space unusable. As the comment says, that padding is so that the floating sidebar doesn't cover up any code. The default sidebar is 280px wide so this style does the opposite of that it is intended to do.

Example:

Line 42 (and 43) shouldn't be wrapping, there's plenty of space
image

It is wrapping because the right padding makes it do that.

This is what it looks like when the extension is off:
image

Link to style:
https://userstyles.world/style/84/stylus-editor-floating-sidebar
https://codeberg.org/Freeplay/UserStyles/src/branch/main/stylus_floating-sidebar.user.css

Browser + Version:
Firefox 94.0.2

  • I have made sure this issue hasn't already been posted.
  • I have made sure I am on the latest version of my Browser.
  • I am using the Stylus browser extension, not 'Stylish'.
**Describe the issue:** The problem is the property on line 169. It adds a right padding of 400px to every line of the editor, effectively making the rightmost 400px of code space unusable. As the comment says, that padding is so that the floating sidebar doesn't cover up any code. The default sidebar is 280px wide so this style does the opposite of that it is intended to do. Example: Line 42 (and 43) shouldn't be wrapping, there's plenty of space ![image](/attachments/d7118bed-cf89-4b66-a4a1-189c5daf9353) It is wrapping because the right padding makes it do that. This is what it looks like when the extension is off: ![image](/attachments/ddbe6862-aee2-405c-8ca9-139385f1f9f5) **Link to style:** https://userstyles.world/style/84/stylus-editor-floating-sidebar https://codeberg.org/Freeplay/UserStyles/src/branch/main/stylus_floating-sidebar.user.css **Browser + Version:** Firefox 94.0.2 - [x] I have made sure this issue hasn't already been posted. - [x] I have made sure I am on the latest version of my Browser. - [x] I am using the [Stylus](https://add0n.com/stylus.html) browser extension, not 'Stylish'.
Karl_255 added the
bug
label 1 year ago
Owner

Oooh, I completely forgot about word wrapping. I'll try to fix it, but for now you can disable word wrapping.

Oooh, I completely forgot about word wrapping. I'll try to fix it, but for now you can disable word wrapping.
Owner

That was a lot easier than I thought it would be to fix, check for updates in Stylus! :D

That was a lot easier than I thought it would be to fix, check for updates in Stylus! :D
Freeplay closed this issue 1 year ago
Poster

Well, now the rightmost 400px are usable, but also there's now a horizontal scrollbar always present at the bottom, even if there is plenty of space for the code and there would be no need to scroll right to reveal potentially hidden text (hidden by the floating sidebar).

I have a better idea though! I tested around a bit and found that Stylus adds the class CodeMirror-wrap to the editor if word wrap is on. With that, you could have the sidebar, instead of "rolling up", hide behind the right screen edge and pop back when hoeverd (kinda like a side-tab). With this, only a small amount of the rightmost editor space would need to be "reserved" for the sidebar edge.

Specifically, that code you changed could be simplified to something like this (maybe change the 40px to something else):

/* ... */
.CodeMirror-code {
	pre.CodeMirror-line, pre.CodeMirror-line-like {
		max-width: calc(100% - 40px);
	}
}
/* ... */

This, and changing some transforms, should do it. The floating sidebar doesn't overlap code ever and very little space is wasted. I think this kind of floating sidebar makes a lot more sense with word wrapping enabled.

Well, now the rightmost 400px are usable, but also there's now a horizontal scrollbar always present at the bottom, even if there is plenty of space for the code and there would be no need to scroll right to reveal potentially hidden text (hidden by the floating sidebar). I have a better idea though! I tested around a bit and found that Stylus adds the class `CodeMirror-wrap` to the editor if word wrap is on. With that, you could have the sidebar, instead of "rolling up", hide behind the right screen edge and pop back when hoeverd (kinda like a side-tab). With this, only a small amount of the rightmost editor space would need to be "reserved" for the sidebar edge. Specifically, that code you changed could be simplified to something like this (maybe change the 40px to something else): ```css /* ... */ .CodeMirror-code { pre.CodeMirror-line, pre.CodeMirror-line-like { max-width: calc(100% - 40px); } } /* ... */ ``` This, and changing some `transform`s, should do it. The floating sidebar doesn't overlap code ever and very little space is wasted. I think this kind of floating sidebar makes a lot more sense with word wrapping enabled.
Owner

Done. Check for updates and enable the "Appear as a tab" option

Done. Check for updates and enable the "Appear as a tab" option
Sign in to join this conversation.
No Milestone
No Assignees
2 Participants
Notifications
Due Date

No due date set.

Dependencies

No dependencies set.

Reference: Freeplay/UserStyles#11
Loading…
There is no content yet.