attempted css fixes

ui/src/App.vue

@@ -60,8 +60,9 @@ html {
 
 html,
 body,
+#app,
 #root {
-  height: calc(100% - 1rem);
+  height: 100%;
 
   font-family: var(--default-font);
   color: var(--foreground);
@@ -82,6 +83,7 @@ body,
 }
 
 main {
+  display: flex;
   flex-grow: 1;
 }
 

ui/src/views/Browse.vue

@@ -72,7 +72,6 @@ export default defineComponent({
 .browser {
   display: flex;
 
-  min-height: 100%;
   margin-left: -2rem;
   margin-right: -2rem;
   padding: 0 2rem;

ui/src/views/Inspect.vue

@@ -17,7 +17,7 @@
             <th>Value</th>
           </tr>
           <tr v-for="[id, entry] in attributes" :key="id">
-            <td>
+            <td class="attr-action">
               <sl-icon-button name="x-circle" @click="removeEntry(id)" />
             </td>
             <td>{{ entry.attribute }}</td>
@@ -33,7 +33,7 @@
             </td>
           </tr>
           <tr>
-            <td>
+            <td class="attr-action">
               <sl-icon-button name="plus-circle" @click="addEntry()" />
             </td>
             <td>
@@ -146,6 +146,12 @@ table {
   td {
     font-family: var(--monospace-font);
     padding-right: 1em;
+    line-height: 1em;
+
+
+    &.attr-action {
+      max-width: 1em;
+    }
   }
 
   sl-input {