fix(renderer): Improve appearance in small windows

Make sure we do not overflow the viewport with the location bar or the
error page.

Signed-off-by: Kristóf Marussy <kristof@marussy.com>

6 files changed, 19 insertions, 16 deletions

diff --git a/packages/renderer/src/components/App.tsx b/packages/renderer/src/components/App.tsx
index 26e2e01..4a3a5cf 100644
--- a/packages/renderer/src/components/App.tsx
+++ b/packages/renderer/src/components/App.tsx
@@ -95,6 +95,7 @@ function App({ devMode }: { devMode: boolean }): JSX.Element {
         sx={{
           flex: 1,
           display: 'flex',
+          overflow: 'hidden',
           flexDirection: 'column',
           alignItems: 'stretch',
           height: '100%',
diff --git a/packages/renderer/src/components/ThemeProvider.tsx b/packages/renderer/src/components/ThemeProvider.tsx
index 581563b..2ea2186 100644
--- a/packages/renderer/src/components/ThemeProvider.tsx
+++ b/packages/renderer/src/components/ThemeProvider.tsx
@@ -35,9 +35,15 @@ export default observer(
 
     const theme = createTheme({
       direction: writingDirection,
-      palette: {
-        mode: shouldUseDarkColors ? 'dark' : 'light',
-      },
+      palette: shouldUseDarkColors
+        ? {
+            mode: 'dark',
+            divider: 'rgba(255, 255, 255, 0.22)',
+          }
+        : {
+            mode: 'light',
+            divider: 'rgba(0, 0, 0, 0.24)',
+          },
       components: {
         MuiBadge: {
           styleOverrides: {
diff --git a/packages/renderer/src/components/errorPage/ErrorPage.tsx b/packages/renderer/src/components/errorPage/ErrorPage.tsx
index 571059a..99ca020 100644
--- a/packages/renderer/src/components/errorPage/ErrorPage.tsx
+++ b/packages/renderer/src/components/errorPage/ErrorPage.tsx
@@ -152,7 +152,12 @@ function ErrorPage({
         >
           {icon}
         </Typography>
-        <Typography component="h1" variant="h3" mb={2}>
+        <Typography
+          component="h1"
+          variant="h3"
+          fontSize={{ xs: '2rem', md: '3rem' }}
+          mb={2}
+        >
           {title}
         </Typography>
         <Typography mb={4}>{description}</Typography>
diff --git a/packages/renderer/src/components/locationBar/ExtraButtons.tsx b/packages/renderer/src/components/locationBar/ExtraButtons.tsx
index 1755495..ef90199 100644
--- a/packages/renderer/src/components/locationBar/ExtraButtons.tsx
+++ b/packages/renderer/src/components/locationBar/ExtraButtons.tsx
@@ -37,12 +37,7 @@ function ExtraButtons({
   });
 
   return (
-    <Box
-      sx={{
-        display: 'flex',
-        flexDirection: 'row',
-      }}
-    >
+    <Box display="flex">
       <IconButton
         aria-label={t('openInBrowser')}
         disabled={service?.currentUrl === undefined}
diff --git a/packages/renderer/src/components/locationBar/LocationTextField.tsx b/packages/renderer/src/components/locationBar/LocationTextField.tsx
index 5563479..30953de 100644
--- a/packages/renderer/src/components/locationBar/LocationTextField.tsx
+++ b/packages/renderer/src/components/locationBar/LocationTextField.tsx
@@ -37,6 +37,7 @@ const LocationTextFieldRoot = styled(FilledInput, {
   slot: 'Root',
 })(({ theme }) => ({
   padding: '0 12px',
+  flex: '1 0 200px',
   borderRadius: 18,
   '&.Mui-focused': {
     outline: `2px solid ${theme.palette.primary.main}`,
diff --git a/packages/renderer/src/components/locationBar/NavigationButtons.tsx b/packages/renderer/src/components/locationBar/NavigationButtons.tsx
index 219ed90..9c4ebdb 100644
--- a/packages/renderer/src/components/locationBar/NavigationButtons.tsx
+++ b/packages/renderer/src/components/locationBar/NavigationButtons.tsx
@@ -43,12 +43,7 @@ function NavigationButtons({
   const { direction } = useTheme();
 
   return (
-    <Box
-      sx={{
-        display: 'flex',
-        flexDirection: 'row',
-      }}
-    >
+    <Box display="flex">
       <IconButton
         aria-label={t('back')}
         disabled={service === undefined || !service.canGoBack}