docs(user): add troubleshooting on content-sized

apps/server/src/assets/doc_notes/en/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets/Troubleshooting.html

@@ -0,0 +1,16 @@
+<h2>Why is my widget clipped by other UI elements</h2>
+<p>For performance and layout reasons, the size of widgets in Trilium is
+  independent from its children. At CSS level, this means that the widget
+  container has <code spellcheck="false">contain: size</code> applied to it.</p>
+<p>This works well if the widget has a fixed size (or based on its parent
+  container), however to make a widget resize to fit its content, apply the
+  following change:</p><pre><code class="language-text-x-diff">class MyWidget extends api.RightPanelWidget {
+
++   constructor() {
++       super();
++       this.contentSized();
++   }
+        
+}</code></pre>
+<p>Alternatively apply <code spellcheck="false">contain: none</code> to its
+  CSS.</p>

docs/User Guide/!!!meta.json

@@ -15775,6 +15775,35 @@
                                             "format": "markdown",
                                             "dataFileName": "CSS.md",
                                             "attachments": []
+                                        },
+                                        {
+                                            "isClone": false,
+                                            "noteId": "gMkgcLJ6jBkg",
+                                            "notePath": [
+                                                "pOsGYCXsbNQG",
+                                                "CdNpE2pqjmI6",
+                                                "yIhgI5H7A2Sm",
+                                                "MgibgPcfeuGz",
+                                                "gMkgcLJ6jBkg"
+                                            ],
+                                            "title": "Troubleshooting",
+                                            "notePosition": 50,
+                                            "prefix": null,
+                                            "isExpanded": false,
+                                            "type": "text",
+                                            "mime": "text/html",
+                                            "attributes": [
+                                                {
+                                                    "type": "label",
+                                                    "name": "shareAlias",
+                                                    "value": "troubleshooting",
+                                                    "isInheritable": false,
+                                                    "position": 30
+                                                }
+                                            ],
+                                            "format": "markdown",
+                                            "dataFileName": "Troubleshooting.md",
+                                            "attachments": []
                                         }
                                     ]
                                 },

docs/User Guide/User Guide/Scripting/Frontend Basics/Custom Widgets/Troubleshooting.md

@@ -0,0 +1,19 @@
+# Troubleshooting
+## Why is my widget clipped by other UI elements
+
+For performance and layout reasons, the size of widgets in Trilium is independent from its children. At CSS level, this means that the widget container has `contain: size` applied to it.
+
+This works well if the widget has a fixed size (or based on its parent container), however to make a widget resize to fit its content, apply the following change:
+
+```diff
+class MyWidget extends api.RightPanelWidget {
+
++   constructor() {
++       super();
++       this.contentSized();
++   }
+        
+}
+```
+
+Alternatively apply `contain: none` to its CSS.