FossilRepo

Fix anchor scroll position — line appears at ~40% from top, not pinned to edge - Use scroll-margin-top: 40vh on .line-row in both code file and diff views - Anchored line shows with space above for context and popover visibility - Remove JS scrollIntoView — CSS handles all anchor positioning natively - Works on both page load and in-page click navigation

lmata 2026-04-06 14:44 trunk
Commit 2b89620ac0413784803530ef85e6df527ff0254698c7ae0d67f724c933a03720
Parent ec8c08f6d5fc757…
2 files changed +2 -6 +1 -6
~ templates/fossil/checkin_detail.html ~ templates/fossil/code_file.html
M templates/fossil/checkin_detail.html
+2 -6
--- templates/fossil/checkin_detail.html
+++ templates/fossil/checkin_detail.html
@@ -15,10 +15,11 @@
1515
 .diff-gutter { width: 1%; user-select: none; color: #4b5563; text-align: right; padding: 0 6px; border-right: 1px solid #374151; cursor: pointer; white-space: nowrap; }
1616
 .diff-gutter:hover { color: #DC394C; }
1717
 .diff-gutter a { color: inherit; text-decoration: none; display: block; }
1818
 .line-row:target { background: rgba(220, 57, 76, 0.15) !important; }
1919
 .line-row:target .diff-gutter { color: #DC394C; font-weight: 600; }
20
+ .line-row { scroll-margin-top: 40vh; }
2021
 .line-popover {
2122
 position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
2223
 margin-left: 4px; z-index: 20; white-space: nowrap;
2324
 background: #1f2937; border: 1px solid #374151; border-radius: 6px;
2425
 box-shadow: 0 4px 12px rgba(0,0,0,0.4); padding: 2px;
@@ -144,12 +145,7 @@
144145
 </div>
145146
 </div>
146147
 {% endfor %}
147148
 {% endif %}
148149
 </div>
149
-<script>
150
- if (window.location.hash) {
151
- const el = document.querySelector(window.location.hash);
152
- if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' });
153
- }
154
-</script>
150
+<!-- scroll-margin-top on .line-row handles anchor positioning via CSS -->
155151
 {% endblock %}
156152
--- templates/fossil/checkin_detail.html
+++ templates/fossil/checkin_detail.html
@@ -15,10 +15,11 @@
15 .diff-gutter { width: 1%; user-select: none; color: #4b5563; text-align: right; padding: 0 6px; border-right: 1px solid #374151; cursor: pointer; white-space: nowrap; }
16 .diff-gutter:hover { color: #DC394C; }
17 .diff-gutter a { color: inherit; text-decoration: none; display: block; }
18 .line-row:target { background: rgba(220, 57, 76, 0.15) !important; }
19 .line-row:target .diff-gutter { color: #DC394C; font-weight: 600; }
 
20 .line-popover {
21 position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
22 margin-left: 4px; z-index: 20; white-space: nowrap;
23 background: #1f2937; border: 1px solid #374151; border-radius: 6px;
24 box-shadow: 0 4px 12px rgba(0,0,0,0.4); padding: 2px;
@@ -144,12 +145,7 @@
144 </div>
145 </div>
146 {% endfor %}
147 {% endif %}
148 </div>
149 <script>
150 if (window.location.hash) {
151 const el = document.querySelector(window.location.hash);
152 if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' });
153 }
154 </script>
155 {% endblock %}
156
--- templates/fossil/checkin_detail.html
+++ templates/fossil/checkin_detail.html
@@ -15,10 +15,11 @@
15 .diff-gutter { width: 1%; user-select: none; color: #4b5563; text-align: right; padding: 0 6px; border-right: 1px solid #374151; cursor: pointer; white-space: nowrap; }
16 .diff-gutter:hover { color: #DC394C; }
17 .diff-gutter a { color: inherit; text-decoration: none; display: block; }
18 .line-row:target { background: rgba(220, 57, 76, 0.15) !important; }
19 .line-row:target .diff-gutter { color: #DC394C; font-weight: 600; }
20 .line-row { scroll-margin-top: 40vh; }
21 .line-popover {
22 position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
23 margin-left: 4px; z-index: 20; white-space: nowrap;
24 background: #1f2937; border: 1px solid #374151; border-radius: 6px;
25 box-shadow: 0 4px 12px rgba(0,0,0,0.4); padding: 2px;
@@ -144,12 +145,7 @@
145 </div>
146 </div>
147 {% endfor %}
148 {% endif %}
149 </div>
150 <!-- scroll-margin-top on .line-row handles anchor positioning via CSS -->
 
 
 
 
 
151 {% endblock %}
152
M templates/fossil/code_file.html
+1 -6
--- templates/fossil/code_file.html
+++ templates/fossil/code_file.html
@@ -19,10 +19,11 @@
1919
 font-size: 0.8125rem; line-height: 1.5rem;
2020
 }
2121
 .line-row:hover { background: rgba(220, 57, 76, 0.05); }
2222
 .line-row:target { background: rgba(220, 57, 76, 0.12); }
2323
 .line-row:target .line-num { color: #DC394C; font-weight: 600; }
24
+ .line-row { scroll-margin-top: 40vh; }
2425
 .line-popover {
2526
 position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
2627
 margin-left: 4px; z-index: 20; white-space: nowrap;
2728
 background: #1f2937; border: 1px solid #374151; border-radius: 6px;
2829
 box-shadow: 0 4px 12px rgba(0,0,0,0.4); padding: 2px;
@@ -88,15 +89,9 @@
8889
 </div>
8990
 </div>
9091
9192
 {% if not is_binary %}
9293
 <script>
93
- // Highlight each code cell
9494
 document.querySelectorAll('.line-code code').forEach(el => hljs.highlightElement(el));
95
- // Scroll to line if hash present
96
- if (window.location.hash) {
97
- const el = document.querySelector(window.location.hash);
98
- if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' });
99
- }
10095
 </script>
10196
 {% endif %}
10297
 {% endblock %}
10398
--- templates/fossil/code_file.html
+++ templates/fossil/code_file.html
@@ -19,10 +19,11 @@
19 font-size: 0.8125rem; line-height: 1.5rem;
20 }
21 .line-row:hover { background: rgba(220, 57, 76, 0.05); }
22 .line-row:target { background: rgba(220, 57, 76, 0.12); }
23 .line-row:target .line-num { color: #DC394C; font-weight: 600; }
 
24 .line-popover {
25 position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
26 margin-left: 4px; z-index: 20; white-space: nowrap;
27 background: #1f2937; border: 1px solid #374151; border-radius: 6px;
28 box-shadow: 0 4px 12px rgba(0,0,0,0.4); padding: 2px;
@@ -88,15 +89,9 @@
88 </div>
89 </div>
90
91 {% if not is_binary %}
92 <script>
93 // Highlight each code cell
94 document.querySelectorAll('.line-code code').forEach(el => hljs.highlightElement(el));
95 // Scroll to line if hash present
96 if (window.location.hash) {
97 const el = document.querySelector(window.location.hash);
98 if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' });
99 }
100 </script>
101 {% endif %}
102 {% endblock %}
103
--- templates/fossil/code_file.html
+++ templates/fossil/code_file.html
@@ -19,10 +19,11 @@
19 font-size: 0.8125rem; line-height: 1.5rem;
20 }
21 .line-row:hover { background: rgba(220, 57, 76, 0.05); }
22 .line-row:target { background: rgba(220, 57, 76, 0.12); }
23 .line-row:target .line-num { color: #DC394C; font-weight: 600; }
24 .line-row { scroll-margin-top: 40vh; }
25 .line-popover {
26 position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
27 margin-left: 4px; z-index: 20; white-space: nowrap;
28 background: #1f2937; border: 1px solid #374151; border-radius: 6px;
29 box-shadow: 0 4px 12px rgba(0,0,0,0.4); padding: 2px;
@@ -88,15 +89,9 @@
89 </div>
90 </div>
91
92 {% if not is_binary %}
93 <script>
 
94 document.querySelectorAll('.line-code code').forEach(el => hljs.highlightElement(el));
 
 
 
 
 
95 </script>
96 {% endif %}
97 {% endblock %}
98

Keyboard Shortcuts

Open search /
Next entry (timeline) j
Previous entry (timeline) k
Open focused entry Enter
Show this help ?
Toggle theme Top nav button