fix(UI): fix TreeView layout (#1400)

fix(UI): change CloneTabs path

Author: yumeowo

moon/apps/web/components/CodeView/BlobView/CodeContent.tsx

@@ -220,7 +220,7 @@ const CodeContent = ({ fileContent, path }: { fileContent: string; path?: string
                   style={{
                     backgroundColor: selectedLine === i ? '#f0f7ff' : 'transparent'
                   }}
-                  className='flex'
+                  className='flex justify-self-auto'
                   onClick={() => handleLineClick(i)}
                 >
                   <span className='inline-block w-8'>
@@ -242,10 +242,12 @@ const CodeContent = ({ fileContent, path }: { fileContent: string; path?: string
                     null}
                   </span>
                   <span className={styles.codeLineNumber}>{i + 1}</span>
-                  {line.map((token, key) => (
-                    // eslint-disable-next-line react/no-array-index-key
-                    <span key={key} {...getTokenProps({ token })} />
-                  ))}
+                  <span className="max-w-[80%]">
+                    {line.map((token, key) => (
+                      // eslint-disable-next-line react/no-array-index-key
+                      <span key={key} {...getTokenProps({ token })} />
+                    ))}
+                  </span>
                 </div>
               ))}
             {lfs && <span>(Sorry about that, but we can’t show files that are this big right now.)</span>}

moon/apps/web/components/CodeView/TreeView/CloneTabs.tsx

@@ -13,19 +13,23 @@ const CloneTabs = ({ endpoint }: any) => {
   const [copied, setCopied] = useState<boolean>(false)
   const [active_tab, setActiveTab] = useState<string>('HTTP')
   const [open, setOpen] = useState(false)
+  const [repo_name, setRepo_name] = useState<string>('')
   const url = new URL(MONO_API_URL)
 
   useEffect(() => {
     if (MONO_API_URL) {
       const url = new URL(MONO_API_URL)
 
-      if (active_tab === '1') {
-        setText(`${url.href}${pathname?.replace('/myorganization/code/tree/', '')}.git`)
-      } else {
-        setText(`ssh://git@${url.host}${pathname?.replace('/myorganization/code/tree', '')}.git`)
+      setRepo_name(pathname?.split("/code/tree/")[1]!!)
+
+      if (active_tab === 'HTTP') {
+        setText(`${ url.href }${ repo_name }.git`)
+      }
+      if(active_tab === 'SSH') {
+        setText(`ssh://git@${ url.host }/${ repo_name }.git`)
       }
     }
-  }, [pathname, active_tab, endpoint])
+  }, [pathname, active_tab, endpoint, repo_name])
 
   const handleCopy = () => {
     copy(text)
@@ -36,20 +40,20 @@ const CloneTabs = ({ endpoint }: any) => {
   const tabContent = [
     {
       value: 'HTTP',
-      inputValue: `${url.href}${pathname?.replace('/myorganization/code/tree/', '')}.git`,
+      inputValue: `${url.href}${repo_name}.git`,
       info: 'Clone using the web URL.'
     },
     {
       value: 'SSH',
-      inputValue: `ssh://git@${url.host}${pathname?.replace('/myorganization/code/tree', '')}.git`,
+      inputValue: `ssh://git@${url.host}/${repo_name}.git`,
       info: 'Use a password-protected SSH key.'
     }
   ]
 
   return (
     <>
-      <Popover open={open} onOpenChange={setOpen} modal>
-        <PopoverTrigger asChild>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger>
           <Button variant='base'>
             <Flex gap='3'>
               <DownloadIcon />
@@ -69,7 +73,7 @@ const CloneTabs = ({ endpoint }: any) => {
               asChild
               addDismissibleLayer
             >
-              <Tabs.Root defaultValue='HTTP' onValueChange={setActiveTab}>
+              <Tabs.Root defaultValue={active_tab} onValueChange={setActiveTab}>
                 <Tabs.List size='1' className='p-2'>
                   <Tabs.Trigger value='HTTP'>
                     <Button variant={active_tab === 'HTTP' ? 'flat' : 'plain'}>HTTP</Button>
@@ -82,7 +86,6 @@ const CloneTabs = ({ endpoint }: any) => {
                   {tabContent?.map((_item) => {
                     return (
                       <Tabs.Content value={_item.value} key={_item.value}>
-                        <Flex direction='column'>
                           <Flex align='center'>
                             <input
                               value={_item.inputValue}
@@ -94,7 +97,6 @@ const CloneTabs = ({ endpoint }: any) => {
                             </Button>
                           </Flex>
                           <div className='ml-2 text-gray-500'>{_item.info}</div>
-                        </Flex>
                       </Tabs.Content>
                     )
                   })}

moon/apps/web/components/CodeView/TreeView/RepoTree.tsx

@@ -134,7 +134,7 @@ const handleNodeToggle = useCallback((_event: React.SyntheticEvent | null, nodeI
           items={treeAllData}
           expandedItems={expandedNodes}
           onExpandedItemsChange={handleNodeToggle}
-          sx={{ height: 'fit-content', flexGrow: 1, width: 400, overflow: 'auto' }}
+          sx={{ height: 'fit-content', flexGrow: 1, width: '100%', overflow: 'auto' }}
           slots={{
             item: (itemProps) => (
               <CustomTreeItem 

moon/apps/web/pages/[org]/code/blob/[...path].tsx

@@ -12,18 +12,22 @@ import { Theme } from '@radix-ui/themes'
 
 const codeStyle = {
   borderRadius: 8,
+  width: '80%',
   background: '#fff',
-  border: '1px solid #d1d9e0',
-  margin: '0 8px',
-  flexGrow: 1,
-  minWidth: 0
+  height: 'calc(100vh - 96px)',
+  overflow: 'auto',
+  paddingRight: '8px'
 }
 
 const treeStyle = {
   borderRadius: 8,
-  overflow: 'hidden',
-  width: '400px',
-  background: '#fff'
+  width: '20%',
+  minWidth: '300px',
+  flexShrink: 0,
+  background: '#fff',
+  height: 'calc(100vh - 96px)',
+  overflow: 'auto',
+  paddingRight: '8px'
 }
 
 function BlobPage() {
@@ -42,7 +46,7 @@ function BlobPage() {
 
   return (
     <Theme>
-      <div className='relative m-4 h-screen overflow-auto'>
+      <div className='relative m-4 h-screen'>
           <BreadCrumb path={path} />
           {/* tree */}
           <div className='flex gap-4'>
@@ -54,11 +58,7 @@ function BlobPage() {
               <div className='m-2'>
                 <CommitHistory flag={'details'} info={commitInfo} />
               </div>
-              <div className='flex w-full flex-wrap gap-4'>
-                <div style={codeStyle}>
-                  <CodeContent fileContent={fileContent} path={path} />
-                </div>
-              </div>
+              <CodeContent fileContent={fileContent} path={path} />
             </div>
           </div>
       </div>

moon/apps/web/pages/[org]/code/tree/[...path]/index.tsx

@@ -45,24 +45,28 @@ function TreeDetailPage() {
 
   const treeStyle = {
     borderRadius: 8,
-    width: '400px',
-    minWidth: '0px',
+    width: '20%',
+    minWidth: '300px',
     flexShrink: 0,
-    background: '#fff'
+    background: '#fff',
+    height: 'calc(100vh - 96px)',
+    overflow: 'auto',
+    paddingRight: '8px'
   }
 
   const codeStyle = {
     borderRadius: 8,
-    overflow: 'hidden',
     width: 'calc(80% - 8px)',
-    height: '100%',
-    background: '#fff'
+    background: '#fff',
+    height: 'calc(100vh - 96px)',
+    overflow: 'auto',
+    paddingRight: '8px'
   }
 
   return (
     <Theme>
-      <div className='relative m-4 h-screen overflow-auto'>
-        <div className='h-12 flex justify-between items-center'>
+      <div className='relative m-4 h-screen'>
+      <div className='h-12 flex justify-between items-center'>
           <BreadCrumb path={path} />
           {canClone?.data && (
             <div className='m-1 flex justify-end'>
@@ -71,7 +75,6 @@ function TreeDetailPage() {
           )}
         </div>
         <div className='flex gap-4'>
-          {/* tree */}
           <div style={treeStyle}>
             <RepoTree onCommitInfoChange={(path: string) => setNewPath(path)} />
           </div>