Fix margin note styles so they dont cause overflow or get cut off.

Author: nstrayer

_quarto.yml

@@ -31,6 +31,9 @@ format:
     include-in-header: www/banner.html
     theme: 
       - www/styles.scss
+    include-after-body:
+      - text: |
+          <script src="/media/js/margin-notes.js"></script>
 
 
 

media/js/margin-notes.js

@@ -0,0 +1,58 @@
+// Dynamic margin note width adjustment
+(function() {
+  function updateMarginNoteWidth() {
+    // Skip on mobile devices (< 760px)
+    if (window.innerWidth < 760) {
+      document.documentElement.style.setProperty('--margin-note-width', 'auto');
+      return;
+    }
+    
+    const MAX_MARGIN_NOTE_WIDTH_PX = 350;
+    // Find the main content container - specifically the Quarto document content
+    const mainContent = document.querySelector('main.content#quarto-document-content');
+    
+    console.log("Running the margin note script some more")
+    if (!mainContent) return;
+    
+    // Get the body's bounding box as the outer limit
+    const bodyRect = document.body.getBoundingClientRect();
+    const bodyRight = bodyRect.right;
+    
+    // Get the main content's position and dimensions
+    const contentRect = mainContent.getBoundingClientRect();
+    const contentRight = contentRect.right;
+    
+    // Calculate available space (body right edge - content right edge - buffer)
+    const marginBuffer = 16; // 1rem buffer
+    const availableSpace = bodyRight - contentRight - marginBuffer;
+    
+    // Set the CSS variable with a maximum of MAX_MARGIN_NOTE_WIDTH_PX
+    const marginNoteWidth = Math.min(Math.max(0, availableSpace), MAX_MARGIN_NOTE_WIDTH_PX);
+    
+    // Apply the CSS variable to the root element
+    document.documentElement.style.setProperty('--margin-note-width', `${marginNoteWidth}px`);
+    
+    // Log for debugging
+    console.log(`Body right: ${bodyRight}px, Content right: ${contentRight}px, Available: ${availableSpace}px, Margin width: ${marginNoteWidth}px`);
+    
+    // Only manipulate display for Quarto-specific margin notes
+    const marginNotes = document.querySelectorAll('.quarto-container-page .marginnote');
+    marginNotes.forEach(note => {
+      // Remove any inline display style to let CSS handle it
+      note.style.display = '';
+    });
+  }
+  
+  // Update on load
+  updateMarginNoteWidth();
+  
+  // Update on resize with debouncing
+  let resizeTimeout;
+  window.addEventListener('resize', function() {
+    clearTimeout(resizeTimeout);
+    resizeTimeout = setTimeout(updateMarginNoteWidth, 150);
+  });
+  
+  // Also update when DOM content is fully loaded
+  document.addEventListener('DOMContentLoaded', updateMarginNoteWidth);
+})();

www/styles.scss

@@ -324,8 +324,8 @@ img {
 .sidenote, .marginnote { 
   float: right;
   clear: right;
-  margin-right: -60%;
-  width: 50%;
+  margin-right: calc(-1 * var(--margin-note-width, 200px) - 1rem);
+  width: var(--margin-note-width, 200px);
   margin-top: 0;
   margin-bottom: 0;
   font-size: 1.1rem;
@@ -337,42 +337,22 @@ img {
 /* Quarto-specific margin note fixes */
 .quarto-container-page .marginnote {
   position: absolute;
-  right: -250px;
-  width: 200px;
-  margin-right: 0;
+  left: 100%;
+  margin-left: 1rem;
+  max-width: 200px;
   font-size: 0.9rem;
   line-height: 1.4;
   padding: 0.5rem;
   background: transparent;
   float: none;
+  box-sizing: border-box;
 }
 
 /* Ensure parent has relative positioning */
 .quarto-container-page p:has(.marginnote) {
   position: relative;
 }
 
-/* Handle overflow and ensure margin notes don't cause horizontal scroll */
-.quarto-container-page {
-  overflow-x: hidden;
-}
-
-/* Adjust margin notes for narrower screens */
-@media (max-width: 1400px) {
-  .quarto-container-page .marginnote {
-    right: -200px;
-    width: 180px;
-  }
-}
-
-@media (max-width: 1200px) {
-  .quarto-container-page .marginnote {
-    right: -180px;
-    width: 160px;
-    font-size: 0.85rem;
-  }
-}
-
 .table-caption { 
   float:right;
   clear:right;
@@ -439,10 +419,14 @@ h1 .code, h2 .code, h3 .code {
   font-size: 0.80em; 
 }
 
-.marginnote .code, .sidenote .code { 
+.code, .sidenote .code { 
   font-size: 1rem;
 }
 
+.marginnote { 
+  font-size: 0.85rem;
+}
+
 pre {
     background-color: initial;
     padding: initial;