absolute

src/App.tsx

@@ -1,6 +1,5 @@
-import { AppShell, Container } from '@mantine/core';
+import { AppShell, Container, ScrollArea } from '@mantine/core';
 import { HeaderSimple } from './Header';
-// import { Karta } from './Karta';
 import { KartaPage } from './KartaPage';
 import { FooterLinks } from './Footer';
 // import { ArticleCardPanel } from './ArticleCardPanel';
@@ -12,18 +11,16 @@ import headerLinks from './assets/header.json';
 function App() {
 
   return (
-    <AppShell
+    <div style={{
-      padding="md"
+      position: 'absolute',
-      header={<HeaderSimple links={headerLinks.links} />}
+      width: '100%',
-      footer={<FooterLinks data={footerLinks.data} />}
+      top: 0
-    >
+    }}>
-        <KartaPage></KartaPage>
+      <HeaderSimple links={headerLinks.links} />
-    </AppShell>
+      <KartaPage></KartaPage>
-    // <div>
+      <FooterLinks data={footerLinks.data} />
-    //   <HeaderSimple links={headerLinks.links} />
+      
-    //   <KartaPage></KartaPage>
+    </div >
-    //   <FooterLinks data={footerLinks.data} />
-    // </div>
   );
 }
 

src/Footer.tsx

@@ -4,7 +4,6 @@ import { createStyles, Text, Container, rem, Title } from '@mantine/core';
 
 const useStyles = createStyles((theme) => ({
     footer: {
-        marginTop: rem(40),
         paddingTop: rem(40),
         paddingBottom: rem(40),
         backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[0],
@@ -138,6 +137,7 @@ export function FooterLinks({ data }: FooterLinksProps) {
                     </Text>
                 </div>
                 <div className={classes.groups}>{groups}</div>
+                
             </Container>
         </footer>
     );

src/Header.tsx

@@ -70,7 +70,7 @@ export function HeaderSimple({ links }: HeaderSimpleProps) {
   ));
 
   return (
-    <Header height={60} mb={120}>
+    <Header height={60}>
       <Container className={classes.header}>
         <Title order={3}>Литкарта</Title>
         {/* <MantineLogo size={28} /> */}

src/Karta.tsx

@@ -1,34 +0,0 @@
-import { createStyles } from '@mantine/core';
-import Map from 'react-map-gl/maplibre';
-import mapstyle from './assets/basemap.json'
-
-const useStyles = createStyles(() => ({
-    root: {
-        // paddingTop: rem(80),
-        // paddingBottom: rem(120),
-        height: '80vh',
-        position: 'relative',
-    },
-}));
-
-export function Karta() {
-    const { classes } = useStyles();
-
-    return (
-        <div className={classes.root}>
-                <Map
-                    initialViewState={{
-                        longitude: 55,
-                        latitude: 60,
-                        zoom: 3
-                    }}
-                    style={{
-                        position: 'absolute',
-                        top: 0,
-                        bottom: 0
-                    }}
-                    mapStyle={mapstyle}
-                />
-        </div>
-    );
-}

src/KartaPage.tsx

@@ -1,42 +1,21 @@
-import { Grid, Skeleton, Flex, ScrollArea, Autocomplete } from '@mantine/core';
+import { Grid, Skeleton, Flex, ScrollArea, Autocomplete, Container } from '@mantine/core';
-import { Karta } from './Karta';
 import { ArticleCardVertical } from './ArticleCard';
 import articleCard from './assets/card.json';
+import Map from 'react-map-gl/maplibre';
+import mapstyle from './assets/basemap.json'
 
 export function KartaPage() {
   return (
-    <Grid >
+    <Map
-      <Grid.Col span={8}>
+      initialViewState={{
-        <Karta />
+        longitude: 55,
-      </Grid.Col>
+        latitude: 60,
-      <Grid.Col span={4} >
+        zoom: 3
-        <ScrollArea h={'80vh'} type="auto">
+      }}
-          <Flex
+      style={{
-            mih={50}
+        height: '90vh'
-            gap="md"
+      }}
-            justify="flex-start"
+      mapStyle={mapstyle}
-            align="start"
+    />
-            direction="column"
-            wrap="wrap"
-            mr={20}
-          >
-            <Autocomplete
-              w={'100%'}
-              placeholder="Поиск"
-              limit={2}
-              data={['Паустовский', 'Бианки', 'Пришвин', 'Брюсов', 'Островский']}
-            />
-            <ArticleCardVertical {...articleCard} />
-            <Skeleton mb={10} animate={false} height={100} />
-            <Skeleton mb={10} animate={false} height={100} />
-            <Skeleton mb={10} animate={false} height={100} />
-            <ArticleCardVertical {...articleCard} />
-            <Skeleton mb={10} animate={false} height={100} />
-            <Skeleton mb={10} animate={false} height={100} />
-            <Skeleton mb={10} animate={false} height={100} />
-          </Flex>
-        </ScrollArea>
-      </Grid.Col>
-    </Grid>
   );
 }