apps/web: ui beautify

apps/web/components/Form.tsx

@@ -39,7 +39,7 @@ export function Form({ data, metaData, title }: Props) {
         })}
       </div>
       <Divider />
-      <div className="grid grid-cols-1 gap-2 lg:grid-cols-3">
+      <div className="grid grid-cols-1 gap-2 md:grid-cols-3">
         <Button>Сохранить</Button>
         <Button>Возврат на доработку</Button>
         <Button color="danger">Отмена</Button>

packages/ui/background.tsx

@@ -2,7 +2,7 @@ import type { PropsWithChildren } from 'react';
 
 export function Background({ children }: PropsWithChildren) {
   return (
-    <div className="grid w-full gap-2 rounded-sm border border-slate-100 bg-white p-5 md:w-auto">
+    <div className="grid w-full gap-2 rounded-sm border border-slate-100 bg-white p-5 lg:w-[1104px] ">
       {children}
     </div>
   );

packages/ui/content.tsx

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

packages/ui/header.tsx

@@ -6,16 +6,8 @@ type Props = {
 
 export function Header({ children }: Props) {
   return (
-    <header
-      className={[
-        'sticky',
-        'flex justify-center',
-        'h-16',
-        'bg-white',
-        'border-b border-slate-100',
-      ].join(' ')}
-    >
-      <div className={['w-1/2', 'm-0', 'flex items-center justify-between'].join(' ')}>
+    <header className="sticky top-0 flex h-16 w-full justify-center border-b border-slate-100 bg-white bg-opacity-80 backdrop-blur-sm">
+      <div className="m-0 flex w-full items-center justify-between px-5 lg:w-[1104px]">
         {children}
       </div>
     </header>