Portfolio Activity Viewer Avatar and elispe Label

jaltekruse · Mar 24, 2023 · abe0de0 · abe0de0
1 parent 83d09d2
commit abe0de0
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git 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
@@ -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>),