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 %}
+