static/css/notes2.css

@@ -140,7 +140,7 @@ html {
 
 	n2-tree {
 		.el-treenodes {
-			margin: 24px 32px 32px 32px;
+			margin: 32px;
 		}
 	}
 
@@ -199,10 +199,6 @@ html {
 #main-page {
 	display: contents;
 
-	&:focus-within {
-		background-color: #faf;
-	}
-
 	&.node {
 		#page-node {
 			display: contents;
@@ -470,46 +466,3 @@ dialog.op {
 		}
 	}
 }
-
-
-/* ------------------------------------------- *
- * Whole page is 100vh with scrolling sections *
- * ------------------------------------------- */
-#app.full-height {
-	#notes2 {
-		height: 100vh;
-
-
-	}
-
-	#tree {
-		n2-tree {
-			.el-treenodes {
-				height: calc(100vh - 64px - 64px);
-				margin: 0px;
-				padding: 12px 32px 32px 32px;
-				overflow-y: auto;
-
-				&::-webkit-scrollbar {
-					display: none;
-				}
-
-				-ms-overflow-style: none;
-				scrollbar-width: none;
-			}
-		}
-	}
-
-	n2-nodeui {
-		.el-node-markdown {
-			overflow-y: scroll;
-
-			&::-webkit-scrollbar {
-				display: none;
-			}
-
-			-ms-overflow-style: none;
-			scrollbar-width: none;
-		}
-	}
-}

static/images/leaf.svg

@@ -8,7 +8,7 @@
    version="1.1"
    id="svg1"
    sodipodi:docname="leaf.svg"
-   inkscape:version="1.4.4 (dcaf3e7d9e, 2026-05-05)"
+   inkscape:version="1.4.2 (ebf0e94, 2025-05-08)"
    xml:space="preserve"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
@@ -23,13 +23,13 @@
      inkscape:pagecheckerboard="0"
      inkscape:deskcolor="#d1d1d1"
      inkscape:document-units="px"
-     inkscape:zoom="31.614857"
-     inkscape:cx="5.0609117"
-     inkscape:cy="9.5524708"
-     inkscape:window-width="2190"
-     inkscape:window-height="1401"
-     inkscape:window-x="1463"
-     inkscape:window-y="0"
+     inkscape:zoom="11.17754"
+     inkscape:cx="8.0965937"
+     inkscape:cy="22.903072"
+     inkscape:window-width="1916"
+     inkscape:window-height="1161"
+     inkscape:window-x="0"
+     inkscape:window-y="18"
      inkscape:window-maximized="1"
      inkscape:current-layer="layer1"
      showgrid="false" /><defs
@@ -42,10 +42,6 @@
        id="title1-1">folder-open-outline</title><title
        id="title1-5">notebook-outline</title><title
        id="title1-8">text-box-outline</title><path
-       style="fill:#ffffff;stroke-width:0.264583"
-       d="m 108.3015,148.56838 h 3.95851 v 3.96688 h -3.95851 z"
-       id="path3"
-       sodipodi:nodetypes="ccccc" /><path
        d="m 108.47917,148.16667 c -0.29369,0 -0.52917,0.23548 -0.52917,0.52917 V 152.4 c 0,0.29369 0.23548,0.52917 0.52917,0.52917 h 3.70416 c 0.29369,0 0.52917,-0.23548 0.52917,-0.52917 v -3.70416 c 0,-0.29369 -0.23548,-0.52917 -0.52917,-0.52917 h -3.70416 m 0,0.52917 h 3.70416 V 152.4 h -3.70416 v -3.70416"
        id="path1"
        style="fill:#ababab;fill-opacity:1;stroke-width:0.264583"

static/js/app.mjs

@@ -66,6 +66,7 @@ export class App {
 		switch (event.key.toUpperCase()) {
 			case 'T':
 				if (document.activeElement.id === 'tree-nodes') {
+					console.log('take focus')
 					this.nodeUI.takeFocus()
 				} else {
 					this.tree.focus()

static/js/page_node.mjs

@@ -106,9 +106,9 @@ export class N2PageNodeUI extends CustomHTMLElement {
 	}// }}}
 	takeFocus() {// {{{
 		if (this.showMarkdown()) {
-			this.elNodeMarkdown.focus({ preventScroll: true })
+			this.elNodeMarkdown.focus()
 		} else
-			this.elNodeContent.focus({ preventScroll: true })
+			this.elNodeContent.focus()
 	}// }}}
 
 	contentChanged(event) {//{{{

static/js/tree.mjs

@@ -64,6 +64,8 @@ export class N2Tree extends CustomHTMLElement {
 		this.tmpl.innerHTML = `
 			<style>
 				n2-tree {
+					anchor-name: --tree;
+
 					#logo {
 						display: grid;
 						grid-template-columns: 1fr min-content;
@@ -82,7 +84,7 @@ export class N2Tree extends CustomHTMLElement {
 					.icons {
 						display: flex;
 						justify-content: center;
-						margin-top: 16px;
+						margin: 16px 0px 32px 0px;
 						gap: 8px;
 						padding-bottom: 16px;
 						border-bottom: 1px solid var(--line-color);
@@ -95,8 +97,27 @@ export class N2Tree extends CustomHTMLElement {
 						cursor: pointer;
 						margin-left: 16px;
 					}
+
+					.focusline {
+						position: fixed;
+						background-color: #a00;
+						top: 0px;
+						left: anchor(--tree left);
+						right: anchor(--tree right);
+						height: 2px;
+						opacity: 0;
+					}
+
+					&:focus-within {
+						.focusline {
+							opacity: 1;
+							background-color: #fff;
+							transition: background-color 150ms;
+						}
+					}
 				}
 			</style>
+			<div class="focusline"></div>
 			<div id="logo">
 				<img data-el="logo" src="/images/${_VERSION}/logo.svg" />
 				<div data-el="hide-tree">&lt;</div>
@@ -471,35 +492,10 @@ export class N2TreeNode extends CustomHTMLElement {
 	static {// {{{
 		this.tmpl = document.createElement('template')
 		this.tmpl.innerHTML = `
-			<style>
-				n2-tree:focus-within {
-					.el-name {
-						&.selected {
-							span {
-								position:relative;
-							}
-							span:before {
-								position: absolute;
-								content: '';
-								top: -8px;
-								left: -36px;
-								right: -8px;
-								bottom: -4px;
-								z-index: -1;
-
-								background-color: #f8f8f8;
-								border: 1px solid #ddd;
-								border-radius: 4px;
-							}
-						}
-					}
-				}
-			</style>
-
 			<div data-el="expand-toggle" class="expand-toggle">
 				<img data-el="expand">
 			</div>
-			<div data-el="name" class="name"><span></span></div>
+			<div data-el="name" class="name"></div>
 			<div data-el="children" class="children"></div>
 		`
 	}// }}}
@@ -545,8 +541,7 @@ export class N2TreeNode extends CustomHTMLElement {
 		}
 
 		// Update the name and selected status
-		this.elName.querySelector('span').innerText = this.node.get('Name')
-
+		this.elName.innerText = this.node.get('Name')
 		if (this.tree.isSelected(this.node))
 			this.elName.classList.add('selected')
 		else