[webpages] Fix narrow mobile view leaving half the page blank

PROJECT.org

@@ -18,7 +18,7 @@ tasks, Todoist tasks, web pages I've read and trails I've hiked has turned out
 to be sometimes cathartic and sometimes functional as I try to remember when I
 did a thing.
 
-* Backlog [0/30] :vrobbler:project:personal:
+* Backlog [1/31] :vrobbler:project:personal:
 ** TODO [#C] Configure IMAP folder/start in user profile :imap:settings:
 *** Description
 
@@ -591,3 +591,7 @@ The Edit log form should have from top to bottom:
   - Expansion ids (which should a multi-select widget of expansions for this game)
   - Location (which should be a drop down of BoardGameLocations for this user)
 
+** DONE [#B] Fix bug in webpage display where narrow mobile view is half white space :bug:ui:templates:webpages:
+:PROPERTIES:
+:ID:       f8a54113-298f-4e2e-9184-d812fee3a442
+:END:

vrobbler/templates/webpages/webpage_detail.html

@@ -20,6 +20,12 @@
       max-width: none;
       position: absolute;
   }
+  @media (max-width: 767.98px) {
+      .webpage-notes .sticky-note {
+          position: static;
+          max-width: 200px;
+      }
+  }
 </style>
 <link href="{% static 'css/recogito.min.css' %}" rel="stylesheet">
 {% endblock %}
@@ -48,6 +54,9 @@
     });
 
     function positionNotes() {
+        if (!window.matchMedia('(min-width: 768px)').matches) {
+            return;
+        }
         var articleText = article.innerText || article.textContent;
         var articleHeight = article.offsetHeight;
 
@@ -213,13 +222,13 @@
       {% endif %}
     </div>
     {% if object.extract %}
-    <div class="col">
+    <div class="col-12 col-md">
         <div class="webpage-body" id="article">
         {{object.extract|linebreaks}}
         </div>
     </div>
     {% endif %}
-    <div class="col-auto">
+    <div class="col-12 col-md-auto">
         <div class="webpage-notes">
             {% if latest_scrobble_notes %}
             <h5>Notes</h5>