Improve layout

Author: jackcloudquery

src/components/display/formFooter/testConnectionResult.tsx

@@ -136,7 +136,7 @@ export function FormFooterTestConnectionResult({
     errorLogs && (errorLogs.message || errorLogs.data.message) === 'Logs not available';
 
   return (
-    <Stack spacing={3}>
+    <Stack gap={3}>
       <Card ref={resultCardRef}>
         <CardContent sx={{ paddingY: 4, paddingX: 2, '&:last-child': { paddingBottom: 4 } }}>
           <Stack

src/components/display/testConnectionLogs/index.tsx

@@ -97,13 +97,16 @@ export function TestConnectionLogs({ id, logs }: Props) {
         alignItems="center"
         direction="row"
         justifyContent="space-between"
-        spacing={2}
+        gap={2}
+        flexWrap="wrap"
         width="100%"
       >
-        <Box
-          display="inline-grid"
+        <Stack
+          alignItems="center"
+          direction="row"
+          justifyContent="flex-start"
           gap={0.5}
-          gridTemplateColumns={{ md: 'auto auto auto auto', xs: 'auto auto' }}
+          flexWrap="wrap"
         >
           <MenuItem
             color="secondary"
@@ -149,7 +152,7 @@ export function TestConnectionLogs({ id, logs }: Props) {
           >
             Error
           </MenuItem>
-        </Box>
+        </Stack>
         {filteredLogs.length > 0 && (
           <Button
             color="inherit"

src/components/form/configUIForm.tsx

@@ -260,7 +260,7 @@ export function ConfigUIForm({ prepareSubmitValues, container }: ConfigUIFormPro
                 </Stack>
               </form>
             </Box>
-            <Box sx={{ width: 500, minWidth: 360, position: 'sticky', top: 10 }}>
+            <Box sx={{ width: { xs: 360, lg: 500 }, minWidth: 360, position: 'sticky', top: 10 }}>
               <GuideComponent />
             </Box>
           </Stack>

src/hooks/useGetTestConnectionLogs.ts

@@ -3,7 +3,6 @@ import { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import useTheme from '@mui/material/styles/useTheme';
 
 import { SyncLogLevel } from '../types';
-import { cloudQueryApiBaseUrl } from '../utils';
 import customFetch from '../utils/customFetch';
 import { parseSyncLogsByLevel } from '../utils/logs';