Demo move metadata above file layout

demo.css

@@ -132,8 +132,11 @@ th, td {
   white-space: pre-wrap;
 }
 
-#layout {
+#filename {
+  font-size: 10pt;
   margin-top: 20px;
+}
+#layout {
   word-break: break-all;
 }
 .layout a {
@@ -143,9 +146,6 @@ th, td {
 .layout a:hover {
   text-decoration: underline;
 }
-.layout > strong {
-  font-size: 10pt;
-}
 .layout div {
   background-color: rgba(0, 0, 0, 0.05);
   border: 1px solid #ccc;

demo.js

@@ -4,6 +4,7 @@ const dropzone = document.getElementById('dropzone')
 const fileInput = document.getElementById('file-input')
 const content = document.getElementById('content')
 const welcome = document.getElementById('welcome')
+const label = document.getElementById('filename')
 
 const layout = document.getElementById('layout')
 const metadataDiv = document.getElementById('metadata')
@@ -124,7 +125,7 @@ async function render(asyncBuffer, metadata, name) {
 }
 
 function renderSidebar(asyncBuffer, metadata, name) {
-  layout.innerHTML = `<strong>${name}</strong>`
+  label.innerText = name
   // render file layout
   layout.appendChild(fileLayout(metadata, asyncBuffer.byteLength))
   // display metadata

index.html

@@ -24,8 +24,9 @@
           <li><a href="https://github.com/hyparam/hyparquet">github</a></li>
           <li><a href="https://www.npmjs.com/package/hyparquet">npm</a></li>
         </ul>
-        <div id="layout" class="layout"></div>
+        <div id="filename"></div>
         <div id="metadata" class="layout"></div>
+        <div id="layout" class="layout"></div>
       </nav>
       <div id="content">
         <div id="welcome">