style/scrolling container widget: improve full-height widget handling

Author: adoriandoran

apps/client/src/stylesheets/relation_map.css

@@ -5,7 +5,6 @@
 .note-detail-relation-map {
     height: 100%;
     overflow: hidden !important;
-    padding: 10px;
     position: relative;
 }
 

apps/client/src/stylesheets/style.css

@@ -2516,7 +2516,7 @@ footer.webview-footer button {
     transform: rotate(180deg);
 }
 
-/* CK Edito */
+/* CK Editor */
 
 /* Insert text snippet: limit the width of the listed items to avoid overly long names */
 :root body.desktop div.ck-template-form li.ck-list__item .ck-template-form__text-part > span {
@@ -2546,4 +2546,18 @@ iframe.print-iframe {
 
 .excalidraw.theme--dark canvas {
     --theme-filter: invert(100%) hue-rotate(180deg);
+}
+
+/* Scrolling container */
+
+.scrolling-container:has(> :is(.note-detail.full-height, .note-list-widget.full-height)) {
+    display: flex;
+    flex-direction: column;
+}
+
+.scrolling-container > .note-detail.full-height {
+    position: relative;
+    flex-grow: 1;
+    width: 100%;
+    height: 100%;
 }

apps/client/src/widgets/collections/NoteList.css

@@ -6,7 +6,7 @@
     contain: none !important;
 }
 
-body.prefers-centered-content .note-list-widget {
+body.prefers-centered-content .note-list-widget:not(.full-height) {
     /* Horizontally center the widget in its parent when the "Keep content centered" option is on */
     margin-inline: auto;
 }

apps/client/src/widgets/note_detail.ts

@@ -48,10 +48,6 @@ const TPL = /*html*/`
         /* Horizontally center the widget in its parent when the "Keep content centered" option is on */
         margin-inline: auto;
     }
-
-    .note-detail.full-height {
-        height: 100%;
-    }
     </style>
 </div>
 `;

apps/client/src/widgets/type_widgets/canvas.ts

@@ -13,6 +13,10 @@ import protected_session_holder from "../../services/protected_session_holder.js
 const TPL = /*html*/`
     <div class="canvas-widget note-detail-canvas note-detail-printable note-detail">
         <style>
+        .canvas-widget {
+            height: 100%;
+        }
+
         .excalidraw .App-menu_top .buttonList {
             display: flex;
         }

apps/client/src/widgets/type_widgets/relation_map.ts

@@ -103,7 +103,7 @@ const linkOverlays = [
 ];
 
 const TPL = /*html*/`
-<div class="note-detail-relation-map note-detail-printable">
+<div class="note-detail-relation-map full-height note-detail-printable">
     <div class="relation-map-wrapper">
        <div class="relation-map-container"></div>
     </div>