Refactored layout components and styling: removed unused imports, adjusted positioning and padding for consistency.

packages/client/src/components/landing-component/LandingComponent.tsx

@@ -27,7 +27,7 @@ export const LandingComponent: React.FC = () => {
   }, []);
 
   return (
-    <Box as="section" bg="background.primary" overflow="hidden" position="relative">
+    <Box as="section" bg="background.primary" overflow="hidden">
       <Box position="fixed" right={0} maxWidth="300px" minWidth="200px" zIndex={1000}>
         <Tweakbox
           sliders={{

packages/client/src/components/landing-component/Map.tsx

@@ -37,7 +37,7 @@ const key =
 function Map(props: { visible: boolean }) {
   return (
     /* Full-screen wrapper — fills the viewport and becomes the positioning context */
-    <Box w="100%" h="100vh" position="relative" overflow="hidden">
+    <Box position={'absolute'} top={0} w="100vw" h={'100vh'} overflow="hidden">
       {/* Button bar — absolutely positioned inside the wrapper */}
 
       <MapNext mapboxPublicKey={atob(key)} />

packages/client/src/components/landing-component/MapNext.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, HStack, Input } from '@chakra-ui/react';
+import { Box } from '@chakra-ui/react';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import Map, {
   FullscreenControl,
@@ -118,11 +118,10 @@ Type '{ city: string; population: string; image: string; state: string; latitude
           right: 0,
         }}
       >
-        <GeolocateControl position="top-left" />
+        <GeolocateControl position="top-left" style={{ marginTop: '6rem' }} />
         <FullscreenControl position="top-left" />
         <NavigationControl position="top-left" />
         <ScaleControl position="top-left" />
-
         {pins}
 
         {popupInfo && (

packages/client/src/layout/Content.tsx

@@ -6,7 +6,7 @@ import { useIsMobile } from '../components/contexts/MobileContext';
 function Content({ children }) {
   const isMobile = useIsMobile();
   return (
-    <Flex flexDirection="column" w="100%" h="100vh" p={!isMobile ? 4 : 1}>
+    <Flex flexDirection="column" w="100%" h="100vh">
       {children}
     </Flex>
   );

packages/client/src/pages/index/+Page.tsx

@@ -1,4 +1,4 @@
-import { Box, Grid, GridItem, Stack } from '@chakra-ui/react';
+import { Box } from '@chakra-ui/react';
 import React, { useEffect } from 'react';
 
 import Chat from '../../components/chat/Chat.tsx';
@@ -22,26 +22,26 @@ export default function IndexPage() {
   const component = useComponent();
 
   return (
-    <Grid templateColumns="1" height="100%" width="100%" gap={0}>
-      <GridItem>
-        <LandingComponent />
+    <Box height="100%" width="100%">
+      <LandingComponent />
 
-        <Box
-          display={component.enabledComponent === 'ai' ? undefined : 'none'}
-          width="100%"
-          height="100%"
-          overflowY="scroll"
-        >
-          <Chat />
-        </Box>
-        <Box
-          display={component.enabledComponent === 'gpsmap' ? undefined : 'none'}
-          width="100%"
-          height="100%"
-        >
-          <ReactMap visible={component.enabledComponent === 'gpsmap'} />
-        </Box>
-      </GridItem>
-    </Grid>
+      <Box
+        display={component.enabledComponent === 'ai' ? undefined : 'none'}
+        width="100%"
+        height="100%"
+        overflowY="scroll"
+        padding={'unset'}
+      >
+        <Chat />
+      </Box>
+      <Box
+        display={component.enabledComponent === 'gpsmap' ? undefined : 'none'}
+        width="100%"
+        height="100%"
+        padding={'unset'}
+      >
+        <ReactMap visible={component.enabledComponent === 'gpsmap'} />
+      </Box>
+    </Box>
   );
 }