M: Improve manuals UI layout

rsconcept/frontend/src/app/ApplicationLayout.tsx

@@ -11,7 +11,7 @@ function ApplicationLayout() {
   const { viewportHeight, mainHeight, showScroll } = useConceptOptions();
   return (
     <NavigationState>
-      <div className='min-w-[20rem] clr-app antialiased h-full'>
+      <div className='min-w-[20rem] clr-app antialiased h-full max-w-[120rem] mx-auto'>
         <ConceptToaster
           className='mt-[4rem] text-[14px]' // prettier: split lines
           autoClose={3000}

rsconcept/frontend/src/pages/ManualsPage/ManualsPage.tsx

@@ -26,7 +26,7 @@ function ManualsPage() {
   );
 
   return (
-    <div className='flex gap-2' style={{ minHeight: mainHeight }}>
+    <div className='flex mx-auto max-w-[80rem]' style={{ minHeight: mainHeight }}>
       <TopicsList activeTopic={activeTopic} onChangeTopic={topic => onSelectTopic(topic)} />
       <ViewTopic topic={activeTopic} />
     </div>

rsconcept/frontend/src/pages/ManualsPage/ViewTopic.tsx

@@ -1,4 +1,7 @@
+'use client';
+
 import AnimateFade from '@/components/wrap/AnimateFade';
+import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import { HelpTopic } from '@/models/miscellaneous';
 import TopicPage from '@/pages/ManualsPage/TopicPage';
 
@@ -7,8 +10,9 @@ interface ViewTopicProps {
 }
 
 function ViewTopic({ topic }: ViewTopicProps) {
+  const { mainHeight } = useConceptOptions();
   return (
-    <AnimateFade key={topic} className='px-3 py-2 mx-auto'>
+    <AnimateFade key={topic} className='py-2 px-6 sm:px-12 overflow-y-auto' style={{ maxHeight: mainHeight }}>
       <TopicPage topic={topic} />
     </AnimateFade>
   );

rsconcept/frontend/src/pages/ManualsPage/items/HelpRSLang.tsx

@@ -13,7 +13,7 @@ function HelpRSLang() {
   const videoHeight = useMemo(() => {
     const viewH = windowSize.height ?? 0;
     const viewW = windowSize.width ?? 0;
-    const availableWidth = viewW - (windowSize.isSmall ? 35 : 300);
+    const availableWidth = viewW - (windowSize.isSmall ? 35 : 310);
     return Math.min(1080, Math.max(viewH - 450, 300), Math.floor((availableWidth * 9) / 16));
   }, [windowSize]);
 

rsconcept/frontend/src/pages/ManualsPage/items/HelpThesaurus.tsx

@@ -34,7 +34,7 @@ function HelpThesaurus() {
     <div className='text-justify'>
       <h1>Тезаурус</h1>
       <p>
-        Данные раздел содержит основные термины и определения, используемые в работе с Порталом. Термины сгруппированы
+        Данный раздел содержит основные термины и определения, используемые в работе с Порталом. Термины сгруппированы
         по ключевым сущностям. Более подробно описание отношений между терминами даются в отдельных разделах данной
         Справки через гиперссылки. Также указываются графические обозначения (иконки, цвета), используемые для
         обозначения соответствующих сущностей в интерфейсе Портала.
@@ -69,26 +69,26 @@ function HelpThesaurus() {
         По <b>отношению к операциям ОСС</b> выделены:
         <li>
           <IconRSForm size='1rem' className='inline-icon' />
-          {'\u2009'}свободная КС – это КС не прикрепленная ни к одной операции в ОСС;
+          {'\u2009'}свободная КС – КС не прикрепленная ни к одной операции в ОСС;
         </li>
         <li>
           <IconRSFormOwned size='1rem' className='inline-icon' />
-          {'\u2009'}собственная КС данной ОСС – это КС, прикрепленная к операции в ОСС, чьи владелец и расположение
+          {'\u2009'}собственная КС данной ОСС – КС, прикрепленная к операции в ОСС, чьи владелец и расположение
           совпадают с соответствующими атрибутами ОСС.
         </li>
         <li>
           <IconRSFormImported size='1rem' className='inline-icon' />
-          {'\u2009'}внешняя КС данной ОСС – это КС, прикрепленная к операции в ОСС, чьи владелец или расположение не
+          {'\u2009'}внешняя КС данной ОСС – КС, прикрепленная к операции в ОСС, чьи владелец или расположение не
           совпадают с соответствующими атрибутами ОСС;
         </li>
       </ul>
 
       <h2>Конституента</h2>
       <p>
-        Конституента – это выделенная часть КС, являющаяся отдельным понятием, схемой построения понятия, либо
-        утверждением, связывающим введенные понятия.{' '}
-        <LinkTopic text='Аттрибутами конституенты' topic={HelpTopic.CC_CONSTITUENTA} /> в родоструктурной экспликации
-        являются Термин, Конвенция, Типизация (Структура), Формальное определение, Текстовое определение, Комментарий.
+        Конституента – выделенная часть КС, являющаяся отдельным понятием, схемой построения понятия, либо утверждением,
+        связывающим введенные понятия. <LinkTopic text='Аттрибутами конституенты' topic={HelpTopic.CC_CONSTITUENTA} /> в
+        родоструктурной экспликации являются Термин, Конвенция, Типизация (Структура), Формальное определение, Текстовое
+        определение, Комментарий.
       </p>
       <ul>
         По <b>характеру формального определения в рамках КС</b> выделены классы:
@@ -231,11 +231,11 @@ function HelpThesaurus() {
         Для описания <b>наследования</b> конституент в рамках ОСС введены:
         <li>
           <IconChild size='1rem' className='inline-icon' />
-          {'\u2009'}наследованная конституента – конституента, перенесенная из другой КС в рамках операции синтеза;
+          {'\u2009'}наследованная конституента – конституента, перенесенная из другой КС в ходе синтеза;
         </li>
         <li>
           <IconPredecessor size='1rem' className='inline-icon' />
-          {'\u2009'}собственная конституента – конституента, не являющаяся наследником других конституент;
+          {'\u2009'}собственная конституента – конституента, не являющаяся наследованной;
         </li>
         <li>
           <IconPredecessor size='1rem' className='inline-icon' />
@@ -248,8 +248,8 @@ function HelpThesaurus() {
       <p>
         <IconOSS size='1rem' className='inline-icon' />
         {'\u2009'}
-        <LinkTopic text='Операционная схема синтеза' topic={HelpTopic.CC_OSS} /> (ОСС) – система концептуальных схем,
-        связанных операциями синтеза.
+        <LinkTopic text='Операционная схема синтеза' topic={HelpTopic.CC_OSS} /> (ОСС) – система операций над
+        концептуальными схемами.
       </p>
       <p>
         Граф синтеза – ориентированный граф, вершинами которого являются операции, а ребра указывают на использование

rsconcept/frontend/src/styling/setup.css

@@ -104,7 +104,7 @@ h6 {
 /* Limit text lines and setup wrapping */
 p,
 li {
-  max-width: 90ch;
+  max-width: 75ch;
   text-wrap: pretty;
 }