fix (layout): broken layout

- [X] menubar.css: when filename is too long, the menubar would overflow past the
  screen
- [X] editor.css: in some window size, the editor would enlarge itself.
  This was an issue with codemirror and flexbox that is known:
  https://github.com/codemirror/codemirror5/issues/4895

public/assets/pages/viewerpage/application_editor.css

@@ -1,24 +1,23 @@
+/* https://github.com/codemirror/codemirror5/issues/4895 */
 .component_editor {
-    display: flex;
-    flex-grow: 1;
-    min-height: 0;
-    width: 100%;
-}
-.component_editor > div {
-    width: 100%;
     position: relative;
+    flex-grow: 1;
 }
-.component_editor > div #editor {
-    width: 100%;
+.component_editor .CodeMirror {
     position: absolute;
-    left: 0;
     top: 0;
     bottom: 0;
+    left: 0;
+    right: 0;
+    height: 100%;
+}
+
+/* UX Integration */
+.CodeMirror-scroll {
+    -webkit-overflow-scrolling: touch;
 }
 
 .CodeMirror {
-    width: 100%;
-    height: 100%;
     color: #3b4045;
     background: var(--bg-color);
 }
@@ -28,10 +27,6 @@
     padding-bottom: 5px;
 }
 
-.CodeMirror-scroll {
-    -webkit-overflow-scrolling: touch;
-}
-
 .CodeMirror-foldmarker {
     padding: 5px;
 }

public/assets/pages/viewerpage/component_menubar.css

@@ -19,7 +19,7 @@
 .component_menubar .titlebar {
     flex: 1;
     padding: 8px 0;
-    width: 100%;
+    width: 0;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;