M: Improve layout for canvas - remove clipping top

rsconcept/frontend/src/context/ConceptOptionsContext.tsx

@@ -110,8 +110,14 @@ export const OptionsState = ({ children }: OptionsStateProps) => {
   }, [setDarkMode]);
 
   const mainHeight = useMemo(() => {
-    return !noNavigation ? 'calc(100dvh - 6.75rem)' : '100dvh';
+    if (noNavigation) {
-  }, [noNavigation]);
+      return '100dvh';
+    } else if (noFooter) {
+      return 'calc(100dvh - 3rem)';
+    } else {
+      return 'calc(100dvh - 6.75rem)';
+    }
+  }, [noNavigation, noFooter]);
 
   const viewportHeight = useMemo(() => {
     return !noNavigation ? 'calc(100dvh - 3rem)' : '100dvh';

rsconcept/frontend/src/pages/OssPage/EditorOssCard/EditorOssCard.tsx

@@ -49,7 +49,7 @@ function EditorOssCard({ isModified, onDestroy, setIsModified }: EditorOssCardPr
       />
       <AnimateFade
         onKeyDown={handleInput}
-        className={clsx('md:w-fit md:max-w-fit max-w-[32rem]', 'mx-auto ', 'flex flex-col md:flex-row px-6')}
+        className={clsx('md:w-fit md:max-w-fit max-w-[32rem]', 'mx-auto pt-[1.9rem]', 'flex flex-col md:flex-row px-6')}
       >
         <FlexColumn className='px-3'>
           <FormOSS id={globals.library_item_editor} isModified={isModified} setIsModified={setIsModified} />

rsconcept/frontend/src/pages/OssPage/EditorOssGraph/OssFlow.tsx

@@ -40,7 +40,7 @@ interface OssFlowProps {
 }
 
 function OssFlow({ isModified, setIsModified }: OssFlowProps) {
-  const { calculateHeight, colors } = useConceptOptions();
+  const { mainHeight, colors } = useConceptOptions();
   const model = useOSS();
   const controller = useOssEdit();
   const flow = useReactFlow();
@@ -342,8 +342,6 @@ function OssFlow({ isModified, setIsModified }: OssFlowProps) {
     }
   }
 
-  const canvasHeight = useMemo(() => calculateHeight('1.75rem + 4px'), [calculateHeight]);
-
   const OssNodeTypes: NodeTypes = useMemo(
     () => ({
       synthesis: OperationNode,
@@ -389,7 +387,7 @@ function OssFlow({ isModified, setIsModified }: OssFlowProps) {
 
   return (
     <AnimateFade tabIndex={-1} onKeyDown={handleKeyDown}>
-      <Overlay position='top-0 pt-1 right-1/2 translate-x-1/2' className='rounded-b-2xl cc-blur'>
+      <Overlay position='top-[1.9rem] pt-1 right-1/2 translate-x-1/2' className='rounded-b-2xl cc-blur'>
         <ToolbarOssGraph
           isModified={isModified}
           showGrid={showGrid}
@@ -419,7 +417,7 @@ function OssFlow({ isModified, setIsModified }: OssFlowProps) {
           {...menuProps}
         />
       ) : null}
-      <div className='relative w-[100vw]' style={{ height: canvasHeight }}>
+      <div className='relative w-[100vw]' style={{ height: mainHeight }}>
         {graph}
       </div>
     </AnimateFade>

rsconcept/frontend/src/pages/OssPage/OssTabs.tsx

@@ -9,6 +9,7 @@ import { toast } from 'react-toastify';
 import { urls } from '@/app/urls';
 import InfoError, { ErrorData } from '@/components/info/InfoError';
 import Loader from '@/components/ui/Loader';
+import Overlay from '@/components/ui/Overlay';
 import TabLabel from '@/components/ui/TabLabel';
 import TextURL from '@/components/ui/TextURL';
 import AnimateFade from '@/components/wrap/AnimateFade';
@@ -37,7 +38,7 @@ function OssTabs() {
   const activeTab = query.get('tab') ? (Number(query.get('tab')) as OssTabID) : OssTabID.GRAPH;
   const { user } = useAuth();
 
-  const { calculateHeight, setNoFooter } = useConceptOptions();
+  const { setNoFooter } = useConceptOptions();
   const { schema, loading, loadingError: errorLoading } = useOSS();
   const { destroyItem } = useLibrary();
 
@@ -107,8 +108,6 @@ function OssTabs() {
     });
   }, [schema, destroyItem, router]);
 
-  const panelHeight = useMemo(() => calculateHeight('1.625rem + 2px'), [calculateHeight]);
-
   const cardPanel = useMemo(
     () => (
       <TabPanel>
@@ -143,14 +142,16 @@ function OssTabs() {
           selectedTabClassName='clr-selected'
           className='flex flex-col mx-auto min-w-fit'
         >
-          <TabList className={clsx('mx-auto w-fit', 'flex items-stretch', 'border-b-2 border-x-2 divide-x-2')}>
+          <Overlay position='top-0 right-1/2 translate-x-1/2' layer='z-sticky'>
+            <TabList className={clsx('w-fit', 'flex items-stretch', 'border-b-2 border-x-2 divide-x-2')}>
               <MenuOssTabs onDestroy={onDestroySchema} />
 
               <TabLabel label='Карточка' title={schema.title ?? ''} />
               <TabLabel label='Граф' />
             </TabList>
+          </Overlay>
 
-          <AnimateFade className='overflow-y-auto' style={{ maxHeight: panelHeight }}>
+          <AnimateFade>
             {cardPanel}
             {graphPanel}
           </AnimateFade>

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

@@ -28,7 +28,7 @@ interface EditorConstituentaProps {
 function EditorConstituenta({ activeCst, isModified, setIsModified, onOpenEdit }: EditorConstituentaProps) {
   const controller = useRSEdit();
   const windowSize = useWindowSize();
-  const { calculateHeight } = useConceptOptions();
+  const { mainHeight } = useConceptOptions();
 
   const [showList, setShowList] = useLocalStorage(storage.rseditShowList, true);
   const [toggleReset, setToggleReset] = useState(false);
@@ -39,7 +39,6 @@ function EditorConstituenta({ activeCst, isModified, setIsModified, onOpenEdit }
   );
 
   const isNarrow = useMemo(() => !!windowSize.width && windowSize.width <= SIDELIST_LAYOUT_THRESHOLD, [windowSize]);
-  const panelHeight = useMemo(() => calculateHeight('1.75rem + 4px'), [calculateHeight]);
 
   function handleInput(event: React.KeyboardEvent<HTMLDivElement>) {
     if (disabled) {
@@ -79,7 +78,7 @@ function EditorConstituenta({ activeCst, isModified, setIsModified, onOpenEdit }
   }
 
   return (
-    <div className='overflow-y-auto min-h-[20rem]' style={{ maxHeight: panelHeight }}>
+    <>
       <ToolbarConstituenta
         activeCst={activeCst}
         disabled={disabled}
@@ -89,6 +88,7 @@ function EditorConstituenta({ activeCst, isModified, setIsModified, onOpenEdit }
         onReset={() => setToggleReset(prev => !prev)}
         onToggleList={() => setShowList(prev => !prev)}
       />
+      <div className='pt-[1.9rem] overflow-y-auto min-h-[20rem]' style={{ maxHeight: mainHeight }}>
         <div
           tabIndex={-1}
           className={clsx(
@@ -122,6 +122,7 @@ function EditorConstituenta({ activeCst, isModified, setIsModified, onOpenEdit }
           </AnimatePresence>
         </div>
       </div>
+    </>
   );
 }
 

rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta/ToolbarConstituenta.tsx

@@ -50,7 +50,7 @@ function ToolbarConstituenta({
 
   return (
     <Overlay
-      position='top-1 right-1/2 translate-x-1/2 xs:right-4 xs:translate-x-0 md:right-1/2 md:translate-x-1/2'
+      position='cc-tab-tools right-1/2 translate-x-1/2 xs:right-4 xs:translate-x-0 md:right-1/2 md:translate-x-1/2'
       className='cc-icons outline-none transition-all duration-500'
     >
       {controller.schema && controller.schema?.oss.length > 0 ? (

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

@@ -49,7 +49,7 @@ function EditorRSFormCard({ isModified, onDestroy, setIsModified }: EditorRSForm
       />
       <AnimateFade
         onKeyDown={handleInput}
-        className={clsx('md:w-fit md:max-w-fit max-w-[32rem] mx-auto', 'flex flex-col md:flex-row px-6')}
+        className={clsx('md:w-fit md:max-w-fit max-w-[32rem] mx-auto', 'flex flex-col md:flex-row px-6 pt-[1.9rem]')}
       >
         <FlexColumn className='flex-shrink'>
           <FormRSForm id={globals.library_item_editor} isModified={isModified} setIsModified={setIsModified} />

rsconcept/frontend/src/pages/RSFormPage/EditorRSFormCard/ToolbarRSFormCard.tsx

@@ -45,7 +45,7 @@ function ToolbarRSFormCard({ modified, controller, onSubmit, onDestroy }: Toolba
   }, [controller]);
 
   return (
-    <Overlay position='top-1 right-1/2 translate-x-1/2' className='cc-icons'>
+    <Overlay position='cc-tab-tools' className='cc-icons'>
       {ossSelector}
       {controller.isMutable || modified ? (
         <MiniButton

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

@@ -142,7 +142,7 @@ function EditorRSList({ onOpenEdit }: EditorRSListProps) {
   return (
     <>
       {controller.isContentEditable ? <ToolbarRSList /> : null}
-      <AnimateFade tabIndex={-1} onKeyDown={handleKeyDown}>
+      <AnimateFade tabIndex={-1} onKeyDown={handleKeyDown} className='pt-[1.9rem]'>
         {controller.isContentEditable ? (
           <div className='flex items-center border-b'>
             <div className='px-2'>

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

@@ -28,7 +28,7 @@ function ToolbarRSList() {
 
   return (
     <Overlay
-      position='top-1 right-4 translate-x-0 md:right-1/2 md:translate-x-1/2'
+      position='cc-tab-tools right-4 translate-x-0 md:right-1/2 md:translate-x-1/2'
       className='cc-icons items-start outline-none transition-all duration-500'
     >
       {controller.schema && controller.schema?.oss.length > 0 ? (

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

@@ -287,7 +287,7 @@ function EditorTermGraph({ onOpenEdit }: EditorTermGraphProps) {
   );
 
   return (
-    <AnimateFade tabIndex={-1} onKeyDown={handleKeyDown}>
+    <>
       <AnimatePresence>
         {showParamsDialog ? (
           <DlgGraphParams
@@ -298,10 +298,7 @@ function EditorTermGraph({ onOpenEdit }: EditorTermGraphProps) {
         ) : null}
       </AnimatePresence>
 
-      <Overlay
+      <Overlay position='cc-tab-tools' className='flex flex-col items-center rounded-b-2xl cc-blur'>
-        position='top-0 pt-1 right-1/2 translate-x-1/2'
-        className='flex flex-col items-center rounded-b-2xl cc-blur'
-      >
         <ToolbarTermGraph
           is3D={is3D}
           orbit={orbit}
@@ -352,6 +349,7 @@ function EditorTermGraph({ onOpenEdit }: EditorTermGraphProps) {
         ) : null}
       </Overlay>
 
+      <AnimateFade tabIndex={-1} onKeyDown={handleKeyDown}>
         <SelectedCounter
           hideZero
           totalCount={controller.schema?.stats?.count_all ?? 0}
@@ -362,7 +360,7 @@ function EditorTermGraph({ onOpenEdit }: EditorTermGraphProps) {
         {hoverCst && hoverCstDebounced && hoverCst === hoverCstDebounced ? (
           <Overlay
             layer='z-tooltip'
-          position={clsx('top-[1.6rem]', { 'left-[2.6rem]': hoverLeft, 'right-[2.6rem]': !hoverLeft })}
+            position={clsx('top-[3.5rem]', { 'left-[2.6rem]': hoverLeft, 'right-[2.6rem]': !hoverLeft })}
             className={clsx(
               'w-[25rem] max-h-[calc(100dvh-15rem)]',
               'px-3',
@@ -376,7 +374,7 @@ function EditorTermGraph({ onOpenEdit }: EditorTermGraphProps) {
           </Overlay>
         ) : null}
 
-      <Overlay position='top-[6.25rem] sm:top-[4rem] left-0' className='flex gap-1'>
+        <Overlay position='top-[8.15rem] sm:top-[5.9rem] left-0' className='flex gap-1'>
           <div className='flex flex-col ml-2 w-[13.5rem]'>
             {selectors}
             {viewHidden}
@@ -385,6 +383,7 @@ function EditorTermGraph({ onOpenEdit }: EditorTermGraphProps) {
 
         {graph}
       </AnimateFade>
+    </>
   );
 }
 

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

@@ -53,7 +53,7 @@ function TermGraph({
   onSelect,
   onDeselect
 }: TermGraphProps) {
-  const { calculateHeight, darkMode } = useConceptOptions();
+  const { mainHeight, darkMode } = useConceptOptions();
 
   const { selections, setSelections } = useSelection({
     ref: graphRef,
@@ -111,10 +111,8 @@ function TermGraph({
     return 'calc(100vw - 1rem)';
   }, []);
 
-  const canvasHeight = useMemo(() => calculateHeight('1.75rem + 4px'), [calculateHeight]);
-
   return (
-    <div className='relative outline-none' style={{ width: canvasWidth, height: canvasHeight }}>
+    <div className='relative outline-none' style={{ width: canvasWidth, height: mainHeight }}>
       <GraphUI
         nodes={nodes}
         edges={edges}

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

@@ -10,6 +10,7 @@ import { urls } from '@/app/urls';
 import InfoError, { ErrorData } from '@/components/info/InfoError';
 import Divider from '@/components/ui/Divider';
 import Loader from '@/components/ui/Loader';
+import Overlay from '@/components/ui/Overlay';
 import TabLabel from '@/components/ui/TabLabel';
 import TextURL from '@/components/ui/TextURL';
 import AnimateFade from '@/components/wrap/AnimateFade';
@@ -45,7 +46,7 @@ function RSTabs() {
   const version = query.get('v') ? Number(query.get('v')) : undefined;
   const cstQuery = query.get('active');
 
-  const { setNoFooter, calculateHeight } = useConceptOptions();
+  const { setNoFooter } = useConceptOptions();
   const { schema, loading, errorLoading, isArchive, itemID } = useRSForm();
   const library = useLibrary();
   const oss = useGlobalOss();
@@ -73,7 +74,7 @@ function RSTabs() {
   }, [schema, schema?.title]);
 
   useLayoutEffect(() => {
-    setNoFooter(activeTab === RSTabID.CST_EDIT || activeTab === RSTabID.CST_LIST);
+    setNoFooter(activeTab !== RSTabID.CARD);
     setIsModified(false);
     if (activeTab === RSTabID.CST_EDIT) {
       const cstID = Number(cstQuery);
@@ -189,8 +190,6 @@ function RSTabs() {
     });
   }, [schema, library, oss, router]);
 
-  const panelHeight = useMemo(() => calculateHeight('1.625rem + 2px'), [calculateHeight]);
-
   const cardPanel = useMemo(
     () => (
       <TabPanel>
@@ -255,19 +254,23 @@ function RSTabs() {
           selectedTabClassName='clr-selected'
           className='flex flex-col mx-auto min-w-fit'
         >
+          <Overlay position='top-0 right-1/2 translate-x-1/2' layer='z-sticky'>
             <TabList className={clsx('mx-auto w-fit', 'flex items-stretch', 'border-b-2 border-x-2 divide-x-2')}>
               <MenuRSTabs onDestroy={onDestroySchema} />
 
               <TabLabel label='Карточка' titleHtml={`${schema.title ?? ''}<br />Версия: ${labelVersion(schema)}`} />
               <TabLabel
                 label='Содержание'
-              titleHtml={`Конституент: ${schema.stats?.count_all ?? 0}<br />Ошибок: ${schema.stats?.count_errors ?? 0}`}
+                titleHtml={`Конституент: ${schema.stats?.count_all ?? 0}<br />Ошибок: ${
+                  schema.stats?.count_errors ?? 0
+                }`}
               />
               <TabLabel label='Редактор' />
               <TabLabel label='Граф термов' />
             </TabList>
+          </Overlay>
 
-          <AnimateFade className='overflow-y-auto overflow-x-hidden' style={{ maxHeight: panelHeight }}>
+          <AnimateFade className='overflow-x-hidden'>
             {cardPanel}
             {listPanel}
             {editorPanel}

rsconcept/frontend/src/styling/styles.css

@@ -221,6 +221,10 @@
     @apply clr-text-primary;
   }
 
+  .cc-tab-tools {
+    @apply top-[1.9rem] pt-1 right-1/2 translate-x-1/2;
+  }
+
   .cc-modal-blur {
     opacity: 0.3;
     backdrop-filter: blur(2px);