Add code editor for maputnik (#1426)

## Launch Checklist

This PR adds the ability to look at the entire style and edit it in a
code editor that supports syntax highlight, errors, search and more.

- Resolves #820

CC: @Kanahiro as I know you did something similar, probably has better
performance...

After:
<img width="1920" height="937" alt="image"
src="https://github.com/user-attachments/assets/f925cf92-2623-4390-8f75-14d7f6a79171"
/>


 - [x] Briefly describe the changes in this PR.
 - [x] Link to related issues.
- [x] Include before/after visuals or gifs if this PR includes visual
changes.
 - [x] Write tests for all new functionality.
 - [x] Add an entry to `CHANGELOG.md` under the `## main` section.

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Co-authored-by: Frank Elsinga <frank@elsinga.de>

src/styles/_layout.scss

@@ -40,6 +40,13 @@
     position: relative;
   }
 
+  &-code-editor {
+    width: 570px;
+    background-color: vars.$color-black;
+    // scroll-container is position: absolute
+    position: relative;
+  }
+
   &-bottom {
     position: fixed;
     bottom: 0;

src/styles/_toolbar.scss

@@ -43,7 +43,8 @@
 .maputnik-toolbar-link {
   vertical-align: top;
   height: vars.$toolbar-height;
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
   padding: vars.$margin-3;
   font-size: vars.$font-size-5;
   cursor: pointer;