Fixed geometry

okfn · Dec 23, 2024 · 4ecee89 · 4ecee89
1 parent 48ac324
commit 4ecee89
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 18 deletions.
diff --git a/client/components/Application/Content.tsx b/client/components/Application/Content.tsx
@@ -19,12 +19,18 @@ export default function Content() {
   const indexing = store.useStore((state) => state.indexing)
   const path = store.useStore((state) => state.path)
 
-  return indexing ? (
-    <LoadingContent />
-  ) : record && path ? (
-    <FileContent />
-  ) : (
-    <EmptyContent />
+  const Content = indexing ? LoadingContent : record && path ? FileContent : EmptyContent
+
+  return (
+    <Box
+      id="content"
+      sx={{
+        height: '100vh',
+        overflow: 'hidden',
+      }}
+    >
+      <Content />
+    </Box>
   )
 }
 
@@ -66,9 +72,7 @@ function FileContent() {
           store.onFileLeave()
         }}
       >
-        <Box>
-          <Controller />
-        </Box>
+        <Controller />
       </ClickAwayListener>
     </ErrorBoundary>
   )

diff --git a/client/components/Application/Layout.tsx b/client/components/Application/Layout.tsx
@@ -1,10 +1,10 @@
-import * as React from 'react'
+import * as store from '@client/store'
 import Box from '@mui/material/Box'
-import Sidebar from './Sidebar'
+import * as React from 'react'
 import Content from './Content'
 import Dialog from './Dialog'
 import Error from './Error'
-import * as store from '@client/store'
+import Sidebar from './Sidebar'
 
 export const fileMenuWidth = 284
 
@@ -17,7 +17,14 @@ export default function Layout() {
     <React.Fragment>
       <Error />
       <Dialog />
-      <Box sx={{ display: 'grid', gridTemplateColumns: `${fileMenuWidth}px 1fr` }}>
+      <Box
+        sx={{
+          height: '100vh',
+          overflow: 'hidden',
+          display: 'grid',
+          gridTemplateColumns: `${fileMenuWidth}px 1fr`,
+        }}
+      >
         <Sidebar />
         <Content />
       </Box>

diff --git a/client/components/Application/Sidebar.tsx b/client/components/Application/Sidebar.tsx
@@ -21,6 +21,7 @@ export default function Sidebar() {
       id="sidebar"
       sx={{
         height: '100vh',
+        overflow: 'hidden',
         borderRight: 'solid 1px #ddd',
       }}
     >

diff --git a/client/components/Controllers/Base/Panels/Report.tsx b/client/components/Controllers/Base/Panels/Report.tsx
@@ -1,6 +1,6 @@
 import Box from '@mui/material/Box'
-import Report from '../../../Views/Report'
 import * as types from '../../../../types'
+import Report from '../../../Views/Report'
 
 export interface ReportPanelProps {
   report?: types.IReport

diff --git a/client/components/Parts/Tooltips/Light.tsx b/client/components/Parts/Tooltips/Light.tsx
@@ -8,10 +8,10 @@ interface AllTooltipProps extends TooltipProps {
 export default styled(({ className, ...props }: AllTooltipProps) => (
   <Tooltip
     arrow
-    {...props}
     classes={{ popper: className }}
     TransitionProps={{ timeout: 0 }}
     placement="bottom"
+    {...props}
   />
 ))(({ theme, type }) => ({
   [`& .${tooltipClasses.tooltip}`]: {
@@ -20,7 +20,7 @@ export default styled(({ className, ...props }: AllTooltipProps) => (
     color: type == 'fileMenu' ? theme.palette.common.white : 'rgba(0, 0, 0, 0.87)',
     boxShadow: theme.shadows[1],
     fontSize: 16,
-    maxWidth: '50dvw',
+    maxWidth: '50vw',
   },
   [`& .${tooltipClasses.arrow}`]: {
     color: theme.palette.OKFNCoolGray.main,

diff --git a/client/components/Views/Report/Table.tsx b/client/components/Views/Report/Table.tsx
@@ -50,8 +50,11 @@ export default function ReportTable(props: ReportTableProps) {
                     })}
                   >
                     {value.length > 50 ? (
-                      <LightTooltip title={value}>
-                        <div className="cell-content" style={{ lineClamp: 1 }}>
+                      <LightTooltip title={truncate(value, { length: 1000 })}>
+                        <div
+                          className="cell-content"
+                          style={{ lineClamp: 1, cursor: 'pointer' }}
+                        >
                           {truncate(value, { length: 50 })}
                         </div>
                       </LightTooltip>