apps/web: fix layout

apps/web/app/layout.tsx

@@ -52,10 +52,10 @@ export default function RootLayout({ children }: { readonly children: React.Reac
           <Logo />
           <Auth />
         </Header>
-        <div className="flex flex-col items-center ">
+        <Content>
           <Controls />
-          <Content>{children}</Content>
-        </div>
+          {children}
+        </Content>
       </body>
     </html>
   );

apps/web/components/Conditions.tsx

@@ -8,7 +8,7 @@ export function Conditions({ html }: Props) {
   return (
     <Background
       dangerouslySetInnerHTML={{ __html: html }}
-      className="lg:w-standard grid w-full justify-center p-5 font-[calibri]"
+      className="grid w-full justify-center p-5 font-[calibri]"
     />
   );
 }

apps/web/components/Form/Elements.tsx

@@ -15,49 +15,65 @@ function compatMetadata(metaData: Props['metaData']) {
   return metaData;
 }
 
+function RenderElement({
+  fieldType,
+  label,
+  max,
+  min = 0,
+  name,
+  visible,
+  ...props
+}: Props['metaData'][number] & { readonly name: string }) {
+  const { setValue, validation, values } = useFormStore();
+
+  if (!visible) return false;
+
+  const Element = mapFieldTypeElement[fieldType];
+
+  return (
+    <ElementContainer
+      intent={validation[name] ? 'danger' : 'default'}
+      message={validation[name]?.message}
+      key={name}
+      id={name}
+      title={label}
+    >
+      <Element
+        loading={!Object.keys(values).length}
+        checked={fieldType === 'CHECKBOX' ? Boolean(values[name]) || false : false}
+        id={name}
+        value={values[name] || ''}
+        min={min}
+        max={max}
+        onChange={(e) => {
+          setValue({
+            name,
+            value: fieldType === 'CHECKBOX' ? e.target.checked : e.target.value,
+          });
+        }}
+        {...props}
+      />
+    </ElementContainer>
+  );
+}
+
 export function Elements({ data, metaData }: Props) {
-  const { init, setValue, validation, values } = useFormStore();
+  const { init } = useFormStore();
 
   useEffect(() => {
     init(data);
   }, [data, init]);
 
+  const { comment, ...meta } = compatMetadata(metaData);
+
   return (
-    <div className="mt-2 grid auto-rows-auto grid-cols-1 gap-2 gap-x-4 md:grid-cols-2 lg:grid-cols-3">
-      {Object.keys(compatMetadata(metaData)).map((name) => {
-        const { fieldType, label, max, min = 0, visible, ...props } = metaData[name];
-
-        if (!visible) return false;
-
-        const Element = mapFieldTypeElement[fieldType];
-
-        return (
-          <ElementContainer
-            classNameParent={fieldType === 'TEXTAREA' ? 'col-[span_3]' : undefined}
-            intent={validation[name] ? 'danger' : 'default'}
-            message={validation[name]?.message}
-            key={name}
-            id={name}
-            title={label}
-          >
-            <Element
-              loading={!Object.keys(values).length}
-              checked={fieldType === 'CHECKBOX' ? Boolean(values[name]) || false : false}
-              id={name}
-              value={values[name] || ''}
-              min={min}
-              max={max}
-              onChange={(e) => {
-                setValue({
-                  name,
-                  value: fieldType === 'CHECKBOX' ? e.target.checked : e.target.value,
-                });
-              }}
-              {...props}
-            />
-          </ElementContainer>
-        );
-      })}
-    </div>
+    <>
+      <div className="mt-2 grid gap-2 gap-x-4 md:grid md:grid-cols-2 lg:grid-cols-3">
+        {Object.keys(meta).map((name) => (
+          <RenderElement key={name} {...metaData[name]} name={name} />
+        ))}
+      </div>
+      <RenderElement {...comment} name="comment" />
+    </>
   );
 }

apps/web/components/Form/Header.tsx

@@ -3,7 +3,7 @@ import { Heading } from 'ui';
 
 export function Header({ link, title }: { readonly link: string; readonly title: string }) {
   return (
-    <div className="flex justify-between">
+    <div className="flex flex-col justify-between md:flex-row">
       <Heading size={2}>{title}</Heading>
       <Link href={link} className="text-primary-600 text-sm font-medium hover:underline" prefetch>
         Посмотреть условия

apps/web/components/Form/Overlay.tsx

@@ -7,7 +7,7 @@ import { Background, LoadingSpinner } from 'ui';
 
 function OverlayWrapper({ children }: PropsWithChildren) {
   return (
-    <Background className="lg:w-standard absolute grid h-full w-full items-center justify-center border-none bg-opacity-80 backdrop-blur-sm">
+    <Background className="absolute grid h-full w-full items-center justify-center border-none bg-opacity-80 backdrop-blur-sm">
       <div className="flex flex-row items-center gap-2">{children} </div>
     </Background>
   );

apps/web/components/Form/index.tsx

@@ -15,7 +15,7 @@ function Content(props: Props) {
   const { pageUrlParams } = useContext(FormContext);
 
   return (
-    <Background className="lg:w-standard relative grid w-full gap-2 p-5">
+    <Background className="flex w-full flex-col gap-2 p-5">
       <Overlay />
       <Header title={title} link={'/ius' + createUrl({ ...pageUrlParams, route: '/conditions' })} />
       <Elements {...props} />

apps/web/components/layout/controls.tsx

@@ -6,7 +6,7 @@ export function Controls() {
   const router = useRouter();
 
   return (
-    <div className="lg:w-standard flex w-full flex-row px-5 pt-5">
+    <div className="flex w-full flex-row px-5 pt-5">
       <button
         className="flex flex-row items-center gap-2 text-sm"
         type="button"

packages/ui/container.tsx

@@ -5,9 +5,7 @@ import { forwardRef, type HTMLAttributes, type PropsWithChildren } from 'react';
 
 export type ContainerProps = HTMLAttributes<HTMLDivElement> & PropsWithChildren;
 
-const parentVariants = cva('flex flex-col justify-center');
-
-const variants = cva('min-h-[36px] flex items-center', {
+const variants = cva('flex min-h-[36px] items-center', {
   defaultVariants: {
     intent: 'default',
   },
@@ -20,28 +18,11 @@ const variants = cva('min-h-[36px] flex items-center', {
 });
 
 export type WrapperProps = HTMLAttributes<HTMLDivElement> &
-  VariantProps<typeof variants> & { readonly classNameParent?: string; readonly message?: string };
+  VariantProps<typeof variants> & { readonly message?: string };
 
 export const ElementContainer = forwardRef<HTMLDivElement, WrapperProps>(
-  (
-    {
-      children,
-      className,
-      classNameParent,
-      id,
-      intent,
-      message = 'Некорректные данные',
-      title,
-      ...props
-    },
-    ref
-  ) => (
-    <div
-      {...props}
-      className={cn(parentVariants({ className: classNameParent }))}
-      ref={ref}
-      {...props}
-    >
+  ({ children, className, id, intent, message = 'Некорректные данные', title, ...props }, ref) => (
+    <div {...props} className="flex flex-col justify-center" ref={ref} {...props}>
       <label
         htmlFor={id}
         className="mb-1 block overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium text-black text-opacity-90"

packages/ui/content.tsx

@@ -1,5 +1,9 @@
 import type { PropsWithChildren } from 'react';
 
 export function Content({ children }: PropsWithChildren) {
-  return <div className="flex w-full justify-center gap-2 py-5">{children}</div>;
+  return (
+    <div className="grid w-full place-items-center">
+      <div className="xl:w-standard grid w-screen gap-5">{children}</div>
+    </div>
+  );
 }

packages/ui/heading.tsx

@@ -6,7 +6,7 @@ import { forwardRef } from 'react';
 
 const variants = cva('font-bold leading-7 text-gray-900 sm:truncate sm:tracking-tight', {
   defaultVariants: {
-    size: 'default',
+    size: 1,
   },
   variants: {
     size: {
@@ -19,7 +19,6 @@ const variants = cva('font-bold leading-7 text-gray-900 sm:truncate sm:tracking-
       7: 'text-6xl sm:text-7xl',
       8: 'text-7xl sm:text-8xl',
       9: 'text-8xl sm:text-9xl',
-      default: 'text-lg',
     },
   },
 });