full screen

static/css/wiki.css

@@ -851,6 +851,7 @@ body.editor-mode .editor-shell .EasyMDEContainer {
   display: grid;
   min-height: 0;
   height: 100%;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   grid-template-rows: auto minmax(0, 1fr) auto;
   overflow: hidden;
 }
@@ -858,15 +859,18 @@ body.editor-mode .editor-shell .EasyMDEContainer {
 body.editor-mode .EasyMDEContainer .editor-toolbar {
   position: relative;
   z-index: 25;
+  grid-column: 1 / -1;
   grid-row: 1;
   margin: 0;
   background: white;
 }
 
 body.editor-mode .EasyMDEContainer .CodeMirror {
+  grid-column: 1;
   grid-row: 2;
   min-height: 0 !important;
   height: 100% !important;
+  width: 100% !important;
   overflow: hidden;
 }
 
@@ -879,22 +883,86 @@ body.editor-mode .EasyMDEContainer .CodeMirror-scroll {
 }
 
 body.editor-mode .EasyMDEContainer .editor-statusbar {
+  grid-column: 1 / -1;
   grid-row: 3;
   min-height: var(--editor-status-height);
   background: white;
 }
 
+/* EasyMDE fullscreen needs to respect the wiki's editor chrome instead of
+   anchoring against the browser viewport with no offset. Keep the toolbar and
+   status bar pinned at the edges while the editor fills the remaining space. */
+body.editor-mode .EasyMDEContainer .editor-toolbar.fullscreen,
+body.editor-mode .EasyMDEContainer .editor-statusbar.fullscreen {
+  position: fixed !important;
+  left: 0;
+  right: 0;
+  z-index: 130;
+}
+
+body.editor-mode .EasyMDEContainer .editor-toolbar.fullscreen {
+  top: 0;
+  width: 100%;
+  height: 50px;
+  border: 0;
+  border-radius: 0;
+  background: white;
+}
+
+body.editor-mode .EasyMDEContainer .editor-statusbar.fullscreen {
+  bottom: 0;
+  min-height: 28px;
+  border-top: 1px solid #cfd5dc;
+  background: white;
+}
+
+body.editor-mode .EasyMDEContainer .CodeMirror-fullscreen {
+  position: fixed !important;
+  top: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  width: auto !important;
+  height: auto !important;
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+  z-index: 120;
+}
+
+body.editor-mode .EasyMDEContainer:has(.editor-toolbar.fullscreen) .CodeMirror-fullscreen.CodeMirror-sided {
+  top: 50px !important;
+  right: auto !important;
+  bottom: 0 !important;
+  width: 50% !important;
+}
+
+body.editor-mode .EasyMDEContainer:has(.editor-toolbar.fullscreen) .editor-preview-side.editor-preview-active-side {
+  position: fixed;
+  top: 50px;
+  right: 0;
+  bottom: 0;
+  left: auto;
+  width: 50%;
+  height: auto;
+  z-index: 125;
+  overflow-y: auto;
+}
+
+body.editor-mode .EasyMDEContainer .editor-toolbar.fullscreen::before,
+body.editor-mode .EasyMDEContainer .editor-toolbar.fullscreen::after {
+  display: none;
+}
+
 /* EasyMDE normally positions the side preview against the viewport. In the
    wiki it belongs to the editor work area, so it gets its own independent
    scroll region beside CodeMirror instead. */
 body.editor-mode .EasyMDEContainer .editor-preview-side {
-  position: absolute;
+  position: static;
+  grid-column: 2;
+  grid-row: 2;
   z-index: 20;
-  top: var(--editor-toolbar-height);
+  width: auto;
-  right: 0;
-  bottom: var(--editor-status-height);
-  left: 50%;
-  width: 50%;
   height: auto;
   min-height: 0;
   margin: 0;
@@ -905,7 +973,7 @@ body.editor-mode .EasyMDEContainer .editor-preview-side {
 }
 
 body.editor-mode .EasyMDEContainer .CodeMirror-sided {
-  width: 50% !important;
+  width: 100% !important;
 }
 
 body.editor-mode .editor-metadata-row {