🚸 Improve mobile reponsiveness

src/components/layout/Logo.tsx

@@ -1,4 +1,5 @@
 import { Group, Image, Text } from '@mantine/core';
+import { useScreenLargerThan } from '~/hooks/useScreenLargerThan';
 
 import { useConfigContext } from '../../config/provider';
 import { usePrimaryGradient } from './useGradient';
@@ -11,6 +12,7 @@ interface LogoProps {
 export function Logo({ size = 'md', withoutText = false }: LogoProps) {
   const { config } = useConfigContext();
   const primaryGradient = usePrimaryGradient();
+  const largerThanMd = useScreenLargerThan('md');
 
   return (
     <Group spacing={size === 'md' ? 'xs' : 4} noWrap>
@@ -20,7 +22,7 @@ export function Logo({ size = 'md', withoutText = false }: LogoProps) {
         alt="Homarr Logo"
         className="dashboard-header-logo-image"
       />
-      {withoutText ? null : (
+      {withoutText || !largerThanMd ? null : (
         <Text
           size={size === 'md' ? 22 : 10}
           weight="bold"

src/components/layout/admin/main-admin.layout.tsx

@@ -57,7 +57,7 @@ export const MainLayout = ({ children }: MainLayoutProps) => {
         },
       }}
       navbar={
-        <Navbar width={{ base: 300 }}>
+        <Navbar width={{ base: 220 }}>
           <Navbar.Section pt="xs" grow>
             <NavLink
               icon={
@@ -131,7 +131,7 @@ export const MainLayout = ({ children }: MainLayoutProps) => {
           <Box bg="red" h={30} p={3} px={6}>
             <Flex h="100%" align="center" columnGap={7}>
               <IconAlertTriangle color="white" size="1rem" />
-              <Text color="white">
+              <Text color="white" lineClamp={1}>
                 This is an experimental feature of Homarr. Please report any issues to the official
                 Homarr team.
               </Text>