From abe0de0c19c78ed0d6131763a721ba9d1a00a725 Mon Sep 17 00:00:00 2001
From: Kevin Charles <kevinmcharles@gmail.com>
Date: Fri, 24 Mar 2023 03:01:21 +0000
Subject: [PATCH] Portfolio Activity Viewer Avatar and elispe Label

---
 .../_framework/Paths/PortfolioActivityViewer.jsx | 16 ++++++++++++++--
 src/Tools/singlepage/index.jsx                   |  3 +++
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/Tools/_framework/Paths/PortfolioActivityViewer.jsx b/src/Tools/_framework/Paths/PortfolioActivityViewer.jsx
index 83781daeb6..aa1c08020f 100644
--- a/src/Tools/_framework/Paths/PortfolioActivityViewer.jsx
+++ b/src/Tools/_framework/Paths/PortfolioActivityViewer.jsx
@@ -99,14 +99,26 @@ const HeaderSectionRight = styled.div`
   display: flex;
   justify-content: flex-end;
 `
-const Label = styled.span`
+const Label = styled.div`
   font-size: 1.4em;
   font-weight: bold;
+  max-width: 500px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `
 
 const AvatarLink = styled(Link)`
   text-decoration: none;
   color: black;
+  position: relative;
+`
+
+const Byline = styled.small`
+  position: absolute;
+  left: 36px;
+  top: 8px; 
+  width: 400px;
 `
 
 export function PortfolioActivityViewer() {
@@ -146,7 +158,7 @@ export function PortfolioActivityViewer() {
     <div>
       <HeaderSectionLeft><Label>{label}</Label></HeaderSectionLeft>
       <HeaderSectionLeft><AvatarLink to={`/portfolio/${courseId}/public`}> 
-    <Avatar size='sm' name={fullName} /> By {fullName}</AvatarLink></HeaderSectionLeft>
+    <Avatar size='sm' name={fullName} /> <Byline>By {fullName}</Byline></AvatarLink></HeaderSectionLeft>
       </div>
       <div>
       <HeaderSectionRight><Button value="See Inside" onClick={()=>navigate(`/portfolioeditor?tool=editor&doenetId=${doenetId}&pageId=${pageDoenetId}`)} /></HeaderSectionRight>
diff --git a/src/Tools/singlepage/index.jsx b/src/Tools/singlepage/index.jsx
index 5f398706f1..8be91cc0ef 100644
--- a/src/Tools/singlepage/index.jsx
+++ b/src/Tools/singlepage/index.jsx
@@ -21,6 +21,7 @@ import {loader as portfolioLoader, action as portfolioAction, Portfolio } from "
 import { loader as portfolioEditorMenuCapLoader } from "../_framework/MenuPanelCaps/PortfilioEditorInfoCap";
 import { loader as publicPortfolioLoader, PublicPortfolio } from "../_framework/Paths/PublicPortfolio";
 import { loader as portfolioActivityViewerLoader, PortfolioActivityViewer } from "../_framework/Paths/PortfolioActivityViewer";
+import { ChakraProvider } from "@chakra-ui/react";
 
 const router = createBrowserRouter([
   {
@@ -73,7 +74,9 @@ const router = createBrowserRouter([
           config={mathjaxConfig}
           onStartup={(mathJax) => (mathJax.Hub.processSectionDelay = 0)}
         >
+          <ChakraProvider>
           <PortfolioActivityViewer />
+          </ChakraProvider>
         </MathJaxContext>
       </DarkmodeController>
 </RecoilRoot>),