[ui] only attrs scroll in browse

ui/src/components/Inspect.svelte

@@ -88,10 +88,10 @@
   </h2>
   <blob-preview :address="address" />
   {#if !$error}
-    <div>
+    <div class="attributes">
       {#each Object.entries(typedAttributes) as [typeAddr, attributes] (typeAddr)}
         <AttributeView
-           {editable}
+          {editable}
           {address}
           type={allTypes[typeAddr]}
           {attributes}
@@ -124,6 +124,21 @@
 </div>
 
 <style scoped lang="scss">
+  .inspect {
+    flex: auto;
+    display: flex;
+    flex-direction: column;
+    & > * {
+      padding: 0 1rem;
+    }
+  }
+
+  .attributes {
+    flex: auto;
+    height: 0; // https://stackoverflow.com/a/14964944
+    overflow-y: auto;
+  }
+
   .hr {
     position: relative;
     margin: 2rem 0 1rem 0;

ui/src/components/widgets/Table.svelte

@@ -90,7 +90,7 @@
         <th>Value</th>
       </tr>
       {#each attributes as [id, entry] (id)}
-        <tr v-for="[id, entry] in limitedAttributes">
+        <tr>
           {#if editable}
             <td class="attr-action">
               <sl-icon-button name="x-circle" on:click={removeEntry(id)} />

ui/src/layout/Header.svelte

@@ -25,9 +25,9 @@
   .header {
     display: flex;
     align-items: center;
-    padding: 0.5rem;
+    padding: 0 0.5rem;
+    height: 3.5rem;
     border-bottom: 1px solid var(--foreground);
-    margin-bottom: 0.5rem;
 
     background: var(--background);
 

ui/src/views/Browse.svelte

@@ -56,29 +56,32 @@
 <style scoped lang="scss">
   .browser {
     display: flex;
-
-    // margin-left: -2rem;
-    // margin-right: -2rem;
-    // padding: 0 2rem;
-
     overflow-x: auto;
+
+    //                  header   margin magic
+    height: calc(100% - 3.5rem - 1rem - 1px);
+    margin-top: 1rem;
   }
 
   .view {
+    height: 100%;
+
     min-width: 30em;
     max-width: 30em;
 
+    display: flex;
+    flex-direction: column;
+
     border-left: 1px solid var(--foreground);
     border-right: 1px solid var(--foreground);
 
-    margin: 1rem 0;
-    padding: 0 1rem;
-
     header {
       position: relative;
-      margin: 0;
+      margin: 0 1rem;
       min-height: 1em;
 
+      flex: none;
+
       .this-button {
         position: absolute;
         left: 50%;

ui/yarn.lock

@@ -3301,8 +3301,8 @@ __metadata:
 
 "upend@file:../tools/upend_js::locator=svelte-app%40workspace%3A.":
   version: 0.0.1
-  resolution: "upend@file:../tools/upend_js#../tools/upend_js::hash=be37a5&locator=svelte-app%40workspace%3A."
-  checksum: 9c82ef4a75d51feb2c7d345fdbc941d0205ea5f4deaf1ee1dc49378a860a47d42b63ae4602e0f12e1a6cf482c8fb4da495941b45a7e396f840264403c4a1977d
+  resolution: "upend@file:../tools/upend_js#../tools/upend_js::hash=01d4ae&locator=svelte-app%40workspace%3A."
+  checksum: 08a1d2aee4fd4797e08d4ed2729afdfe849d5904c8369f7887285766ede64eb60cd450a7bdf91338ba8a4dd6e41309012cb1ca191b44ea6a328052ba4a86b537
   languageName: node
   linkType: hard