[ui] rudimentary "detail" mode

webui/src/components/BrowseColumn.svelte

@@ -11,6 +11,9 @@
   export let only: boolean;
 
   let editable = false;
+  let detail = only;
+  let detailChanged = false;
+  $: if (!detailChanged) detail = only;
 
   function visit() {
     window.open(normUrl(`/browse/${address}`), "_blank");
@@ -23,13 +26,21 @@
   });
 </script>
 
-<div class="view" class:editable>
+<div class="view" class:editable class:detail>
   <header>
     <IconButton
       name="pencil"
       on:click={() => (editable = !editable)}
       active={editable}
     />
+    <IconButton
+      name="fullscreen"
+      on:click={() => {
+        detail = !detail;
+        detailChanged = true;
+      }}
+      active={detail}
+    />
     <IconButton name="bookmark" on:click={() => visit()} disabled={only} />
     <IconButton
       name="x-circle"
@@ -58,6 +69,10 @@
       border-style: dashed;
     }
 
+    &.detail {
+      max-width: 100%;
+    }
+
     header {
       font-size: 20px;
       position: relative;