From aef940e64af467f2233bb4700e19667ce1b3af09 Mon Sep 17 00:00:00 2001
From: Bram Suurd <78373894+BramSuurdje@users.noreply.github.com>
Date: Mon, 6 May 2024 21:05:06 +0200
Subject: [PATCH] Fix layout issue in ScriptItem component

---
 app/scripts/page.tsx  | 2 +-
 components/Script.tsx | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/scripts/page.tsx b/app/scripts/page.tsx
index 0acf2b4..e6db7f7 100644
--- a/app/scripts/page.tsx
+++ b/app/scripts/page.tsx
@@ -11,7 +11,7 @@ export default function Page() {
         className="animate-fade-in absolute inset-0 -z-10"
         quantity={100}
       />
-      <div className="mt-20 flex">
+      <div className="mt-20 flex max-w-screen sm:max-w-full">
         <div className="hidden sm:flex">
           <ScriptBrowser />
         </div>
diff --git a/components/Script.tsx b/components/Script.tsx
index aa22f43..7ca7cd4 100644
--- a/components/Script.tsx
+++ b/components/Script.tsx
@@ -64,10 +64,10 @@ function ScriptItem() {
     <div className="h-full w-full">
       <Suspense fallback={null}>
         {item && (
-          <div className="sm:fixed sm:ml-10 mt-0 flex h-screen w-full sm:max-w-4xl max-w-screen">
+          <div className="mt-0 flex h-screen w-full sm:fixed sm:ml-10 sm:max-w-4xl">
             <div className="mr-4 flex w-full flex-col">
               <h2 className="text-xl font-semibold">Last viewed</h2>
-              <div className="flex mt-5 justify-between">
+              <div className="mt-5 flex justify-between">
                 <div className="flex">
                   <Image
                     className="h-32 w-32 rounded-lg bg-accent object-contain p-3"
@@ -122,7 +122,7 @@ function ScriptItem() {
                     </div>
                   </div>
                 </div>
-                <div className="flex flex-col justify-between gap-2">
+                <div className="sm:flex flex-col justify-between gap-2 hidden">
                   <div>
                     {item.port !== 0 && (
                       <div className="flex items-center justify-end">