diff --git a/codex-webview/src/views/components/Context.svelte b/codex-webview/src/views/components/Context.svelte
index 242687b8..660c39ce 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__heading">
+                    <AuthorDetails createdAt={context.createdAt} createdBy={context.createdBy} containerClass="flex"/>
                     <InlineScope contextId={context.id} scope={context.contextInstances[0].scope} codexId={context.codexId} />
                 </div>
                 
@@ -179,4 +179,29 @@
     .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;
+        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..cb71f96d 100644
--- a/codex-webview/src/views/components/InlineScope.svelte
+++ b/codex-webview/src/views/components/InlineScope.svelte
@@ -20,8 +20,30 @@
         });
     };
 </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="inline-scope__wrapper">
+   {#if scope?.file}
+        <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__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;
+    }
+</style>
\ No newline at end of file