Update height calculations

rsconcept/frontend/src/context/ThemeContext.tsx

@@ -27,6 +27,8 @@ interface IThemeContext {
 
   showScroll: boolean;
   setShowScroll: (value: boolean) => void;
+
+  calculateHeight: (offset: string) => string;
 }
 
 const ThemeContext = createContext<IThemeContext | null>(null);
@@ -78,12 +80,25 @@ export const ThemeState = ({ children }: ThemeStateProps) => {
     }
   }, [noNavigation]);
 
+  const calculateHeight = useCallback(
+    (offset: string) => {
+      if (noNavigation) {
+        return `calc(100vh - (${offset}))`;
+      } else if (noFooter) {
+        return `calc(100vh - 3rem - (${offset}))`;
+      } else {
+        return `calc(100vh - 6.75rem - (${offset}))`;
+      }
+    },
+    [noNavigation, noFooter]
+  );
+
   const mainHeight = useMemo(() => {
-    return !noNavigation ? 'calc(100vh - 7rem - 2px)' : '100vh';
+    return !noNavigation ? 'calc(100vh - 6.75rem)' : '100vh';
   }, [noNavigation]);
 
   const viewportHeight = useMemo(() => {
-    return !noNavigation ? 'calc(100vh - 3rem - 2px)' : '100vh';
+    return !noNavigation ? 'calc(100vh - 3rem)' : '100vh';
   }, [noNavigation]);
 
   return (
@@ -100,7 +115,8 @@ export const ThemeState = ({ children }: ThemeStateProps) => {
         setNoFooter,
         setShowScroll,
         viewportHeight,
-        mainHeight
+        mainHeight,
+        calculateHeight
       }}
     >
       <>

rsconcept/frontend/src/pages/RSFormPage/EditorRSList/RSTable.tsx

@@ -30,7 +30,7 @@ const COLUMN_CONVENTION_HIDE_THRESHOLD = 1800;
 const columnHelper = createColumnHelper<IConstituenta>();
 
 function RSTable({ items, enableSelection, selected, setSelected, onEdit, onCreateNew }: RSTableProps) {
-  const { colors, noNavigation } = useConceptTheme();
+  const { colors, calculateHeight } = useConceptTheme();
   const windowSize = useWindowSize();
 
   const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
@@ -115,9 +115,7 @@ function RSTable({ items, enableSelection, selected, setSelected, onEdit, onCrea
     [colors]
   );
 
-  const tableHeight = useMemo(() => {
+  const tableHeight = useMemo(() => calculateHeight('4.05rem + 5px'), [calculateHeight]);
-    return !noNavigation ? 'calc(100vh - 7.2rem - 4px)' : 'calc(100vh - 4.4rem - 4px)';
-  }, [noNavigation]);
 
   return (
     <DataTable

rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph/TermGraph.tsx

@@ -39,7 +39,7 @@ function TermGraph({
   onSelect,
   onDeselectAll
 }: TermGraphProps) {
-  const { noNavigation, darkMode } = useConceptTheme();
+  const { calculateHeight, darkMode } = useConceptTheme();
   const graphRef = useRef<GraphCanvasRef | null>(null);
 
   const { selections, actives, setSelections, onCanvasClick, onNodePointerOver, onNodePointerOut } = useSelection({
@@ -101,9 +101,7 @@ function TermGraph({
     return 'calc(100vw - 1rem)';
   }, []);
 
-  const canvasHeight = useMemo(() => {
+  const canvasHeight = useMemo(() => calculateHeight('1.75rem + 4px'), [calculateHeight]);
-    return !noNavigation ? 'calc(100vh - 9.8rem - 4px)' : 'calc(100vh - 3rem - 4px)';
-  }, [noNavigation]);
 
   return (
     <div className='outline-none'>

rsconcept/frontend/src/pages/RSFormPage/RSTabs.tsx

@@ -37,9 +37,9 @@ function RSTabs() {
   const version = Number(query.get('v')) ?? undefined;
   const cstQuery = query.get('active');
 
+  const { setNoFooter, calculateHeight } = useConceptTheme();
   const { schema, loading } = useRSForm();
   const { destroyItem } = useLibrary();
-  const { setNoFooter } = useConceptTheme();
 
   const [isModified, setIsModified] = useState(false);
   useBlockNavigation(isModified);
@@ -155,6 +155,8 @@ function RSTabs() {
     });
   }, [schema, destroyItem, router]);
 
+  const panelHeight = useMemo(() => calculateHeight('1.75rem + 4px'), [calculateHeight]);
+
   return (
     <RSEditState
       selected={selected}
@@ -187,7 +189,7 @@ function RSTabs() {
             <TabLabel label='Граф термов' />
           </TabList>
 
-          <AnimateFade>
+          <AnimateFade className='overflow-y-auto' style={{ maxHeight: panelHeight }}>
             <TabPanel forceRender style={{ display: activeTab === RSTabID.CARD ? '' : 'none' }}>
               <EditorRSForm
                 isModified={isModified} // prettier: split lines