From 5b55921bb8a361e952d4edba3bbd93bfe8c74946 Mon Sep 17 00:00:00 2001
From: Bram Suurd <78373894+BramSuurdje@users.noreply.github.com>
Date: Fri, 3 May 2024 20:14:10 +0200
Subject: [PATCH] Update layout and Navbar components to include responsive to
 avoid clipping walls when screens are smaller then 1280px

---
 app/layout.tsx        | 4 ++--
 components/Navbar.tsx | 6 ++++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/app/layout.tsx b/app/layout.tsx
index 4751360..3aba9f5 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -67,10 +67,10 @@ export default function RootLayout({
           enableSystem
           disableTransitionOnChange
         >
-          <div className="flex min-h-screen w-full flex-col justify-center">
+          <div className="flex min-h-screen w-full flex-col justify-center px-7 xl:px-0">
             <Navbar />
             <div className="flex w-full justify-center">
-              <div className="w-full max-w-7xl">
+              <div className="w-full max-w-7xl ">
                 {children}
                 <Toaster />
               </div>
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 83af0fd..454e740 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -28,13 +28,15 @@ function Navbar() {
   return (
     <>
       <div
-        className={`fixed left-0 top-0 z-50 flex w-full justify-center ${isScrolled ? "border-b backdrop-blur-lg" : ""}`}
+        className={`fixed left-0 top-0 z-50 flex w-full justify-center px-7 xl:px-0 ${isScrolled ? "border-b backdrop-blur-lg" : ""}`}
       >
         <div className="flex h-20 w-full max-w-7xl items-center justify-between">
           <h1 className="font-semibold ">
             <Link href="/" className=" flex items-center gap-2">
               <Image height={18} width={18} alt="logo" src={logo} />
-              <span className=" hidden md:block">Proxmox VE Helper-Scripts</span>
+              <span className=" hidden md:block">
+                Proxmox VE Helper-Scripts
+              </span>
             </Link>
           </h1>
           <div className="flex gap-2">