second commit

src/Karta.tsx

@@ -2,8 +2,20 @@ 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,
@@ -11,9 +23,12 @@ export function Karta() {
                         zoom: 3
                     }}
                     style={{
-                
+                        position: 'absolute',
+                        top: 0,
+                        bottom: 0
                     }}
                     mapStyle={mapstyle}
                 />
+        </div>
     );
 }

src/KartaPage.tsx

@@ -5,39 +5,38 @@ import articleCard from './assets/card.json';
 
 export function KartaPage() {
   return (
+    <Grid >
+      <Grid.Col span={8}>
         <Karta />
-    // <Grid >
+      </Grid.Col>
-    //   <Grid.Col span={8}>
+      <Grid.Col span={4} >
-    //     <Karta />
+        <ScrollArea h={'80vh'} type="auto">
-    //   </Grid.Col>
+          <Flex
-    //   <Grid.Col span={4} >
+            mih={50}
-    //     <ScrollArea h={'80vh'} type="auto">
+            gap="md"
-    //       <Flex
+            justify="flex-start"
-    //         mih={50}
+            align="start"
-    //         gap="md"
+            direction="column"
-    //         justify="flex-start"
+            wrap="wrap"
-    //         align="start"
+            mr={20}
-    //         direction="column"
+          >
-    //         wrap="wrap"
+            <Autocomplete
-    //         mr={20}
+              w={'100%'}
-    //       >
+              placeholder="Поиск"
-    //         <Autocomplete
+              limit={2}
-    //           w={'100%'}
+              data={['Паустовский', 'Бианки', 'Пришвин', 'Брюсов', 'Островский']}
-    //           placeholder="Поиск"
+            />
-    //           limit={2}
+            <ArticleCardVertical {...articleCard} />
-    //           data={['Паустовский', 'Бианки', 'Пришвин', 'Брюсов', 'Островский']}
+            <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} />
+            <ArticleCardVertical {...articleCard} />
-    //         <Skeleton mb={10} animate={false} height={100} />
+            <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} />
+          </Flex>
-    //         <Skeleton mb={10} animate={false} height={100} />
+        </ScrollArea>
-    //         <Skeleton mb={10} animate={false} height={100} />
+      </Grid.Col>
-    //       </Flex>
+    </Grid>
-    //     </ScrollArea>
-    //   </Grid.Col>
-    // </Grid>
   );
 }