fix: content overflow & scrolling issues (#420)

impierce · Dec 16, 2024 · 2e1698e · 2e1698e
1 parent e7d019c
commit 2e1698e
Show file tree

Hide file tree

Showing 17 changed files with 291 additions and 321 deletions.
diff --git a/unime/src/lib/components/StatusIndicator.svelte b/unime/src/lib/components/StatusIndicator.svelte
@@ -11,7 +11,7 @@
   export let status: ValidationStatus;
   export let title: string;
   export let description: string | undefined = undefined;
-  export let logoUrl: string | undefined = undefined;
+  export let logoUrl: string | null = null;
 
   const {
     elements: { trigger, content, arrow },

diff --git a/unime/src/lib/components/navigation/TopNavBar.svelte b/unime/src/lib/components/navigation/TopNavBar.svelte
@@ -9,13 +9,16 @@
 
   export let title: string;
   export let disabled = false;
+
+  let className: string = '';
+  export { className as class };
 </script>
 
 <!-- Create a new stacking context with `isolate` to prevent z-index leakage. -->
 <div
   class={twMerge(
     'relative isolate flex h-[50px] items-center justify-between self-stretch bg-silver px-6 py-[13px] text-slate-800 dark:bg-navy dark:text-grey',
-    $$props.class,
+    className,
   )}
 >
   <button class="z-30 -ml-4 rounded-full p-2 disabled:opacity-25" on:click={() => dispatch('back')} {disabled}>

diff --git a/unime/src/routes/(app)/+layout.svelte b/unime/src/routes/(app)/+layout.svelte
@@ -7,7 +7,11 @@
   $: active = ($page.route.id?.split('/').at(2) ?? 'me') as 'me' | 'scan' | 'activity';
 </script>
 
-<div class="content-height">
+<!-- Create new stacking context to avoid interference with dev menu. -->
+<div class="safe-area-height isolate">
+  <!-- Fixed height is required to trigger scrolling.
+       `pb-[64px]` reflects the height of the sticky`BottomNavBar`.
+       `h-full` ensures that sticky `BottomNavBar` does not cover any content when scrolling is active. -->
   <div class="hide-scrollbar h-full overflow-y-auto pb-[64px]">
     <slot />
   </div>
@@ -22,7 +26,7 @@
 </div>
 
 <style>
-  .content-height {
+  .safe-area-height {
     height: calc(100vh - var(--safe-area-inset-top) - var(--safe-area-inset-bottom));
   }
 </style>
diff --git a/unime/src/routes/(app)/me/+page.svelte b/unime/src/routes/(app)/me/+page.svelte
@@ -43,7 +43,7 @@
 </script>
 
 <!-- Isolate stacking context to avoid z-index conflicts. -->
-<div class="isolate flex min-h-full flex-col bg-white dark:bg-dark">
+<div class="isolate flex flex-col bg-white dark:bg-dark">
   <div class="sticky top-0 z-10 w-full bg-white px-[20px] py-4 dark:bg-dark">
     <!-- Top Bar -->
     <div class="flex items-center justify-between">

diff --git a/unime/src/routes/(app)/me/settings/+page.svelte b/unime/src/routes/(app)/me/settings/+page.svelte
@@ -19,56 +19,48 @@
   import EmojiAvatarSelect from './EmojiAvatarSelect.svelte';
 </script>
 
-<TopNavBar on:back={() => history.back()} title={$LL.SETTINGS.NAVBAR_TITLE()} />
-<div class="content-height flex flex-col bg-silver dark:bg-navy">
-  <div class="hide-scrollbar flex flex-col space-y-[15px] overflow-y-scroll px-4 py-5" in:fly={{ x: 32, opacity: 1 }}>
-    <!-- Avatar -->
-    <div class="flex justify-center">
-      <EmojiAvatarSelect
-        selected={$state?.profile_settings.profile?.picture ?? undefined}
-        showEditButton={true}
-        on:change={(e) => dispatch({ type: '[Settings] Update profile', payload: { picture: e.detail } })}
-      />
-    </div>
-    <!-- Account -->
-    <div class="flex flex-col space-y-[10px]">
-      <p class="text-[14px]/[22px] font-medium text-slate-500 dark:text-slate-300">{$LL.SETTINGS.ACCOUNT()}</p>
-      <SettingsEntry
-        icon={UserCircleFillIcon}
-        title={$LL.SETTINGS.PROFILE.TITLE()}
-        on:click={() => goto('/me/settings/profile')}
-      />
-      <SettingsEntry icon={GearFillIcon} title={$LL.SETTINGS.APP.TITLE()} on:click={() => goto('/me/settings/app')} />
-      <SettingsEntry
-        icon={VaultFillIcon}
-        title={$LL.SETTINGS.BACKUP_RECOVERY.TITLE()}
-        on:click={() => goto('/me/settings/backup')}
-        disabled
-      />
-      <SettingsEntry icon={SignOutFillIcon} title={$LL.SETTINGS.LOG_OUT.TITLE()} hasCaretRight={false} disabled />
-    </div>
+<TopNavBar on:back={() => history.back()} title={$LL.SETTINGS.NAVBAR_TITLE()} class="sticky top-0 z-10" />
 
-    <!-- Support -->
-    <div class="flex flex-col space-y-[10px]">
-      <p class="text-[14px]/[22px] font-medium text-slate-500 dark:text-slate-300">{$LL.SETTINGS.SUPPORT.TITLE()}</p>
-      <SettingsEntry
-        icon={InfoFillIcon}
-        title={$LL.SETTINGS.SUPPORT.ABOUT.TITLE()}
-        on:click={() => goto('/me/settings/about')}
-      />
-      <SettingsEntry
-        icon={EnvelopeFillIcon}
-        title={$LL.SETTINGS.SUPPORT.FEEDBACK.TITLE()}
-        hasCaretRight={false}
-        disabled
-      />
-    </div>
+<div class="flex flex-col space-y-[15px] bg-silver px-4 py-5 dark:bg-navy" in:fly={{ x: 32, opacity: 1 }}>
+  <!-- Avatar -->
+  <div class="flex justify-center">
+    <EmojiAvatarSelect
+      selected={$state?.profile_settings.profile?.picture ?? undefined}
+      showEditButton={true}
+      on:change={(e) => dispatch({ type: '[Settings] Update profile', payload: { picture: e.detail } })}
+    />
+  </div>
+  <!-- Account -->
+  <div class="flex flex-col space-y-[10px]">
+    <p class="text-[14px]/[22px] font-medium text-slate-500 dark:text-slate-300">{$LL.SETTINGS.ACCOUNT()}</p>
+    <SettingsEntry
+      icon={UserCircleFillIcon}
+      title={$LL.SETTINGS.PROFILE.TITLE()}
+      on:click={() => goto('/me/settings/profile')}
+    />
+    <SettingsEntry icon={GearFillIcon} title={$LL.SETTINGS.APP.TITLE()} on:click={() => goto('/me/settings/app')} />
+    <SettingsEntry
+      icon={VaultFillIcon}
+      title={$LL.SETTINGS.BACKUP_RECOVERY.TITLE()}
+      on:click={() => goto('/me/settings/backup')}
+      disabled
+    />
+    <SettingsEntry icon={SignOutFillIcon} title={$LL.SETTINGS.LOG_OUT.TITLE()} hasCaretRight={false} disabled />
   </div>
-</div>
 
-<style>
-  .content-height {
-    /* bottom-navigation: 64px, top-navigation: 50px */
-    height: calc(100vh - var(--safe-area-inset-top) - var(--safe-area-inset-bottom) - 64px - 50px);
-  }
-</style>
+  <!-- Support -->
+  <div class="flex flex-col space-y-[10px]">
+    <p class="text-[14px]/[22px] font-medium text-slate-500 dark:text-slate-300">{$LL.SETTINGS.SUPPORT.TITLE()}</p>
+    <SettingsEntry
+      icon={InfoFillIcon}
+      title={$LL.SETTINGS.SUPPORT.ABOUT.TITLE()}
+      on:click={() => goto('/me/settings/about')}
+    />
+    <SettingsEntry
+      icon={EnvelopeFillIcon}
+      title={$LL.SETTINGS.SUPPORT.FEEDBACK.TITLE()}
+      hasCaretRight={false}
+      disabled
+    />
+  </div>
+</div>
diff --git a/unime/src/routes/(app)/me/settings/about/+page.svelte b/unime/src/routes/(app)/me/settings/about/+page.svelte
@@ -10,9 +10,9 @@
   export let data: PageData;
 </script>
 
-<TopNavBar on:back={() => history.back()} title={$LL.SETTINGS.SUPPORT.ABOUT.NAVBAR_TITLE()} />
+<TopNavBar on:back={() => history.back()} title={$LL.SETTINGS.SUPPORT.ABOUT.NAVBAR_TITLE()} class="sticky top-0 z-10" />
 
-<div class="content-height flex flex-col bg-silver dark:bg-navy">
+<div class="flex flex-col bg-silver dark:bg-navy">
   <h1 class="sr-only">{$LL.SETTINGS.SUPPORT.ABOUT.TITLE()}</h1>
   <div
     class="flex flex-col items-center gap-6 pt-4 text-[13px]/[24px] font-normal text-slate-500 opacity-50 dark:text-slate-300"
@@ -39,17 +39,10 @@
         <HeartFillIcon class="pl-1" />
       </div>
     </section>
-    <section class="flex flex-col items-center">
+    <section class="mb-4 flex flex-col items-center">
       <h2 class="mb-3 font-bold">{$LL.SETTINGS.SUPPORT.ABOUT.LICENSE()}</h2>
       <div>Apache License 2.0</div>
       <div>{`${new Date().getFullYear()} Impierce Technologies`}</div>
     </section>
   </div>
 </div>
-
-<style>
-  .content-height {
-    /* bottom-navigation: 64px, top-navigation: 50px */
-    height: calc(100vh - var(--safe-area-inset-top) - var(--safe-area-inset-bottom) - 64px - 50px);
-  }
-</style>
diff --git a/unime/src/routes/(app)/me/settings/app/+page.svelte b/unime/src/routes/(app)/me/settings/app/+page.svelte
@@ -26,8 +26,9 @@
   }
 </script>
 
-<TopNavBar on:back={() => history.back()} title={$LL.SETTINGS.APP.NAVBAR_TITLE()} />
-<div class="content-height flex flex-col bg-silver dark:bg-navy">
+<TopNavBar on:back={() => history.back()} title={$LL.SETTINGS.APP.NAVBAR_TITLE()} class="sticky top-0 z-10" />
+
+<div class="flex flex-col bg-silver dark:bg-navy">
   <div class="flex flex-col space-y-[10px] px-4 py-5">
     <SettingsEntry
       icon={TranslateFillIcon}
@@ -88,10 +89,3 @@
     {/if}
   </div>
 </div>
-
-<style>
-  .content-height {
-    /* bottom-navigation: 64px, top-navigation: 50px */
-    height: calc(100vh - var(--safe-area-inset-top) - var(--safe-area-inset-bottom) - 64px - 50px);
-  }
-</style>
diff --git a/unime/src/routes/(app)/me/settings/app/did/+page.svelte b/unime/src/routes/(app)/me/settings/app/did/+page.svelte
@@ -43,76 +43,68 @@
   };
 </script>
 
-<TopNavBar on:back={() => history.back()} title={'Manage identities'} />
-<div class="content-height flex flex-col bg-silver dark:bg-navy">
-  <div class="space-y-[15px] px-4 py-5">
-    <!-- Produce -->
-    <div class="flex flex-col space-y-[10px]">
-      <p class="text-[14px]/[22px] font-medium text-slate-500 dark:text-slate-300">Produce</p>
-      <div class="flex flex-col space-y-4">
-        {#each methods as method (method.method)}
-          <button
-            class={`rounded-xl border bg-white p-4 disabled:opacity-30 dark:bg-dark ${method.method === preferred_did_method ? 'border-primary ring-1 ring-primary' : 'border-slate-200 dark:border-slate-600'}`}
-            on:click={() => handleClick(method)}
-            disabled={!method.enabled}
-          >
-            <div class="flex h-7 items-center justify-between">
-              <div class="flex items-center">
-                {#if method.logo}
-                  <svelte:component this={method.logo} class="mr-3 h-6 w-6" />
-                {/if}
-                <p class="text-base font-semibold text-slate-800 dark:text-grey">{method.alias ?? method.method}</p>
-                <div class="ml-2 flex items-center space-x-1 rounded-full bg-slate-200 px-2 py-1 dark:bg-slate-600">
-                  <p class="text-[12px]/[20px] font-medium text-slate-400 dark:text-slate-300">
-                    {$state.profile_settings.preferred_key_types.at(0)}
-                  </p>
-                </div>
-              </div>
-              {#if method.method === preferred_did_method}
-                <div class="flex items-center space-x-1 rounded-full bg-ex-blue-2 px-2 py-1 dark:bg-primary">
-                  <p class="text-[12px]/[20px] font-medium text-teal dark:text-dark">preferred</p>
-                </div>
-              {/if}
-              {#if !method.did}
-                <button class="-mr-4 px-4 py-2 text-[13px]/[24px] font-medium text-primary disabled:text-slate-300">
-                  <span class="flex items-center">Set up</span>
-                </button>
+<TopNavBar on:back={() => history.back()} title={'Manage identities'} class="sticky top-0 z-10" />
+
+<div class="flex flex-col space-y-[15px] bg-silver px-4 py-5 dark:bg-navy">
+  <!-- Produce -->
+  <div class="flex flex-col space-y-[10px]">
+    <p class="text-[14px]/[22px] font-medium text-slate-500 dark:text-slate-300">Produce</p>
+    <div class="flex flex-col space-y-4">
+      {#each methods as method (method.method)}
+        <button
+          class={`rounded-xl border bg-white p-4 disabled:opacity-30 dark:bg-dark ${method.method === preferred_did_method ? 'border-primary ring-1 ring-primary' : 'border-slate-200 dark:border-slate-600'}`}
+          on:click={() => handleClick(method)}
+          disabled={!method.enabled}
+        >
+          <div class="flex h-7 items-center justify-between">
+            <div class="flex items-center">
+              {#if method.logo}
+                <svelte:component this={method.logo} class="mr-3 h-6 w-6" />
               {/if}
-            </div>
-            {#if method.did}
-              <div class="flex items-center justify-between space-x-4 pt-4">
-                <p
-                  class="break-all text-left font-mono text-[11px]/[14px] font-medium text-slate-500 dark:text-slate-300"
-                >
-                  {method.did}
+              <p class="text-base font-semibold text-slate-800 dark:text-grey">{method.alias ?? method.method}</p>
+              <div class="ml-2 flex items-center space-x-1 rounded-full bg-slate-200 px-2 py-1 dark:bg-slate-600">
+                <p class="text-[12px]/[20px] font-medium text-slate-400 dark:text-slate-300">
+                  {$state.profile_settings.preferred_key_types.at(0)}
                 </p>
               </div>
+            </div>
+            {#if method.method === preferred_did_method}
+              <div class="flex items-center space-x-1 rounded-full bg-ex-blue-2 px-2 py-1 dark:bg-primary">
+                <p class="text-[12px]/[20px] font-medium text-teal dark:text-dark">preferred</p>
+              </div>
+            {/if}
+            {#if !method.did}
+              <button class="-mr-4 px-4 py-2 text-[13px]/[24px] font-medium text-primary disabled:text-slate-300">
+                <span class="flex items-center">Set up</span>
+              </button>
             {/if}
-          </button>
-        {/each}
-      </div>
+          </div>
+          {#if method.did}
+            <div class="flex items-center justify-between space-x-4 pt-4">
+              <p
+                class="break-all text-left font-mono text-[11px]/[14px] font-medium text-slate-500 dark:text-slate-300"
+              >
+                {method.did}
+              </p>
+            </div>
+          {/if}
+        </button>
+      {/each}
     </div>
+  </div>
 
-    <!-- Verify -->
-    <div class="flex flex-col space-y-[10px]">
-      <p class="text-[14px]/[22px] font-medium text-slate-500 dark:text-slate-300">Verify</p>
-      <div class="flex flex-wrap gap-2">
-        {#each verifiableMethods as method}
-          <div class="flex items-center space-x-1 rounded-full bg-ex-blue-2 px-2 py-1 dark:bg-primary">
-            <CheckCircleFillIcon class="h-4 w-4 text-primary dark:text-navy" />
-            <p class="text-[12px]/[20px] font-medium text-teal dark:text-dark">
-              {method}
-            </p>
-          </div>
-        {/each}
-      </div>
+  <!-- Verify -->
+  <div class="flex flex-col space-y-[10px]">
+    <p class="text-[14px]/[22px] font-medium text-slate-500 dark:text-slate-300">Verify</p>
+    <div class="flex flex-wrap gap-2">
+      {#each verifiableMethods as method}
+        <div class="flex items-center space-x-1 rounded-full bg-ex-blue-2 px-2 py-1 dark:bg-primary">
+          <CheckCircleFillIcon class="h-4 w-4 text-primary dark:text-navy" />
+          <p class="text-[12px]/[20px] font-medium text-teal dark:text-dark">
+            {method}
+          </p>
+        </div>
+      {/each}
     </div>
   </div>
 </div>
-
-<style>
-  .content-height {
-    /* bottom-navigation: 64px, top-navigation: 50px */
-    height: calc(100vh - var(--safe-area-inset-top) - var(--safe-area-inset-bottom) - 64px - 50px);
-  }
-</style>