100dvh overflow filters mobile

src/components/Family/PersonModal.tsx

@@ -1,5 +1,5 @@
 import {useEffect, useState} from 'react';
-import styled from 'styled-components';
+import styled, {css} from 'styled-components';
 import type {Gender, User} from '../../types/user';
 import {Tag, TagsInput, TagsWrap} from './TagsInput';
 
@@ -117,10 +117,14 @@ export function PersonModal({
             {showExpanded ? (
                 <Content onClick={event => event.stopPropagation()}>
                     <Header>
-                        <h2>{showExpanded == 'favorite' ? 'Любимые' : 'Исключить'}</h2>
-                        <CloseButton type="button" onClick={() => setShowExpanded('')}>
-                            ×
-                        </CloseButton>
+                        <h2>
+                            <MobileBack onClick={() => setShowExpanded('')}>
+                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <path d="M20 12L5 12M10.9231 6L5 12L10.9231 18" stroke="#0c3b2e" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+                                </svg>
+                            </MobileBack>
+                            {showExpanded == 'favorite' ? 'Любимые' : 'Исключить'}
+                        </h2>
                     </Header>
                     <FormGroup>
                         <TagsWrap>
@@ -283,6 +287,10 @@ const Header = styled.div`
         font-size: 20px;
         font-weight: 600;
         color: ${({theme}) => theme.colors.darkGreen};
+        display: flex;
+        flex-direction: row;
+        gap: 16px;
+        align-items: center;
     }
 `;
 
@@ -402,3 +410,16 @@ const SaveButton = styled.button`
         background: #5b8f29;
     }
 `;
+
+const MobileBack = styled.div`
+    display: none;
+    top:0;
+    left:0;
+    width: 24px;
+    height: 24px;
+    justify-content: center;
+    align-items: center;
+    ${({ theme }) => theme.media.mobile(css`
+        display: flex;
+    `)}
+`

src/components/Family/TagsInput.tsx

@@ -28,7 +28,7 @@ export function TagsInput({
                     type="button"
                     onClick={onExpand}
                 >
-                    Выбрать
+                    {value.length > 0 ? 'Заменить' : 'Выбрать'}
                 </Button>
             </AddWrapper>
         </Row>