Fix layout glitches detected in Safari

Author: Renan Borges

src/components/App.tsx

@@ -1,35 +1,35 @@
-import { Col, NextUIProvider, globalCss } from '@nextui-org/react';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
-
+import styled from '@emotion/styled';
 import '@fontsource/rubik';
 import backgroundImage from './bg.jpg';
 
-import theme from '../theme';
 import About from './pages/About';
 import Home from './pages/Home';
 import Header from './organisms/Header';
 import Footer from './organisms/Footer';
 
-const ContentCss = {
-  height: '100%',
+const Content = styled.div({
+  minHeight: '100vh',
   backgroundImage: `url(${backgroundImage})`,
   backgroundSize: 'cover',
+  backgroundColor: '$background',
   backgroundRepeat: 'no-repeat',
-};
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'space-between',
+});
 
 export default () => (
-  <NextUIProvider theme={theme}>
-    <BrowserRouter>
-      <Col css={ContentCss}>
-        <Header />
-        <main>
-          <Routes>
-            <Route path="/" element={<Home />} />
-            <Route path="/about" element={<About />} />
-          </Routes>
-        </main>
-        <Footer />
-      </Col>
-    </BrowserRouter>
-  </NextUIProvider>
+  <BrowserRouter>
+    <Content>
+      <Header />
+      <main>
+        <Routes>
+          <Route path="/" element={<Home />} />
+          <Route path="/about" element={<About />} />
+        </Routes>
+      </main>
+      <Footer />
+    </Content>
+  </BrowserRouter>
 );

src/components/molecules/Banner.tsx

@@ -5,7 +5,6 @@ import {
 import { Link } from 'react-router-dom';
 
 const Wrapper = styled.div`
-  height: calc(100vh - 130px);
   align-items: center;
   justify-content: center;
   display: flex;
@@ -41,16 +40,29 @@ export default () => (
       </Text>
 
       <Row css={{
-        justifyContent: 'center', display: 'flex', paddingTop: 16, gap: 16, '@smMax': { flexWrap: 'wrap' },
+        justifyContent: 'center',
+        display: 'flex',
+        paddingTop: 16,
+        gap: 16,
+        '@smMax': { flexWrap: 'wrap' },
       }}
       >
         <Link to="/about">
-          <Button css={{ padding: '$10' }} color="secondary">
+          <Button
+            color="secondary"
+            css={{
+              padding: '$12',
+              minWidth: 220,
+            }}
+          >
             <Col>
               <Text
                 span
                 css={{
-                  fontSize: 18, fontWeight: '$bold', display: 'block', height: 16,
+                  fontSize: 20,
+                  fontWeight: '$bold',
+                  display: 'block',
+                  height: 16,
                 }}
               >
                 Learn more
@@ -60,7 +72,7 @@ export default () => (
           </Button>
         </Link>
         <Button
-          css={{ padding: '$10' }}
+          css={{ padding: '$12', minWidth: 220 }}
           color="primary"
           onClick={() => {
             window.location.href = 'https://github.com/viniciusfbb/skia4delphi/releases/latest';
@@ -70,7 +82,10 @@ export default () => (
             <Text
               span
               css={{
-                fontSize: 18, fontWeight: '$bold', display: 'block', height: 16,
+                fontSize: 20,
+                fontWeight: '$bold',
+                display: 'block',
+                height: 16,
               }}
             >
               Download

src/components/molecules/Menu.tsx

@@ -9,27 +9,32 @@ const Menu = styled.ul`
   gap: 32px;
 `;
 
-const textGradient = {
+const textCss = {
+  fontSize: '1.2em',
   '&:hover': {
     textGradient: '45deg, $red200 -20%, $red500 50%',
   },
+  '@smMax': {
+    fontSize: '1em',
+    flexWrap: 'wrap',
+  },
 };
 
 export default () => (
   <Menu>
     <li>
       <Link to="/about">
-        <Text weight="bold" css={textGradient}>About</Text>
+        <Text weight="bold" css={textCss}>About</Text>
       </Link>
     </li>
     <li>
-      <a href="https://github.com/viniciusfbb/skia4delphi/releases">
-        <Text weight="bold" css={textGradient}>Download</Text>
+      <a href="https://github.com/skia4delphi/skia4delphi/releases">
+        <Text weight="bold" css={textCss}>Download</Text>
       </a>
     </li>
     <li>
-      <a href="https://github.com/viniciusfbb/skia4delphi">
-        <Text weight="bold" css={textGradient}>Github</Text>
+      <a href="https://github.com/skia4delphi/skia4delphi">
+        <Text weight="bold" css={textCss}>Github</Text>
       </a>
     </li>
   </Menu>

src/components/organisms/Footer.tsx

@@ -33,7 +33,7 @@ export default () => (
               display: 'none',
             },
           }}
-          href="https://github.com/viniciusfbb/skia4delphi"
+          href="https://github.com/skia4delphi/skia4delphi"
         >
           <IoLogoGithub />
         </Link>

src/main.tsx

@@ -1,11 +1,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import { NextUIProvider } from '@nextui-org/react';
 
 import App from './components/App';
+import theme from './theme';
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <NextUIProvider theme={theme}>
+      <App />
+    </NextUIProvider>
   </React.StrictMode>,
   document.getElementById('root'),
 );