From 24d70aeb08a70a917a39b94fe423e7db9ea54771 Mon Sep 17 00:00:00 2001
From: ComputerTech <computertech312@gmail.com>
Date: Mon, 6 Apr 2026 21:10:14 +0100
Subject: [PATCH] feat: scrollable view layout, discussions extend page, word
 wrap toggle, divider-style comments

---
 static/css/style.css    | 83 ++++++++++++++++++++++-------------------
 static/js/paste_view.js | 17 +++++++++
 templates/view.html     |  5 ++-
 3 files changed, 66 insertions(+), 39 deletions(-)

diff --git a/static/css/style.css b/static/css/style.css
index f73db7f..e63334a 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -183,6 +183,14 @@ body {
     min-height: 0;
 }
 
+/* On the view page, override to allow the discussions to extend below */
+.full-page.view-page {
+    overflow: visible;
+    overflow-y: auto;
+    min-height: 0;
+    flex: 1;
+}
+
 /* ── Editor textarea ───────────────────────────────────────────────────── */
 .full-editor {
     flex: 1;
@@ -202,10 +210,8 @@ body {
 
 /* ── View: full-page code ──────────────────────────────────────────────── */
 .view-full {
-    flex: 1;
-    overflow: auto;
+    min-height: calc(100vh - 42px); /* at least full viewport below navbar */
     background: var(--code-bg);
-    min-height: 0;
 }
 .view-full pre {
     margin: 0;
@@ -218,6 +224,12 @@ body {
     font-size: 0.875rem;
     line-height: 1.6;
 }
+/* Word wrap toggle */
+.view-full.wrap-lines pre,
+.view-full.wrap-lines code {
+    white-space: pre-wrap;
+    word-break: break-all;
+}
 
 /* ── Inline error (view page) ──────────────────────────────────────────── */
 .error-inline {
@@ -401,14 +413,10 @@ pre[class*="language-"], code[class*="language-"] {
 
 /* ── Discussions panel ────────────────────────────────────────────────── */
 .discussions-panel {
-    flex-shrink: 0;
     flex-direction: column;
-    border-top: 1px solid var(--border);
+    border-top: 2px solid var(--border);
     background: var(--surface);
-    max-height: 45vh;
-}
-.discussions-panel.collapsed {
-    max-height: none;
+    /* no max-height — extends the page naturally */
 }
 .discussions-panel.collapsed .discussions-body {
     display: none;
@@ -417,39 +425,40 @@ pre[class*="language-"], code[class*="language-"] {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 0.35rem 1rem;
+    padding: 0.5rem 1.5rem;
     cursor: pointer;
-    font-size: 0.8rem;
+    font-size: 0.85rem;
     color: var(--text-sub);
     flex-shrink: 0;
     user-select: none;
     border-bottom: 1px solid var(--border);
+    position: sticky;
+    top: 42px; /* stick just below navbar */
+    background: var(--surface);
+    z-index: 5;
 }
 .discussions-header:hover { background: var(--bg); }
 .discussions-title { font-weight: 600; }
 .discussions-chevron { font-size: 0.7rem; color: var(--text-muted); }
 .discussions-body {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    min-height: 0;
+    padding: 0.5rem 0;
 }
 .comments-list {
-    flex: 1;
-    overflow-y: auto;
-    padding: 0.25rem 1rem;
-    min-height: 0;
+    padding: 0 1.5rem;
 }
 .comment-item {
-    padding: 0.45rem 0;
+    padding: 0.6rem 0;
     border-bottom: 1px solid var(--border);
 }
 .comment-item:last-child { border-bottom: none; }
 .comment-meta {
-    font-size: 0.7rem;
+    font-size: 0.72rem;
     color: var(--text-muted);
-    margin-bottom: 0.2rem;
+    margin-bottom: 0.3rem;
+}
+.comment-meta.has-nick {
+    color: var(--primary);
+    font-weight: 600;
 }
 .comment-content {
     font-size: 0.85rem;
@@ -460,22 +469,22 @@ pre[class*="language-"], code[class*="language-"] {
 .comments-loading, .comments-empty {
     font-size: 0.8rem;
     color: var(--text-muted);
-    padding: 0.5rem 0;
+    padding: 0.75rem 0;
 }
 .comment-form-wrap {
     display: flex;
     gap: 0.5rem;
-    padding: 0.4rem 1rem;
+    padding: 0.75rem 1.5rem 1rem;
     border-top: 1px solid var(--border);
     align-items: flex-start;
-    flex-shrink: 0;
+    margin-top: 0.25rem;
     background: var(--surface);
 }
 .comment-form-fields {
     flex: 1;
     display: flex;
     flex-direction: column;
-    gap: 0.3rem;
+    gap: 0.35rem;
     min-width: 0;
 }
 .comment-nick {
@@ -484,26 +493,24 @@ pre[class*="language-"], code[class*="language-"] {
     border-radius: var(--radius);
     color: var(--text);
     font-family: inherit;
-    font-size: 0.78rem;
-    padding: 0.25rem 0.6rem;
+    font-size: 0.8rem;
+    padding: 0.3rem 0.6rem;
     outline: none;
-    width: 160px;
+    width: 180px;
 }
 .comment-nick:focus { border-color: var(--primary); }
 .comment-input {
-    flex: 1;
     background: var(--bg);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     color: var(--text);
     font-family: inherit;
-    font-size: 0.8rem;
-    padding: 0.35rem 0.6rem;
-    resize: none;
-    min-height: 2.2rem;
-    max-height: 8rem;
+    font-size: 0.85rem;
+    padding: 0.4rem 0.6rem;
+    resize: vertical;
+    min-height: 4rem;
     outline: none;
-    line-height: 1.4;
+    line-height: 1.5;
+    width: 100%;
 }
 .comment-input:focus { border-color: var(--primary); }
-.comment-meta.has-nick { color: var(--primary); font-weight: 600; }
diff --git a/static/js/paste_view.js b/static/js/paste_view.js
index 0664d53..59c3198 100644
--- a/static/js/paste_view.js
+++ b/static/js/paste_view.js
@@ -62,6 +62,7 @@ document.addEventListener('DOMContentLoaded', async () => {
     initPasteActions();
     initLineHighlight(); // register Prism hook before initLineNumbers triggers Prism
     initLineNumbers();
+    initWordWrap();
     initDiscussions();
     initDeletion();
 });
@@ -340,6 +341,22 @@ function _updateLineUrl(start, end) {
 
 // ── Discussions ───────────────────────────────────────────────────────────────
 
+function initWordWrap() {
+    const toggle  = document.getElementById('wrapToggle');
+    const viewDiv = document.getElementById('viewFull');
+    if (!toggle || !viewDiv) return;
+
+    const stored  = localStorage.getItem('wrap_lines');
+    const enabled = stored === null ? true : stored === 'true';
+    toggle.checked = enabled;
+    viewDiv.classList.toggle('wrap-lines', enabled);
+
+    toggle.addEventListener('change', () => {
+        viewDiv.classList.toggle('wrap-lines', toggle.checked);
+        localStorage.setItem('wrap_lines', toggle.checked);
+    });
+}
+
 function initDiscussions() {
     if (!_decryptedPaste?.discussions) return;
     const panel = document.getElementById('discussionsPanel');
diff --git a/templates/view.html b/templates/view.html
index 823a945..2299515 100644
--- a/templates/view.html
+++ b/templates/view.html
@@ -1,13 +1,16 @@
 {% extends "base.html" %}
 
 {% block title %}{{ cfg.site.name }}{% endblock %}
-{% block main_class %}full-page{% endblock %}
+{% block main_class %}full-page view-page{% endblock %}
 
 {% block nav_actions %}
 <span id="navPasteTitle" class="nav-paste-title"></span>
 <label class="nav-label" title="Toggle line numbers">
     <input type="checkbox" id="lineNoToggle" checked> Lines
 </label>
+<label class="nav-label" title="Toggle word wrap">
+    <input type="checkbox" id="wrapToggle" checked> Wrap
+</label>
 <button id="rawBtn" class="nav-btn">Raw</button>
 <button id="copyBtn" class="nav-btn">Copy</button>
 <button id="downloadBtn" class="nav-btn">Download</button>