From 8241ed932d14a68d048b889bcc03ccaeb54d950a Mon Sep 17 00:00:00 2001
From: Bram Suurd <78373894+BramSuurdje@users.noreply.github.com>
Date: Mon, 16 Jun 2025 17:13:33 +0200
Subject: [PATCH] Refactor layout and component styles for improved
 responsiveness (#5195)

---
 frontend/src/app/layout.tsx                              | 2 +-
 frontend/src/app/scripts/_components/ScriptAccordion.tsx | 2 +-
 frontend/src/app/scripts/_components/ScriptItem.tsx      | 4 ++--
 frontend/src/app/scripts/_components/Sidebar.tsx         | 4 ++--
 frontend/src/app/scripts/page.tsx                        | 2 +-
 frontend/src/components/Navbar.tsx                       | 2 +-
 6 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index 9a341ccfb..07cb6e2a1 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -104,7 +104,7 @@ export default function RootLayout({
             <Navbar />
             <div className="flex min-h-screen flex-col justify-center">
               <div className="flex w-full justify-center">
-                <div className="w-full max-w-7xl ">
+                <div className="w-full max-w-[1440px] ">
                   <QueryProvider>
                     <NuqsAdapter>{children}</NuqsAdapter>
                   </QueryProvider>
diff --git a/frontend/src/app/scripts/_components/ScriptAccordion.tsx b/frontend/src/app/scripts/_components/ScriptAccordion.tsx
index 23616877b..e4190e552 100644
--- a/frontend/src/app/scripts/_components/ScriptAccordion.tsx
+++ b/frontend/src/app/scripts/_components/ScriptAccordion.tsx
@@ -56,7 +56,7 @@ export default function ScriptAccordion({
       value={expandedItem}
       onValueChange={handleAccordionChange}
       collapsible
-      className="overflow-y-scroll max-h-[calc(100vh-225px)] overflow-x-hidden mt-3 p-2"
+      className="overflow-y-scroll max-h-[calc(100vh-225px)] overflow-x-hidden p-2"
     >
       {items.map((category) => (
         <AccordionItem
diff --git a/frontend/src/app/scripts/_components/ScriptItem.tsx b/frontend/src/app/scripts/_components/ScriptItem.tsx
index cc0596fa2..5471c04f6 100644
--- a/frontend/src/app/scripts/_components/ScriptItem.tsx
+++ b/frontend/src/app/scripts/_components/ScriptItem.tsx
@@ -120,7 +120,7 @@ export function ScriptItem({ item, setSelectedScript }: ScriptItemProps) {
   };
 
   return (
-    <div className="w-full max-w-5xl mx-auto">
+    <div className="w-full mx-auto">
       <div className="flex w-full flex-col">
         <div className="mb-3 flex items-center justify-between">
           <h2 className="text-2xl font-semibold tracking-tight text-foreground/90">Selected Script</h2>
@@ -132,7 +132,7 @@ export function ScriptItem({ item, setSelectedScript }: ScriptItemProps) {
           </button>
         </div>
 
-        <div className="rounded-xl border border-border/40 bg-gradient-to-b from-card/30 to-background/50 backdrop-blur-sm shadow-sm">
+        <div className="rounded-xl border border-border bg-gradient-to-b from-card/30 to-background/50 backdrop-blur-sm shadow-sm">
           <div className="p-6 space-y-6">
             <Suspense fallback={<div className="animate-pulse h-32 bg-accent/20 rounded-xl" />}>
               <ScriptHeader item={item} />
diff --git a/frontend/src/app/scripts/_components/Sidebar.tsx b/frontend/src/app/scripts/_components/Sidebar.tsx
index 3680210fa..38b7a3547 100644
--- a/frontend/src/app/scripts/_components/Sidebar.tsx
+++ b/frontend/src/app/scripts/_components/Sidebar.tsx
@@ -22,7 +22,7 @@ const Sidebar = ({
 	}, [] as Script[]);
 
 	return (
-		<div className="flex min-w-72 flex-col sm:max-w-72">
+		<div className="flex min-w-[350px] flex-col sm:max-w-[350px]">
 			<div className="flex items-end justify-between pb-4">
 				<h1 className="text-xl font-bold">Categories</h1>
 				<p className="text-xs italic text-muted-foreground">
@@ -40,4 +40,4 @@ const Sidebar = ({
 	);
 };
 
-export default Sidebar;
\ No newline at end of file
+export default Sidebar;
diff --git a/frontend/src/app/scripts/page.tsx b/frontend/src/app/scripts/page.tsx
index 590b67358..32d207bbc 100644
--- a/frontend/src/app/scripts/page.tsx
+++ b/frontend/src/app/scripts/page.tsx
@@ -47,7 +47,7 @@ function ScriptContent() {
             setSelectedScript={setSelectedScript}
           />
         </div>
-        <div className="mx-7 w-full sm:mx-0 sm:ml-7">
+        <div className="mx-4 w-full sm:mx-0 sm:ml-4">
           {selectedScript && item ? (
             <ScriptItem item={item} setSelectedScript={setSelectedScript} />
           ) : (
diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
index ac0d8ba02..8ede326c0 100644
--- a/frontend/src/components/Navbar.tsx
+++ b/frontend/src/components/Navbar.tsx
@@ -34,7 +34,7 @@ function Navbar() {
 						isScrolled ? "glass border-b bg-background/50" : ""
 					}`}
 				>
-					<div className="flex h-20 w-full max-w-7xl items-center justify-between sm:flex-row">
+					<div className="flex h-20 w-full max-w-[1440px] items-center justify-between sm:flex-row">
 						<Link
 							href={"/"}
 							className="flex cursor-pointer w-full justify-center sm:justify-start flex-row-reverse items-center gap-2 font-semibold sm:flex-row"