Fix multiple cases of overflow

src/styles/content.css

@@ -28,4 +28,8 @@
     color: var(--text-heading);
     border-bottom: 1px solid var(--background-highlight);
     padding-bottom: 5px;
+}
+
+#content img {
+    max-width: 100%;
 }

src/styles/navbar/navbar.css

@@ -42,6 +42,13 @@
     flex-direction: column;
      list-style: none;
     cursor: pointer;
+    max-width: 350px;
+}
+
+#menu li span {
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 #menu li .collapsible-label {

src/styles/toc.css

@@ -18,6 +18,7 @@
     margin: 0;
     border-radius: 6px;
     padding: 0 0 0 16px;
+    max-width: 250px;
 }
 
 #toc, #toc ul {
@@ -28,6 +29,12 @@
     padding-left: 16px;
 }
 
+#toc span {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    display: inline-block;
+}
+
 #toc li a {
 /*         position: relative; */
     display: flex;

src/templates/toc_item.ejs

@@ -6,7 +6,7 @@ const slug = slugify(entry.name);
 
 <li>
     <a href="#<%= slug %>">
-        <%= entry.name %>
+        <span><%= entry.name %></span>
     </a>
 
     <% if (entry.children.length) { %>

src/templates/tree_item.ejs

@@ -8,7 +8,7 @@ const target = isExternalLink ? ` target="_blank" rel="noopener noreferrer"` : "
     <% if (note.noteId !== subRoot.note.noteId) { %>
     <a class="<%= linkClass %>" href="<%= linkHref %>"<%= target %>>
         <% if (note.hasVisibleChildren()) { %><button class="collapse-button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon right-triangle"><path d="M3 8L12 17L21 8"></path></svg></button><% } %>
-        <%= note.title %>
+        <span><%= note.title %></span>
     </a>
 <% } %>