fixed grid

src/components/flow/Cell/index.tsx

@@ -18,10 +18,10 @@ const Cell: FC<IProps> = ({
   is_hero,
 }) => (
   <div
-    className={classNames(styles.cell, { is_hero })}
+    className={classNames(styles.cell, `vert-${height}`, `hor-${width}`)}
     style={{
-      gridRowEnd: `span ${height}`,
+      // gridRowEnd: `span ${height}`,
-      gridColumnEnd: `span ${width}`,
+      // gridColumnEnd: `span ${width}`,
     }}
   >
     { title && <div className={styles.title}>{title}</div> }

src/components/flow/Cell/styles.scss

@@ -32,3 +32,21 @@
   width: 100%;
   box-sizing: border-box;
 }
+
+:global {
+  .vert-1 {
+    grid-row-end: span 1;
+  }
+
+  .vert-2 {
+    grid-row-end: span 2;
+  }
+
+  .hor-1 {
+    grid-column-end: span 1;
+  }
+
+  .hor-2 {
+    grid-column-end: span 2;
+  }
+}

src/components/flow/TestGrid/index.tsx

@@ -23,7 +23,7 @@ export const TestGrid = () => (
     <div className={styles.grid_test}>
       <div
         style={{
-          gridRow: '2 / 4',
+          gridRow: '1 / 3',
           gridColumn: '-2 / -1',
           background: '#090909',
           borderRadius: 4,
@@ -34,8 +34,8 @@ export const TestGrid = () => (
 
       {range(1, 20).map(el => (
         <Cell
-          width={Math.floor(Math.random() * 3)}
+          width={Math.floor(Math.random() * 2 + 1)}
-          height={Math.floor(Math.random() * 3)}
+          height={Math.floor(Math.random() * 2 + 1)}
           title={`Cell ${el}`}
           key={el}
         />

src/containers/dialogs/LoginDialog/index.tsx

@@ -60,7 +60,7 @@ const LoginDialogUnconnected: FC<IProps> = ({
               <div />
               <div />
 
-              <InputText title="Логин" handler={setUserName} value={username} />
+              <InputText title="Логин" handler={setUserName} value={username} autoFocus />
               <InputText title="Пароль" handler={setPassword} value={password} />
             </Group>
           </div>