💄 Styling and responsiveness

Co-authored-by: Walkx <walkxnl@gmail.com>

src/components/AppShelf/AppShelf.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { motion } from 'framer-motion';
-import { Text, AspectRatio, SimpleGrid, Card, Image, useMantineTheme } from '@mantine/core';
+import { Text, AspectRatio, Card, Image, useMantineTheme, Center, Grid } from '@mantine/core';
 import { useConfig } from '../../tools/state';
 import { serviceItem } from '../../tools/types';
 import AppShelfMenu from './AppShelfMenu';
@@ -9,22 +9,13 @@ const AppShelf = () => {
   const { config } = useConfig();
 
   return (
-    <SimpleGrid
-      cols={7}
-      spacing="xl"
-      breakpoints={[
-        { maxWidth: 2400, cols: 6, spacing: 'xl' },
-        { maxWidth: 1800, cols: 5, spacing: 'xl' },
-        { maxWidth: 1500, cols: 4, spacing: 'lg' },
-        { maxWidth: 800, cols: 3, spacing: 'md' },
-        { maxWidth: 400, cols: 3, spacing: 'sm' },
-        { maxWidth: 400, cols: 2, spacing: 'sm' },
-      ]}
-    >
+    <Grid gutter="xl" align="center">
       {config.services.map((service) => (
+        <Grid.Col span={6} xs={4} sm={3} md={2}>
           <AppShelfItem key={service.name} service={service} />
+        </Grid.Col>
       ))}
-    </SimpleGrid>
+    </Grid>
   );
 };
 
@@ -68,6 +59,7 @@ export function AppShelfItem(props: any) {
             <AppShelfMenu service={service} />
           </motion.div>
         </Card.Section>
+        <Center>
           <Card.Section>
             <AspectRatio
               ratio={3 / 5}
@@ -84,18 +76,18 @@ export function AppShelfItem(props: any) {
                 }}
               >
                 <Image
-                style={{
-                  maxWidth: 80,
-                }}
+                  width={80}
+                  height={80}
+                  src={service.icon}
                   fit="contain"
                   onClick={() => {
                     window.open(service.url);
                   }}
-                src={service.icon}
                 />
               </motion.i>
             </AspectRatio>
           </Card.Section>
+        </Center>
       </Card>
     </motion.div>
   );

src/components/SearchBar/SearchBar.tsx

@@ -22,7 +22,7 @@ export default function SearchBar(props: any) {
 
   return (
     <Box
-      mb={"xl"}
+      mb="xl"
       style={{
         width: '100%',
       }}
@@ -81,7 +81,8 @@ export default function SearchBar(props: any) {
           }
         >
           <Text>
-            tip: Use the prefixes <b>!yt</b> and <b>!t</b> in front of your query to search on YouTube or for a Torrent respectively.
+            tip: Use the prefixes <b>!yt</b> and <b>!t</b> in front of your query to search on
+            YouTube or for a Torrent respectively.
           </Text>
         </Popover>
       </form>

src/components/layout/Footer.tsx

@@ -55,23 +55,11 @@ export function Footer({ links }: FooterCenteredProps) {
   ));
 
   return ( 
-    <FooterComponent height="auto" style={{ border: 'none' }}>
-      <Group
-        sx={{
-          position: 'fixed',
-          bottom: 0,
-          right: 15,
-        }}
-        direction="row"
-        align="center"
-        mb={15}
-      >
-        <Group className={classes.links}>{items}</Group>
-        <Group spacing="xs" position="right" noWrap>
+    <FooterComponent p={5} height="auto" style={{ border: 'none', position: 'fixed', bottom: 0, right: 0 }}>
+      <Group position="right" mr="xs" mb="xs">
         <ActionIcon<'a'> component="a" href="https://github.com/ajnart/homarr" size="lg">
           <BrandGithub size={18} />
         </ActionIcon>
-        </Group>
         <Text
           style={{
             fontSize: '0.90rem',

src/components/layout/Layout.tsx

@@ -6,9 +6,6 @@ import Navbar from './Navbar';
 
 const useStyles = createStyles((theme) => ({
   main: {
-    [theme.fn.largerThan('md')]: {
-      maxWidth: 1500,
-    },
   },
 }));
 
@@ -21,7 +18,6 @@ export default function Layout({ children, style }: any) {
       header={<Header links={[]} />}
       footer={<Footer links={[]} />}
     >
-      <Center>
         <main
           className={cx(classes.main)}
           style={{
@@ -30,7 +26,6 @@ export default function Layout({ children, style }: any) {
         >
           {children}
         </main>
-      </Center>
     </AppShell>
   );
 }

src/components/layout/Navbar.tsx

@@ -14,7 +14,7 @@ export default function Navbar() {
         base: 'auto',
       }}
     >
-      <Group mt="sm" direction="column">
+      <Group mt="sm" direction="column" align="center">
         <ModuleWrapper module={DateModule} />
       </Group>
     </MantineNavbar>

src/pages/index.tsx

@@ -54,7 +54,7 @@ export default function HomePage(props: any) {
   }, [initialConfig]);
   return (
     <> 
-      <SearchBar />
+      <SearchBar style={{ width: '100%'}} />
       <Group align="start" position="apart" noWrap>
         <AppShelf />
       </Group>