fixed mobile appearance of dialogs

src/components/dialogs/BetterScrollDialog/styles.module.scss

@@ -11,7 +11,7 @@
   box-sizing: border-box;
 
   @include tablet {
-    padding: 70px 5px 5px 5px;
+    padding: 20px 0 0 0;
   }
 }
 

src/components/editors/EditorButtons/index.tsx

@@ -6,10 +6,12 @@ import { Padder } from '~/components/containers/Padder';
 import { EditorActionsPanel } from '~/components/editors/EditorActionsPanel';
 import { Button } from '~/components/input/Button';
 import { InputText } from '~/components/input/InputText';
+import { useWindowSize } from '~/hooks/dom/useWindowSize';
 import { useNodeFormContext } from '~/hooks/node/useNodeFormFormik';
 
 const EditorButtons: FC = () => {
   const { values, handleChange, isSubmitting } = useNodeFormContext();
+  const { isMobile } = useWindowSize();
 
   return (
     <Padder style={{ position: 'relative' }}>
@@ -28,7 +30,7 @@ const EditorButtons: FC = () => {
         </Filler>
 
         <Button
-          title="Сохранить"
+          title={isMobile ? undefined : 'Сохранить'}
           iconRight="check"
           color={values.is_promoted ? 'primary' : 'lab'}
           disabled={isSubmitting}

src/components/editors/ImageGrid/index.tsx

@@ -12,7 +12,7 @@ interface IProps {
 }
 
 const ImageGrid: FC<IProps> = ({ files, setFiles, locked }) => {
-  const { innerWidth } = useWindowSize();
+  const { isMobile } = useWindowSize();
 
   const onMove = useCallback(
     (newFiles: IFile[]) => {
@@ -34,7 +34,7 @@ const ImageGrid: FC<IProps> = ({ files, setFiles, locked }) => {
       onSortEnd={onMove}
       items={files}
       locked={locked}
-      size={innerWidth > 768 ? 220 : (innerWidth - 60) / 2}
+      size={!isMobile ? 220 : (innerWidth - 60) / 2}
     />
   );
 };

src/components/flow/FlowCell/index.tsx

@@ -39,7 +39,7 @@ const FlowCell: FC<Props> = ({
   canEdit = false,
   onChangeCellView,
 }) => {
-  const { innerWidth } = useWindowSize();
+  const { isMobile } = useWindowSize();
 
   const withText =
     ((!!flow.display && flow.display !== 'single') || !image) && flow.show_description && !!text;
@@ -54,11 +54,11 @@ const FlowCell: FC<Props> = ({
   const { isActive: isMenuActive, activate, ref, deactivate } = useClickOutsideFocus();
 
   const shadeSize = useMemo(() => {
-    const min = innerWidth < 768 ? 10 : 15;
-    const max = innerWidth < 768 ? 20 : 50;
+    const min = isMobile ? 10 : 15;
+    const max = isMobile ? 20 : 50;
 
     return withText ? min : max;
-  }, [withText, innerWidth]);
+  }, [withText, isMobile]);
 
   return (
     <div className={classNames(styles.cell, styles[flow.display || 'single'])} ref={ref as any}>

src/components/flow/FlowSwiperHero/index.tsx

@@ -34,13 +34,13 @@ const lazy = {
 };
 
 export const FlowSwiperHero: FC<Props> = ({ heroes }) => {
-  const { innerWidth } = useWindowSize();
+  const { isMobile } = useWindowSize();
   const { push } = useNavigation();
 
   const [controlledSwiper, setControlledSwiper] = useState<SwiperClass | undefined>(undefined);
   const [currentIndex, setCurrentIndex] = useState(heroes.length);
-  const preset = useMemo(() => (innerWidth <= 768 ? ImagePresets.cover : ImagePresets.small_hero), [
-    innerWidth,
+  const preset = useMemo(() => (isMobile ? ImagePresets.cover : ImagePresets.small_hero), [
+    isMobile,
   ]);
 
   const onNext = useCallback(() => {

src/containers/dialogs/PhotoSwipe/index.tsx

@@ -6,6 +6,7 @@ import PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default.js';
 import PhotoSwipeJs from 'photoswipe/dist/photoswipe.js';
 
 import { ImagePresets } from '~/constants/urls';
+import { useWindowSize } from '~/hooks/dom/useWindowSize';
 import { useModal } from '~/hooks/modal/useModal';
 import { IFile } from '~/types';
 import { DialogComponentProps } from '~/types/modal';
@@ -21,6 +22,7 @@ export interface PhotoSwipeProps extends DialogComponentProps {
 const PhotoSwipe: VFC<PhotoSwipeProps> = observer(({ index, items }) => {
   let ref = useRef<HTMLDivElement>(null);
   const { hideModal } = useModal();
+  const { isMobile } = useWindowSize();
 
   useEffect(() => {
     new Promise(async resolve => {
@@ -32,10 +34,7 @@ const PhotoSwipe: VFC<PhotoSwipeProps> = observer(({ index, items }) => {
 
               img.onload = () => {
                 resolveImage({
-                  src: getURL(
-                    image,
-                    window.innerWidth < 768 ? ImagePresets[900] : ImagePresets[1600]
-                  ),
+                  src: getURL(image, isMobile ? ImagePresets[900] : ImagePresets[1600]),
                   h: img.naturalHeight,
                   w: img.naturalWidth,
                 });
@@ -62,7 +61,7 @@ const PhotoSwipe: VFC<PhotoSwipeProps> = observer(({ index, items }) => {
       ps.listen('destroy', hideModal);
       ps.listen('close', hideModal);
     });
-  }, [hideModal, items, index]);
+  }, [hideModal, items, index, isMobile]);
 
   return (
     <div className="pswp" tabIndex={-1} role="dialog" aria-hidden="true" ref={ref}>

src/hooks/dom/useWindowSize.ts

@@ -1,10 +1,15 @@
 import { useCallback, useEffect, useState } from 'react';
 
 export const useWindowSize = () => {
-  const [size, setSize] = useState({ innerWidth: 0, innerHeight: 0 });
+  const [size, setSize] = useState({ innerWidth: 0, innerHeight: 0, isMobile: false });
 
   const onResize = useCallback(
-    () => setSize({ innerWidth: window.innerWidth, innerHeight: window.innerHeight }),
+    () =>
+      setSize({
+        innerWidth: window.innerWidth,
+        innerHeight: window.innerHeight,
+        isMobile: window.innerWidth < 768,
+      }),
     []
   );