💄 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
+    <Grid gutter="xl" align="center">
-      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' },
-      ]}
-    >
       {config.services.map((service) => (
-        <AppShelfItem key={service.name} service={service} />
+        <Grid.Col span={6} xs={4} sm={3} md={2}>
+          <AppShelfItem key={service.name} service={service} />
+        </Grid.Col>
       ))}
-    </SimpleGrid>
+    </Grid>
   );
 };
 
@@ -68,34 +59,35 @@ export function AppShelfItem(props: any) {
             <AppShelfMenu service={service} />
           </motion.div>
         </Card.Section>
-        <Card.Section>
+        <Center>
-          <AspectRatio
+          <Card.Section>
-            ratio={3 / 5}
+            <AspectRatio
-            m="xl"
+              ratio={3 / 5}
-            style={{
+              m="xl"
-              width: 150,
+              style={{
-              height: 90,
+                width: 150,
-            }}
+                height: 90,
-          >
-            <motion.i
-              whileHover={{
-                cursor: 'pointer',
-                scale: 1.1,
               }}
             >
-              <Image
+              <motion.i
-                style={{
+                whileHover={{
-                  maxWidth: 80,
+                  cursor: 'pointer',
+                  scale: 1.1,
                 }}
-                fit="contain"
+              >
-                onClick={() => {
+                <Image
-                  window.open(service.url);
+                  width={80}
-                }}
+                  height={80}
-                src={service.icon}
+                  src={service.icon}
-              />
+                  fit="contain"
-            </motion.i>
+                  onClick={() => {
-          </AspectRatio>
+                    window.open(service.url);
-        </Card.Section>
+                  }}
+                />
+              </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

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

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