search and select from search working.scroll in search window not yet working

src/filesearch.js

@@ -1,5 +1,6 @@
 const { convertFileSrc, invoke } = window.__TAURI__.core;
 
+import { handle_file_select } from "./filesystem.js";
 var search_input = document.getElementById("file-search-dialog-input");
 search_input.addEventListener('input', () => {
   search_files();
@@ -17,8 +18,31 @@ function search_files(){
         result_div += element;
       });
       console.log(result_div);
-      tag_id.innerHTML = "<pre>".concat("", result_div).concat("", "</pre>");
+      tag_id.innerHTML = result_div;
       // tag_id.innerHTML = assetUrl.concat(" ", ' \n <img src="'.concat("", assetUrl).concat("", '" alt="Girl in a jacket" width="500" height="600">'))
     }
   );
 }
+
+
+let filetree = document.getElementById('file-search-results');
+// Options for the observer (which mutations to observe)
+const config = { attributes: true, childList: true, subtree: true };
+
+// Callback function to execute when mutations are observed
+const callback = (mutationList, observer) => {
+  console.log("updating on click");
+  var anchors = document.getElementsByClassName("file-search-button");
+  for (var i = 0; i < anchors.length; i++) {
+    var anchor = anchors[i];
+    anchor.onclick = function() {
+      handle_file_select(this.parentElement.id);
+    };
+  };
+
+};
+
+const observer = new MutationObserver(callback);
+
+// Start observing the target node for configured mutations
+observer.observe(filetree, config);

src/filesystem.js

@@ -1,7 +1,7 @@
 const { convertFileSrc, invoke } = window.__TAURI__.core;
 const { readTextFile } = window.__TAURI__.fs;
 import { render_markdown } from "./main.js";
-function handle_file_select(filename) {
+export function handle_file_select(filename) {
   if (filename.endsWith("md")) {
     readTextFile(convertFileSrc(filename)).then(
       (ret) => {

src/styles.css

@@ -161,7 +161,8 @@ li {
 }
 
 .filetree-directory-button,
-.filetree-file-button {
+.filetree-file-button,
+.file-search-button {
   background-color: transparent;
   border: none;
   width: 100%;
@@ -201,7 +202,6 @@ li {
 }
 
 dialog {
-
   position: absolute;
   top: 50%;
   left: 50%;
@@ -213,11 +213,21 @@ dialog {
   width: 50%;
   height: 20%;
   margin: auto;
+  /* display: flex; */
+  /* flex-direction: column; */
+  overflow: hidden;
 }
-#file-search-dialog-input{
+
+#file-search-dialog-input {
   border: solid;
   border-color: var(--accent-color);
-  border-top-right-radius:10px;
+  border-top-right-radius: 10px;
-  border-top-left-radius:10px;
+  border-top-left-radius: 10px;
   color: var(--text-color);
 }
+
+#file-search-results {
+  overflow: scroll;
+  grid-column: 1;
+  grid-row: 1;
+}