chore(react/type_widget): fix sizing

apps/client/src/layouts/mobile_layout.tsx

@@ -1,6 +1,5 @@
 import FlexContainer from "../widgets/containers/flex_container.js";
 import NoteTitleWidget from "../widgets/note_title.js";
-import NoteDetailWidget from "../widgets/note_detail.js";
 import QuickSearchWidget from "../widgets/quick_search.js";
 import NoteTreeWidget from "../widgets/note_tree.js";
 import ScreenContainer from "../widgets/mobile_widgets/screen_container.js";
@@ -24,6 +23,7 @@ import CloseZenModeButton from "../widgets/close_zen_button.js";
 import NoteWrapperWidget from "../widgets/note_wrapper.js";
 import MobileDetailMenu from "../widgets/mobile_widgets/mobile_detail_menu.js";
 import NoteList from "../widgets/collections/NoteList.jsx";
+import NoteDetail from "../widgets/NoteDetail.jsx";
 
 const MOBILE_CSS = `
 <style>
@@ -153,7 +153,7 @@ export default class MobileLayout {
                                         new ScrollingContainer()
                                             .filling()
                                             .contentSized()
-                                            .child(new NoteDetailWidget())
+                                            .child(<NoteDetail />)
                                             .child(<NoteList />)
                                             .child(<FilePropertiesWrapper />)
                                     )

apps/client/src/widgets/NoteDetail.css

@@ -1,9 +1,13 @@
-.note-detail {
+.component.note-detail {
     font-family: var(--detail-font-family);
     font-size: var(--detail-font-size);
+    contain: none;
 }
 
 .note-detail.full-height {
-    contain: none;
     height: 100%;
 }
+
+.note-detail > * {
+    contain: none;
+}

apps/client/src/widgets/NoteDetail.tsx

@@ -25,6 +25,9 @@ type ExtendedNoteType = Exclude<NoteType, "launcher" | "text" | "code"> | "empty
 
 /**
  * The note detail is in charge of rendering the content of a note, by determining its type (e.g. text, code) and using the appropriate view widget.
+ *
+ * Apart from that:
+ * - It applies a full-height style depending on the content type (e.g. canvas notes).
  */
 export default function NoteDetail() {
     const { note, type, noteContext, parentComponent } = useNoteInfo();

apps/client/src/widgets/note_detail.ts.bak

@@ -81,11 +81,6 @@ export default class NoteDetailWidget extends NoteContextAwareWidget {
         return true;
     }
 
-    doRender() {
-        this.$widget = $(TPL);
-        this.contentSized();
-    }
-
     async refresh() {
         this.type = await this.getWidgetType();
         this.mime = this.note?.mime;

apps/client/src/widgets/type_widgets_old/type_widget.ts

@@ -16,8 +16,6 @@ export default abstract class TypeWidget extends NoteContextAwareWidget {
     static getType() {}
 
     doRender() {
-        this.contentSized();
-
         return super.doRender();
     }