Maximize Text Editor Panel with Maximize Button

[KelvinKKLin]

Context The maximize button should allow users to maximize the text editor component to the width of the screen when pressed.

The Ask Implement the following functionality:

1. When the user opens a note, the width of the text editor should be the default width (800px or 1024px).
2. When the user presses the "Maximize" button, the text editor should enlarge to fill the width of the screen, regardless of user scaling. To achieve this, consider using something akin to the CSS width: 100% instruction. The "Maximize" button should turn into the "Restore" button.
3. When the user presses the "Restore", button, the text editor should revert to being of default width as it was in step 1. The "Restore" button should change into the "Maximize" button.

Additional Details Key files to look at: src/components/editor-component.ts, styles.css.

Read this link for more information on Flexbox (CSS), the technology used to lay out components on the screen: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Line 152 to 161 in styles.css constrain the text editor's default width:

@media (min-width: 1280px) {
  #editor-container {
    flex: 0 0 800px;
  }
}
@media (min-width: 1600px) {
  #editor-container {
    flex: 0 0 1024px;
  }
}

[francium]

@KelvinKKLin This feature should be delayed for now. The Mirror Mark editor can already go fullscreen which I feel is sufficient. The only improvement to that needed is to apply the toolbar fix from this forked version.

[KelvinKKLin]

@KelvinKKLin This feature should be delayed for now. The Mirror Mark editor can already go fullscreen which I feel is sufficient. The only improvement to that needed is to apply the toolbar fix from this forked version.

Ok, sounds good to me.