From 72681537d760619e35ac26790fe77aec295b2084 Mon Sep 17 00:00:00 2001
From: Meichen Dong <meichen.dong@usecodex.com>
Date: Thu, 14 Jul 2022 19:59:09 -0400
Subject: [PATCH 1/2] Make metadata text turn into ellipsis on the left

---
 .../src/views/components/Context.svelte       | 27 +++++++++++++++---
 .../src/views/components/InlineScope.svelte   | 28 +++++++++++++++----
 2 files changed, 46 insertions(+), 9 deletions(-)

diff --git a/codex-webview/src/views/components/Context.svelte b/codex-webview/src/views/components/Context.svelte
index 242687b8..2ef7ca3f 100644
--- a/codex-webview/src/views/components/Context.svelte
+++ b/codex-webview/src/views/components/Context.svelte
@@ -107,10 +107,10 @@
             </div>
             
         {/if}
-        <div class="text-gray-400">
-            <div class="min-w-0 flex-1 flex flex-row items-start">
-                <div class="flex-auto">
-                    <AuthorDetails createdAt={context.createdAt} createdBy={context.createdBy} />
+        <div class="text-gray-400 context-metadata">
+            <div class="min-w-0 flex-1 flex flex-row items-start context-metadata__wrapper">
+                <div class="context-metadata__header">
+                    <AuthorDetails createdAt={context.createdAt} createdBy={context.createdBy} containerClass="flex justify-end"/>
                     <InlineScope contextId={context.id} scope={context.contextInstances[0].scope} codexId={context.codexId} />
                 </div>
                 
@@ -179,4 +179,23 @@
     .button-wrapper {
         margin-bottom: 1em;
     }
+    .context-metadata__header {
+        vertical-align: middle;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        direction: rtl;
+        overflow: hidden;
+        margin-left: 0;
+    }
+    .context-metadata {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+    .context-metadata__wrapper {
+        display: flex;
+        align-items: center;
+        width: calc(50% - 2em);
+        gap: 0.5em;
+    }
 </style>
\ No newline at end of file
diff --git a/codex-webview/src/views/components/InlineScope.svelte b/codex-webview/src/views/components/InlineScope.svelte
index 8eaa0333..ed8b3c4c 100644
--- a/codex-webview/src/views/components/InlineScope.svelte
+++ b/codex-webview/src/views/components/InlineScope.svelte
@@ -20,8 +20,26 @@
         });
     };
 </script>
-{#if scope?.file}
-    <a href="/#" class={`inline-scope text-md ${$$props.class}`} on:click={navigateToLine}>
-        {scope.file?.name}{ scope.startLine && scope.endLine ? `#[L${scope.startLine}:L${scope.endLine}]` : "" } 
-    </a>
-{/if}
\ No newline at end of file
+<container class="wrapper">
+   {#if scope?.file}
+        <a href="/#" class={`page-header__text inline-scope text-md ${$$props.class}`} on:click={navigateToLine}>
+            {scope.file?.name}{ scope.startLine && scope.endLine ? `#[L${scope.startLine}:L${scope.endLine}]` : "" } 
+        </a>
+    {/if} 
+</container>
+
+<style>
+    .inline-scope {
+        white-space: nowrap;
+        vertical-align: middle;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        direction: rtl;
+        overflow: hidden;
+    }
+
+    .wrapper {
+        overflow: hidden;
+        margin-left: 0em;
+    }
+</style>
\ No newline at end of file

From c415061ada50325532b912ec0053e9cba1c6a085 Mon Sep 17 00:00:00 2001
From: Chris Pulsinelli <chris@usecodex.com>
Date: Mon, 18 Jul 2022 11:26:25 -0400
Subject: [PATCH 2/2] Fixed ellipsis and alignment

---
 .../src/views/components/Context.svelte       | 10 +++++--
 .../src/views/components/InlineScope.svelte   | 26 +++++++++++--------
 2 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/codex-webview/src/views/components/Context.svelte b/codex-webview/src/views/components/Context.svelte
index 2ef7ca3f..660c39ce 100644
--- a/codex-webview/src/views/components/Context.svelte
+++ b/codex-webview/src/views/components/Context.svelte
@@ -109,8 +109,8 @@
         {/if}
         <div class="text-gray-400 context-metadata">
             <div class="min-w-0 flex-1 flex flex-row items-start context-metadata__wrapper">
-                <div class="context-metadata__header">
-                    <AuthorDetails createdAt={context.createdAt} createdBy={context.createdBy} containerClass="flex justify-end"/>
+                <div class="context-metadata__heading">
+                    <AuthorDetails createdAt={context.createdAt} createdBy={context.createdBy} containerClass="flex"/>
                     <InlineScope contextId={context.id} scope={context.contextInstances[0].scope} codexId={context.codexId} />
                 </div>
                 
@@ -179,6 +179,12 @@
     .button-wrapper {
         margin-bottom: 1em;
     }
+    .context-metadata__heading {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        max-width: calc(100% - 4em);
+    }
     .context-metadata__header {
         vertical-align: middle;
         text-overflow: ellipsis;
diff --git a/codex-webview/src/views/components/InlineScope.svelte b/codex-webview/src/views/components/InlineScope.svelte
index ed8b3c4c..cb71f96d 100644
--- a/codex-webview/src/views/components/InlineScope.svelte
+++ b/codex-webview/src/views/components/InlineScope.svelte
@@ -20,26 +20,30 @@
         });
     };
 </script>
-<container class="wrapper">
+
+<container class="inline-scope__wrapper">
    {#if scope?.file}
-        <a href="/#" class={`page-header__text inline-scope text-md ${$$props.class}`} on:click={navigateToLine}>
-            {scope.file?.name}{ scope.startLine && scope.endLine ? `#[L${scope.startLine}:L${scope.endLine}]` : "" } 
-        </a>
+        <div class="inline-scope__file">
+            <a href="/#" class={`page-header__text inline-scope__link text-md ${$$props.class}`} on:click={navigateToLine}>
+                {scope.file?.name}{ scope.startLine && scope.endLine ? `#[L${scope.startLine}:L${scope.endLine}]` : "" } 
+            </a>
+        </div>
     {/if} 
 </container>
 
 <style>
-    .inline-scope {
-        white-space: nowrap;
+    .inline-scope__wrapper {
+        width: 100%;
+    }
+    .inline-scope__file {
+        display: flex;
+        width: 100%;
+    }
+    .inline-scope__link {
         vertical-align: middle;
         text-overflow: ellipsis;
         white-space: nowrap;
         direction: rtl;
         overflow: hidden;
     }
-
-    .wrapper {
-        overflow: hidden;
-        margin-left: 0em;
-    }
 </style>
\ No newline at end of file