From a1f1847eada445c2c24e297c7fd1361afec6ba76 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tom=C3=A1=C5=A1=20Ml=C3=A1dek?= <t@mldk.cz>
Date: Tue, 15 Feb 2022 23:31:17 +0100
Subject: [PATCH] [ui] under 1080px screen height, scroll entire content of
 browse scroll

---
 webui/src/components/Inspect.svelte | 100 ++++++++++++++++------------
 1 file changed, 58 insertions(+), 42 deletions(-)

diff --git a/webui/src/components/Inspect.svelte b/webui/src/components/Inspect.svelte
index df08795..df4dff6 100644
--- a/webui/src/components/Inspect.svelte
+++ b/webui/src/components/Inspect.svelte
@@ -181,6 +181,8 @@
         <Spinner centered />
       {/if}
     </h2>
+  </header>
+  <div class="main-content">
     {#if groups?.length || editable}
       <section class="groups labelborder">
         <header><h3>Groups</h3></header>
@@ -210,61 +212,63 @@
         </div>
       </section>
     {/if}
-  </header>
-  <BlobPreview {address} {editable} {detail} />
-  <NotesEditor {address} {editable} on:change={onChange} />
-  {#if !$error}
-    {#if Boolean($allTypeEntries)}
-      <div class="attributes">
-        {#each Object.entries(typedAttributes) as [typeAddr, entries] (typeAddr)}
-          <AttributeView
-            {entries}
-            type={allTypes[typeAddr]}
-            {editable}
-            on:change={onChange}
-          />
-        {/each}
+    <BlobPreview {address} {editable} {detail} />
+    <NotesEditor {address} {editable} on:change={onChange} />
+    {#if !$error}
+      {#if Boolean($allTypeEntries)}
+        <div class="attributes">
+          {#each Object.entries(typedAttributes) as [typeAddr, entries] (typeAddr)}
+            <AttributeView
+              {entries}
+              type={allTypes[typeAddr]}
+              {editable}
+              on:change={onChange}
+            />
+          {/each}
 
-        {#if currentUntypedAttributes.length > 0 || editable}
-          <AttributeView
-            title="Other attributes"
-            {editable}
-            entries={currentUntypedAttributes}
-            on:change={onChange}
-          />
-        {/if}
+          {#if currentUntypedAttributes.length > 0 || editable}
+            <AttributeView
+              title="Other attributes"
+              {editable}
+              entries={currentUntypedAttributes}
+              on:change={onChange}
+            />
+          {/if}
 
-        {#if currentBacklinks.length > 0}
-          <AttributeView
-            title={`Referred to (${$entity.backlinks.length})`}
-            entries={currentBacklinks}
-            reverse
-            on:change={onChange}
-          />
-        {/if}
-      </div>
+          {#if currentBacklinks.length > 0}
+            <AttributeView
+              title={`Referred to (${$entity.backlinks.length})`}
+              entries={currentBacklinks}
+              reverse
+              on:change={onChange}
+            />
+          {/if}
+        </div>
+      {:else}
+        <Spinner centered />
+      {/if}
     {:else}
-      <Spinner centered />
+      <div class="error">
+        {$error}
+      </div>
     {/if}
-  {:else}
-    <div class="error">
-      {$error}
-    </div>
-  {/if}
+  </div>
 </div>
 
 <style scoped lang="scss">
   @use "./util";
 
-  .inspect {
+  header h2 {
+    margin-bottom: 0;
+  }
+
+  .inspect,
+  .main-content {
     flex: auto;
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
-
-    h2 {
-      margin-bottom: 0;
-    }
+    min-height: 0;
   }
 
   .groups {
@@ -292,6 +296,18 @@
     overflow-y: auto;
   }
 
+  @media screen and (max-height: 1080px) {
+    .main-content {
+      overflow-y: scroll;
+      // min-height: 0;
+    }
+
+    .attributes {
+      height: unset;
+      overflow-y: unset;
+    }
+  }
+
   .error {
     color: red;
   }