chore: improving some css and layout issues

src/components/Explorer/FileExplorer.tsx

@@ -67,7 +67,7 @@ export const FileExplorer = ({
   // Local state for selection and what is opened
   // diff this against new Project value that comes in
   return (
-    <div role="presentation" className="p-px">
+    <div role="presentation">
       {rowsToRender.map((row, index, original) => {
         const key = row.key
         const renderRow: FileExplorerRender = {
@@ -200,14 +200,14 @@ export const FileExplorerRowElement = ({
     row.name === selectedRow?.name && row.parentPath === selectedRow?.parentPath
   const isIndexActive = row.domIndex === row.activeIndex
 
-
   const rowElementRef = useRef(null)
   const isContextMenuRow = contextMenuRow?.key === row.key
   const isMyRowRenaming = isContextMenuRow && isRenaming
 
-  const outlineCSS = isIndexActive && !isMyRowRenaming
-    ? 'outline outline-1 outline-primary'
-    : 'outline-0 outline-none'
+  const outlineCSS =
+    isIndexActive && !isMyRowRenaming
+      ? 'outline outline-1 outline-primary'
+      : 'outline-0 outline-none'
   // Complaining about role="treeitem" focus but it is reimplemented aria labels
   /* eslint-disable */
   return (

src/components/Explorer/ModelingProjectExplorer.tsx

@@ -1,18 +1,18 @@
-import { PATHS } from "@src/lib/paths"
-import type { IndexLoaderData } from "@src/lib/types"
-import { useRouteLoaderData } from "react-router-dom"
-import { addPlaceHoldersForNewFileAndFolder } from "@src/components/Explorer/utils"
-import { ProjectExplorer } from "@src/components/Explorer/ProjectExplorer"
-import { useFolders } from "@src/machines/systemIO/hooks"
-import { useState , useEffect} from "react"
-import type { Project } from "@src/lib/project"
+import { PATHS } from '@src/lib/paths'
+import type { IndexLoaderData } from '@src/lib/types'
+import { useRouteLoaderData } from 'react-router-dom'
+import { addPlaceHoldersForNewFileAndFolder } from '@src/components/Explorer/utils'
+import { ProjectExplorer } from '@src/components/Explorer/ProjectExplorer'
+import { useFolders } from '@src/machines/systemIO/hooks'
+import { useState, useEffect } from 'react'
+import type { Project } from '@src/lib/project'
 
 export const ModelingProjectExplorer = () => {
   const projects = useFolders()
   const loaderData = useRouteLoaderData(PATHS.FILE) as IndexLoaderData
   const [theProject, setTheProject] = useState<Project | null>(null)
-  const {project} = loaderData
-  useEffect(()=>{
+  const { project } = loaderData
+  useEffect(() => {
     // Have no idea why the project loader data doesn't have the children from the ls on disk
     // That means it is a different object or cached incorrectly?
     if (!project) {
@@ -20,11 +20,11 @@ export const ModelingProjectExplorer = () => {
     }
 
     // You need to find the real project in the storage from the loader information since the loader Project is not hydrated
-    const theProject = projects.find((p)=>{
+    const theProject = projects.find((p) => {
       return p.name === project.name
     })
 
-    if (!theProject){
+    if (!theProject) {
       return
     }
 
@@ -32,10 +32,15 @@ export const ModelingProjectExplorer = () => {
     const duplicated = JSON.parse(JSON.stringify(theProject))
     addPlaceHoldersForNewFileAndFolder(duplicated.children, theProject.path)
     setTheProject(duplicated)
-  },[projects])
+  }, [projects])
 
-  return (<>
-    {theProject ? <ProjectExplorer project={theProject}></ProjectExplorer> : <div></div>}
-  </>
+  return (
+    <>
+      {theProject ? (
+        <ProjectExplorer project={theProject}></ProjectExplorer>
+      ) : (
+        <div></div>
+      )}
+    </>
   )
-} 
+}

src/components/Explorer/ProjectExplorer.tsx

@@ -507,7 +507,7 @@ export const ProjectExplorer = ({
         </div>
       </div>
       <div
-        className={`h-full w-full overflow-y-auto overflow-x-hidden border border-transparent ${activeIndex === -1 ? 'border-sky-500' : ''}`}
+        className={`h-full w-full overflow-y-auto overflow-x-hidden ${activeIndex === -1 ? 'border-sky-500' : ''}`}
         tabIndex={0}
         role="tree"
         aria-label="Files Explorer"

src/components/ModelingSidebar/ModelingPanes/index.tsx

@@ -138,7 +138,7 @@ export const sidebarPanes: SidebarPane[] = [
             Menu={'huh'}
             onClose={props.onClose}
           />
-          <ModelingProjectExplorer/>
+          <ModelingProjectExplorer />
         </>
       )
     },