From dbdcb2d00098b3c8a2cf349f1d1d16ea73ef60b4 Mon Sep 17 00:00:00 2001
From: MickaelK <mickael@kerjean.me>
Date: Tue, 8 Oct 2024 00:56:58 +1100
Subject: [PATCH] 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
---
 .../pages/viewerpage/application_editor.css   | 27 ++++++++-----------
 .../pages/viewerpage/component_menubar.css    |  2 +-
 2 files changed, 12 insertions(+), 17 deletions(-)

diff --git a/public/assets/pages/viewerpage/application_editor.css b/public/assets/pages/viewerpage/application_editor.css
index 45186f6e..d97c626d 100644
--- a/public/assets/pages/viewerpage/application_editor.css
+++ b/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;
 }
diff --git a/public/assets/pages/viewerpage/component_menubar.css b/public/assets/pages/viewerpage/component_menubar.css
index 653bc61f..79310dd2 100644
--- a/public/assets/pages/viewerpage/component_menubar.css
+++ b/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;