From 3d2e90923733a46e8a032f814e1a8da14b2cf251 Mon Sep 17 00:00:00 2001
From: Manuel <manuel.ruwe@bluewin.ch>
Date: Sat, 29 Jul 2023 21:33:44 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8=20Improve=20mobile=20reponsiveness?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/Logo.tsx                    | 4 +++-
 src/components/layout/admin/main-admin.layout.tsx | 4 ++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/layout/Logo.tsx b/src/components/layout/Logo.tsx
index 9cc76fb7e..21a4833d9 100644
--- a/src/components/layout/Logo.tsx
+++ b/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"
diff --git a/src/components/layout/admin/main-admin.layout.tsx b/src/components/layout/admin/main-admin.layout.tsx
index ded91e20d..5c1ebe4aa 100644
--- a/src/components/layout/admin/main-admin.layout.tsx
+++ b/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>