M: Small UI layout fixes

rsconcept/frontend/src/app/ApplicationLayout.tsx

@@ -28,10 +28,7 @@ function ApplicationLayout() {
             maxHeight: viewportHeight
           }}
         >
-          <main
-            className='w-full h-full cc-scroll-y'
-            style={{ overflowY: showScroll ? 'scroll' : 'auto', minHeight: mainHeight }}
-          >
+          <main className='cc-scroll-y' style={{ overflowY: showScroll ? 'scroll' : 'auto', minHeight: mainHeight }}>
             <Outlet />
           </main>
           <Footer />

rsconcept/frontend/src/app/Navigation/Navigation.tsx

@@ -28,7 +28,6 @@ function Navigation() {
       className={clsx(
         'z-navigation', // prettier: split lines
         'sticky top-0 left-0 right-0',
-        'w-full',
         'clr-app',
         'select-none'
       )}
@@ -36,7 +35,7 @@ function Navigation() {
       <ToggleNavigation />
       <motion.div
         className={clsx(
-          'pl-2 pr-[1.5rem] sm:pr-[0.9rem] h-[3rem] w-full', // prettier: split lines
+          'pl-2 pr-[1.5rem] sm:pr-[0.9rem] h-[3rem]', // prettier: split lines
           'flex',
           'cc-shadow-border'
         )}

rsconcept/frontend/src/components/info/InfoError.tsx

@@ -61,7 +61,7 @@ function InfoError({ error }: InfoErrorProps) {
   return (
     <AnimateFade
       className={clsx(
-        'min-w-[25rem] w-full',
+        'min-w-[25rem]',
         'px-3 py-2 flex flex-col',
         'clr-text-red',
         'text-sm font-semibold',

rsconcept/frontend/src/components/info/TooltipOperation.tsx

@@ -53,7 +53,7 @@ function TooltipOperation({ node, anchor }: TooltipOperationProps) {
         dense
         noHeader
         noFooter
-        className='w-full text-sm border select-none mb-2'
+        className='text-sm border select-none mb-2'
         data={node.data.operation.substitutions}
         columns={columns}
       />

rsconcept/frontend/src/components/select/PickMultiOperation.tsx

@@ -130,7 +130,6 @@ function PickMultiOperation({ rows, items, selected, setSelected }: PickMultiOpe
         items={nonSelectedItems} // prettier: split-line
         value={lastSelected}
         onSelectValue={handleSelect}
-        className='w-full'
       />
       <DataTable
         dense

rsconcept/frontend/src/components/select/PickSchema.tsx

@@ -124,7 +124,7 @@ function PickSchema({
       <div className='flex justify-between clr-input items-center pr-1'>
         <SearchBar
           id={id ? `${id}__search` : undefined}
-          className='clr-input w-full'
+          className='clr-input flex-grow'
           noBorder
           value={filterText}
           onChange={newValue => setFilterText(newValue)}

rsconcept/frontend/src/components/select/PickSubstitutions.tsx

@@ -257,10 +257,9 @@ function PickSubstitutions({
   );
 
   return (
-    <div className='flex flex-col w-full'>
+    <div className='flex flex-col'>
       <div className='flex items-end gap-3 justify-stretch'>
-        <div className='flex-grow flex flex-col basis-1/2'>
-          <div className='flex flex-col gap-[0.125rem] border-x border-t clr-input'>
+        <div className='flex-grow flex flex-col basis-1/2 gap-[0.125rem] border-x border-t clr-input'>
           <SelectLibraryItem
             noBorder
             placeholder='Выберите аргумент'
@@ -277,7 +276,6 @@ function PickSubstitutions({
             onSelectValue={setLeftCst}
           />
         </div>
-        </div>
         <div className='flex flex-col gap-1'>
           <MiniButton
             title={deleteRight ? 'Заменить правую' : 'Заменить левую'}
@@ -290,7 +288,6 @@ function PickSubstitutions({
               )
             }
           />
-
           <MiniButton
             title='Добавить в таблицу отождествлений'
             className='mb-[0.375rem] grow-0'
@@ -300,8 +297,7 @@ function PickSubstitutions({
           />
         </div>
 
-        <div className='flex-grow basis-1/2'>
-          <div className='flex flex-col gap-[0.125rem] border-x border-t clr-input'>
+        <div className='flex-grow basis-1/2 flex flex-col gap-[0.125rem] border-x border-t clr-input'>
           <SelectLibraryItem
             noBorder
             placeholder='Выберите аргумент'
@@ -319,13 +315,12 @@ function PickSubstitutions({
           />
         </div>
       </div>
-      </div>
 
       <DataTable
         dense
         noHeader
         noFooter
-        className='w-full text-sm border select-none cc-scroll-y'
+        className='text-sm border select-none cc-scroll-y'
         rows={rows}
         contentHeight='1.3rem'
         data={substitutionData}

rsconcept/frontend/src/components/select/SelectVersion.tsx

@@ -40,7 +40,7 @@ function SelectVersion({ id, className, items, value, onSelectValue, ...restProp
   return (
     <SelectSingle
       id={id}
-      className={clsx('w-full min-w-[12rem] text-ellipsis', className)}
+      className={clsx('min-w-[12rem] text-ellipsis', className)}
       options={options}
       value={{ value: value, label: valueLabel }}
       onChange={data => onSelectValue(data?.value)}

rsconcept/frontend/src/components/ui/SearchBar.tsx

@@ -27,7 +27,7 @@ function SearchBar({ id, value, noIcon, onChange, noBorder, placeholder = 'По
         noOutline
         placeholder={placeholder}
         type='search'
-        className={clsx('w-full outline-none bg-transparent', !noIcon && 'pl-10')}
+        className={clsx('outline-none bg-transparent', !noIcon && 'pl-10')}
         noBorder={noBorder}
         value={value}
         onChange={event => (onChange ? onChange(event.target.value) : undefined)}

rsconcept/frontend/src/components/ui/SelectSingle.tsx

@@ -113,7 +113,7 @@ function SelectSingle<Option, Group extends GroupBase<Option> = GroupBase<Option
         spacing: {
           ...theme.spacing, // prettier: split-lines
           baseUnit: size.isSmall ? 2 : 4,
-          menuGutter: size.isSmall ? 4 : 8,
+          menuGutter: 2,
           controlHeight: size.isSmall ? 28 : 38
         },
         colors: {

rsconcept/frontend/src/dialogs/DlgCreateCst/FormCreateCst.tsx

@@ -53,7 +53,7 @@ function FormCreateCst({ schema, state, partialUpdate, setValidated }: FormCreat
         <SelectSingle
           id='dlg_cst_type'
           placeholder='Выберите тип'
-          className='w-[15rem]'
+          className='w-[16rem]'
           options={SelectorCstType}
           value={{ value: state.cst_type, label: labelCstType(state.cst_type) }}
           onChange={data => handleTypeChange(data?.value ?? CstType.BASE)}

rsconcept/frontend/src/dialogs/DlgDeleteOperation.tsx

@@ -43,15 +43,7 @@ function DlgDeleteOperation({ hideWindow, target, onSubmit }: DlgDeleteOperation
         />
       </Overlay>
 
-      <TextInput
-        disabled
-        dense
-        noBorder
-        id='operation_alias'
-        label='Операция'
-        className='w-full'
-        value={target.alias}
-      />
+      <TextInput disabled dense noBorder id='operation_alias' label='Операция' value={target.alias} />
       <Checkbox
         label='Сохранить наследованные конституенты'
         titleHtml='Наследованные конституенты <br/>превратятся в дописанные'

rsconcept/frontend/src/dialogs/DlgEditWordForms/DlgEditWordForms.tsx

@@ -201,9 +201,7 @@ function DlgEditWordForms({ hideWindow, target, onSave }: DlgEditWordFormsProps)
             onClick={handleGenerateLexeme}
           />
         </div>
-        <div
-          className={clsx('mt-3 mb-2', 'w-full flex justify-center items-center', 'text-sm text-center font-semibold')}
-        >
+        <div className={clsx('mt-3 mb-2 mx-auto', 'flex items-center', 'text-sm text-center font-semibold')}>
           <div>Заданные вручную словоформы [{forms.length}]</div>
           <MiniButton
             noHover

rsconcept/frontend/src/dialogs/DlgInlineSynthesis/TabSchema.tsx

@@ -37,8 +37,8 @@ function TabSchema({ selected, receiver, setSelected }: TabSchemaProps) {
           id='dlg_selected_schema_title'
           disabled
           noBorder
-          className='w-full'
-          placeholder='Выберите из списка ниже'
+          className='flex-grow'
+          placeholder='Схема не выбрана'
           value={selectedInfo?.title ?? ''}
           dense
         />

rsconcept/frontend/src/dialogs/DlgRenameCst.tsx

@@ -52,7 +52,7 @@ function DlgRenameCst({ hideWindow, initial, allowChangeType, onRename }: DlgRen
       <SelectSingle
         id='dlg_cst_type'
         placeholder='Выберите тип'
-        className='min-w-[16rem] self-center'
+        className='min-w-[16rem]'
         isDisabled={!allowChangeType}
         options={SelectorCstType}
         value={{

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

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

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

@@ -28,12 +28,10 @@ function HelpRSLang() {
       <p>2. <a className='underline' href={external_urls.ponomarev}>Текст: Учебник И. Н. Пономарева</a></p>
       <p>3. <a className='underline' href={external_urls.full_course}>Видео: лекции для 4 курса (второй семестр 2022-23 год)</a></p>
     </div>
-    <div className='justify-center w-full'>
     <EmbedYoutube
       videoID={youtube.intro}
       pxHeight={videoHeight}
     />
-    </div>
     <div className='dense'>
       <Subtopics headTopic={HelpTopic.RSLANG} />
     </div>

rsconcept/frontend/src/pages/ManualsPage/items/ui/HelpOssGraph.tsx

@@ -26,7 +26,7 @@ function HelpOssGraph() {
     <div className='flex flex-col'>
       <h1 className='sm:pr-[6rem]'>Граф синтеза</h1>
       <div className='flex flex-col sm:flex-row'>
-        <div className='w-full sm:w-[14rem]'>
+        <div className='sm:w-[14rem]'>
           <h1>Настройка графа</h1>
           <li>
             <IconFitImage className='inline-icon' /> Вписать в экран
@@ -50,7 +50,7 @@ function HelpOssGraph() {
 
         <Divider vertical margins='mx-3 mt-3' className='hidden sm:block' />
 
-        <div className='w-full sm:w-[21rem]'>
+        <div className='sm:w-[21rem]'>
           <h1>Изменение узлов</h1>
           <li>Клик на операцию – выделение</li>
           <li>Esc – сбросить выделение</li>
@@ -72,7 +72,7 @@ function HelpOssGraph() {
       <Divider margins='my-3' className='hidden sm:block' />
 
       <div className='flex flex-col-reverse mb-3 sm:flex-row'>
-        <div className='w-full sm:w-[14rem]'>
+        <div className='sm:w-[14rem]'>
           <h1>Общие</h1>
           <li>
             <IconReset className='inline-icon' /> Сбросить изменения

rsconcept/frontend/src/pages/ManualsPage/items/ui/HelpRSGraphTerm.tsx

@@ -28,7 +28,7 @@ function HelpRSGraphTerm() {
     <div className='flex flex-col'>
       <h1>Граф термов</h1>
       <div className='flex flex-col sm:flex-row'>
-        <div className='w-full sm:w-[14rem]'>
+        <div className='sm:w-[14rem]'>
           <h1>Настройка графа</h1>
           <li>Цвет – покраска узлов</li>
           <li>Граф – расположение</li>
@@ -46,7 +46,7 @@ function HelpRSGraphTerm() {
 
         <Divider vertical margins='mx-3 mt-3' className='hidden sm:block' />
 
-        <div className='w-full sm:w-[21rem]'>
+        <div className='sm:w-[21rem]'>
           <h1>Изменение узлов</h1>
           <li>Клик на конституенту – выделение</li>
           <li>
@@ -70,7 +70,7 @@ function HelpRSGraphTerm() {
       <Divider margins='my-3' className='hidden sm:block' />
 
       <div className='flex flex-col-reverse mb-3 sm:flex-row'>
-        <div className='w-full sm:w-[14rem]'>
+        <div className='sm:w-[14rem]'>
           <h1>Общие</h1>
           <li>
             <IconOSS className='inline-icon' /> переход к связанной <LinkTopic text='ОСС' topic={HelpTopic.CC_OSS} />

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

@@ -95,7 +95,7 @@ function FormOSS({ id, isModified, setIsModified }: FormOSSProps) {
         disabled={!controller.isMutable}
         onChange={event => setTitle(event.target.value)}
       />
-      <div className='flex justify-between w-full gap-3 mb-3'>
+      <div className='flex justify-between gap-3 mb-3'>
         <TextInput
           id='schema_alias'
           required

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

@@ -139,11 +139,7 @@ function FormConstituenta({
           onRename={onRename}
         />
       ) : null}
-      <form
-        id={id}
-        className={clsx('cc-column', 'mt-1 w-full md:w-[48.8rem] shrink-0', 'px-6 py-1')}
-        onSubmit={handleSubmit}
-      >
+      <form id={id} className={clsx('cc-column', 'mt-1 md:w-[48.8rem] shrink-0', 'px-6 py-1')} onSubmit={handleSubmit}>
         <RefsInput
           key='cst_term'
           id='cst_term'

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

@@ -166,9 +166,9 @@ function EditorRSExpression({
       />
 
       <Overlay
-        position='top-[-0.5rem]'
+        position='top-[-0.5rem] right-1/2 translate-x-1/2'
         layer='z-pop'
-        className='pl-[8.5rem] xs:pl-[2rem] flex justify-center w-full gap-1'
+        className='w-fit pl-[8.5rem] xs:pl-[2rem] flex gap-1'
       >
         <StatusBar
           processing={parser.processing}

rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/ToolbarRSExpression.tsx

@@ -15,7 +15,7 @@ function ToolbarRSExpression({ disabled, showControls, toggleControls, showAST }
   const model = useRSForm();
 
   return (
-    <Overlay position='top-[-0.5rem] right-0' layer='z-sticky' className='cc-icons'>
+    <Overlay position='top-[-0.5rem] right-0' layer='z-pop' className='cc-icons'>
       {!disabled || model.processing ? (
         <MiniButton
           title='Отображение специальной клавиатуры'

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

@@ -95,7 +95,7 @@ function FormRSForm({ id, isModified, setIsModified }: FormRSFormProps) {
         disabled={!controller.isContentEditable}
         onChange={event => setTitle(event.target.value)}
       />
-      <div className='flex justify-between w-full gap-3 mb-3'>
+      <div className='flex justify-between gap-3 mb-3'>
         <TextInput
           id='schema_alias'
           required

rsconcept/frontend/src/styling/overrides.css

@@ -35,6 +35,7 @@
 
 .cm-editor .cm-placeholder {
   color: var(--cl-fg-60);
+  @apply font-main;
   .dark & {
     color: var(--cd-fg-60);
   }
@@ -72,7 +73,8 @@
   }
 }
 
-:is(.react-flow__node-input, .react-flow__node-synthesis) {
+.react-flow__node-input,
+.react-flow__node-synthesis {
   cursor: pointer;
 
   border: 1px solid;

rsconcept/frontend/src/utils/codemirror.ts

@@ -229,7 +229,7 @@ export function domTooltipConstituenta(cst?: IConstituenta, canClick?: boolean):
 
     if (canClick) {
       const clickTip = document.createElement('p');
-      clickTip.className = 'w-full text-center text-xs mt-2';
+      clickTip.className = 'text-center text-xs mt-1';
       clickTip.innerText = 'Ctrl + клик для перехода';
       dom.appendChild(clickTip);
     }
@@ -288,7 +288,7 @@ export function domTooltipEntityReference(
 
   if (canClick) {
     const clickTip = document.createElement('p');
-    clickTip.className = 'w-full text-center text-xs mt-2';
+    clickTip.className = 'text-center text-xs mt-1';
     clickTip.innerHTML = 'Ctrl + клик для перехода</br>Ctrl + пробел для редактирования';
     dom.appendChild(clickTip);
   }
@@ -333,7 +333,7 @@ export function domTooltipSyntacticReference(
 
   if (canClick) {
     const clickTip = document.createElement('p');
-    clickTip.className = 'w-full text-center text-xs mt-2';
+    clickTip.className = 'text-center text-xs mt-1';
     clickTip.innerHTML = 'Ctrl + пробел для редактирования';
     dom.appendChild(clickTip);
   }