UI: Fix layout

rsconcept/frontend/src/pages/LibraryPage/SearchPanel.tsx

@@ -73,17 +73,14 @@ function SearchPanel({
       className={clsx(
         'sticky top-0', // prettier: split lines
         'w-full h-[2.2rem]',
-        'pr-3 flex items-center',
+        'flex items-center',
         'border-b',
         'text-sm',
         'clr-input'
       )}
     >
-      <div className={clsx('px-2 self-center', 'min-w-[9rem]', 'select-none', 'whitespace-nowrap')}>
+      <div className={clsx('px-3 self-center', 'min-w-[5.5rem]', 'select-none', 'whitespace-nowrap')}>
-        Фильтр
-        <span className='ml-2'>
         {filtered} из {total}
-        </span>
       </div>
 
       <div className='cc-icons'>
@@ -113,9 +110,9 @@ function SearchPanel({
       <div className='flex items-center h-full mx-auto'>
         <SearchBar
           id='library_search'
-          placeholder='Атрибуты'
+          placeholder='Поиск'
           noBorder
-          className='min-w-[8rem]'
+          className='min-w-[7rem] sm:min-w-[10rem]'
           value={query}
           onChange={setQuery}
         />
@@ -137,7 +134,7 @@ function SearchPanel({
             text={head ?? '//'}
           />
 
-          <Dropdown isOpen={headMenu.isOpen} className='z-modalTooltip'>
+          <Dropdown isOpen={headMenu.isOpen} stretchLeft className='z-modalTooltip'>
             <DropdownButton className='w-[10rem]' onClick={() => handleChange(undefined)}>
               <div className='inline-flex items-center gap-3'>
                 <IconFolder size='1rem' className='clr-text-controls' />
@@ -173,7 +170,7 @@ function SearchPanel({
         />
       </div>
 
-      <BadgeHelp topic={HelpTopic.UI_LIBRARY} className='max-w-[30rem] text-sm' offset={5} place='right-start' />
+      <BadgeHelp topic={HelpTopic.UI_LIBRARY} className='max-w-[28rem] text-sm' offset={5} place='right-start' />
     </div>
   );
 }

rsconcept/frontend/src/pages/LoginPage.tsx

@@ -53,7 +53,7 @@ function LoginPage() {
   }
   return (
     <AnimateFade>
-      <form className={clsx('cc-column', 'w-[24rem]', 'pt-12 pb-6 px-6')} onSubmit={handleSubmit}>
+      <form className={clsx('cc-column', 'w-[24rem] mx-auto', 'pt-12 pb-6 px-6')} onSubmit={handleSubmit}>
         <img alt='Концепт Портал' src={resources.logo} className='max-h-[2.5rem] min-w-[2.5rem] mb-3' />
         <TextInput
           id='username'

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

@@ -153,7 +153,7 @@ function ProcessError({ error }: { error: ErrorData }): React.ReactElement {
   if (axios.isAxiosError(error) && error.response) {
     if (error.response.status === 404) {
       return (
-        <div className='p-2 text-center'>
+        <div className='flex flex-col items-center p-2 mx-auto'>
           <p>{`Операционная схема с указанным идентификатором отсутствует`}</p>
           <div className='flex justify-center'>
             <TextURL text='Библиотека' href='/library' />
@@ -162,7 +162,7 @@ function ProcessError({ error }: { error: ErrorData }): React.ReactElement {
       );
     } else if (error.response.status === 403) {
       return (
-        <div className='p-2 text-center'>
+        <div className='flex flex-col items-center p-2 mx-auto'>
           <p>Владелец ограничил доступ к данной схеме</p>
           <TextURL text='Библиотека' href='/library' />
         </div>

rsconcept/frontend/src/pages/PasswordChangePage.tsx

@@ -70,7 +70,7 @@ function PasswordChangePage() {
       isLoading={loading}
       hasNoData={!isTokenValid}
     >
-      <form className={clsx('cc-column', 'w-[24rem]', 'px-6 mt-3')} onSubmit={handleSubmit}>
+      <form className={clsx('cc-column', 'w-[24rem] mx-auto', 'px-6 mt-3')} onSubmit={handleSubmit}>
         <TextInput
           id='new_password'
           type='password'
@@ -113,7 +113,7 @@ export default PasswordChangePage;
 // ====== Internals =========
 function ProcessError({ error }: { error: ErrorData }): React.ReactElement {
   if (axios.isAxiosError(error) && error.response && error.response.status === 404) {
-    return <div className='mt-6 text-sm select-text clr-text-red'>Данная ссылка не действительна</div>;
+    return <div className='mx-auto mt-6 text-sm select-text clr-text-red'>Данная ссылка не действительна</div>;
   } else {
     return <InfoError error={error} />;
   }

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

@@ -290,7 +290,7 @@ function ProcessError({
   if (axios.isAxiosError(error) && error.response) {
     if (error.response.status === 404) {
       return (
-        <div className='p-2 text-center'>
+        <div className='flex flex-col items-center p-2 mx-auto'>
           <p>{`Концептуальная схема с указанным идентификатором ${isArchive ? 'и версией ' : ''}отсутствует`}</p>
           <div className='flex justify-center'>
             <TextURL text='Библиотека' href='/library' />
@@ -301,7 +301,7 @@ function ProcessError({
       );
     } else if (error.response.status === 403) {
       return (
-        <div className='p-2 text-center'>
+        <div className='flex flex-col items-center p-2 mx-auto'>
           <p>Владелец ограничил доступ к данной схеме</p>
           <TextURL text='Библиотека' href='/library' />
         </div>

rsconcept/frontend/src/pages/RegisterPage.tsx

@@ -83,19 +83,24 @@ function RegisterPage() {
   }
   return (
     <AnimateFade>
-      <form className={clsx('cc-column', 'px-6 py-3')} onSubmit={handleSubmit}>
+      <form className={clsx('cc-column', 'mx-auto w-[36rem]', 'px-6 py-3')} onSubmit={handleSubmit}>
-        <h1>Новый пользователь</h1>
+        <h1>
-        <div className='flex gap-12'>
+          <span>Новый пользователь</span>
-          <FlexColumn>
+          <Overlay id={globals.password_tooltip} position='top-[5.4rem] left-[3.5rem]'>
-            <div className='absolute'>
-              <Overlay id={globals.password_tooltip} position='top-[4.8rem] left-[3.4rem] absolute'>
             <IconHelp size='1.25rem' className='icon-primary' />
           </Overlay>
           <Tooltip anchorSelect={`#${globals.password_tooltip}`} offset={6}>
             используйте уникальный пароль для каждого сайта
           </Tooltip>
-            </div>
+          <Overlay id={globals.email_tooltip} position='top-[0.5rem] right-[1.75rem]'>
-
+            <IconHelp size='1.25rem' className='icon-primary' />
+          </Overlay>
+          <Tooltip anchorSelect={`#${globals.email_tooltip}`} offset={6}>
+            электронная почта используется для восстановления пароля
+          </Tooltip>
+        </h1>
+        <div className='flex gap-12'>
+          <FlexColumn>
             <TextInput
               id='username'
               autoComplete='username'
@@ -130,15 +135,6 @@ function RegisterPage() {
           </FlexColumn>
 
           <FlexColumn className='w-[15rem]'>
-            <div className='absolute'>
-              <Overlay id={globals.email_tooltip} position='top-[0rem] right-[-15rem]'>
-                <IconHelp size='1.25rem' className='icon-primary' />
-              </Overlay>
-              <Tooltip anchorSelect={`#${globals.email_tooltip}`} offset={6}>
-                электронная почта используется для восстановления пароля
-              </Tooltip>
-            </div>
-
             <TextInput
               id='email'
               autoComplete='email'
@@ -192,11 +188,16 @@ function ProcessError({ error }: { error: ErrorData }): React.ReactElement {
     if ('email' in error.response.data) {
       return (
         // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-        <div className='w-full text-sm text-center select-text clr-text-red'>{error.response.data.email}.</div>
+        <div className='mx-auto text-sm select-text clr-text-red'>{error.response.data.email}.</div>
+      );
+    } else if ('username' in error.response.data) {
+      return (
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        <div className='mx-auto text-sm select-text clr-text-red'>{error.response.data.username}.</div>
       );
     } else {
       return (
-        <div className='text-sm select-text clr-text-red'>
+        <div className='mx-auto text-sm select-text clr-text-red'>
           <PrettyJson data={error.response} />
         </div>
       );

rsconcept/frontend/src/pages/RestorePasswordPage.tsx

@@ -35,9 +35,11 @@ function RestorePasswordPage() {
   return (
     <AnimateFade>
       {!isCompleted ? (
-        <form className={clsx('cc-column', 'w-[24rem]', 'px-6 mt-3')} onSubmit={handleSubmit}>
+        <form className={clsx('cc-column', 'w-[24rem] mx-auto', 'px-6 mt-3')} onSubmit={handleSubmit}>
           <TextInput
             id='email'
+            autoComplete='email'
+            required
             allowEnter
             label='Электронная почта'
             value={email}
@@ -69,7 +71,9 @@ export default RestorePasswordPage;
 // ====== Internals =========
 function ProcessError({ error }: { error: ErrorData }): React.ReactElement {
   if (axios.isAxiosError(error) && error.response && error.response.status === 400) {
-    return <div className='mt-6 text-sm select-text clr-text-red'>Данный email не используется на Портале.</div>;
+    return (
+      <div className='mx-auto mt-6 text-sm select-text clr-text-red'>Данный email не используется на Портале.</div>
+    );
   } else {
     return <InfoError error={error} />;
   }

rsconcept/frontend/src/pages/UserProfilePage/UserTabs.tsx

@@ -34,8 +34,8 @@ function UserTabs() {
       error={error}
       hasNoData={!user}
     >
-      <AnimateFade className='flex gap-6 py-2'>
+      <AnimateFade className='flex gap-6 py-2 mx-auto w-fit'>
-        <div>
+        <div className='w-fit'>
           <Overlay position='top-0 right-0'>
             <MiniButton
               title='Отслеживаемые схемы'