� Module styling

src/components/AppShelf/AppShelf.tsx

@@ -5,7 +5,7 @@ import { useConfig } from '../../tools/state';
 import { serviceItem } from '../../tools/types';
 import AppShelfMenu from './AppShelfMenu';
 
-const AppShelf = () => {
+const AppShelf = (props: any) => {
   const { config } = useConfig();
 
   return (

src/components/SearchBar/SearchBar.tsx

@@ -73,6 +73,7 @@ export default function SearchBar(props: any) {
         target={
           <Group direction="row">
             <TextInput
+              width={'100%'}
               variant="filled"
               icon={icon}
               ref={textInput}

src/components/modules/moduleWrapper.tsx

@@ -13,16 +13,7 @@ export default function ModuleWrapper(props: any) {
     return null;
   }
   return (
-    <Card
-      hidden={!isShown}
-      mx="sm"
-      radius="lg"
-      shadow="sm"
-      style={{
-        // Make background color of the card depend on the theme
-        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : 'white',
-      }}
-    >
+    <Card hidden={!isShown} mx="sm" withBorder radius="lg" shadow="sm">
       <module.component />
     </Card>
   );

src/pages/index.tsx

@@ -6,6 +6,7 @@ import fs from 'fs';
 import { useEffect } from 'react';
 import AppShelf from '../components/AppShelf/AppShelf';
 import LoadConfigComponent from '../components/Config/LoadConfig';
+import SearchBar from '../components/SearchBar/SearchBar';
 import { Config } from '../tools/types';
 import { useConfig } from '../tools/state';
 
@@ -53,9 +54,7 @@ export default function HomePage(props: any) {
   }, [initialConfig]);
   return (
     <>
-      <Group align="start" position="apart" noWrap>
-        <AppShelf />
-      </Group>
+      <AppShelf />
       <LoadConfigComponent />
     </>
   );