From 465b1ab524b7f2339d4d9399c01155211d01be48 Mon Sep 17 00:00:00 2001
From: camilo <camiloesteban661@gmail.com>
Date: Fri, 23 Aug 2024 21:21:14 -0500
Subject: [PATCH] fix(theme-page): resolve sidebar overlapping footer issue

- Fixed the issue where the sidebar was overlapping the footer by
changing `lg:fixed` to `lg:sticky` and adjusting padding/margin.
- Removed unused imports (`LoaderIcon`, `LoaderPinwheelIcon`,
`MoveLeftIcon`) from `lucide-react`.
- Moved "Go back" button to the top of the sidebar for better UX.
---
 src/components/theme-page.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/theme-page.tsx b/src/components/theme-page.tsx
index b8be7fd..6a89b9d 100644
--- a/src/components/theme-page.tsx
+++ b/src/components/theme-page.tsx
@@ -4,7 +4,7 @@ import { Button } from "./ui/button";
 import { useEffect, useState } from "react";
 import Markdown from "react-markdown";
 import '../app/privacy-policy/markdown.css';
-import { ChevronLeft, LoaderCircleIcon, LoaderIcon, LoaderPinwheelIcon, MoveLeftIcon } from "lucide-react";
+import { ChevronLeft, LoaderCircleIcon } from "lucide-react";
 
 export default function ThemePage({ theme }: { theme: ZenTheme }) {
   const [readme, setReadme] = useState<string | null>(null);
@@ -14,7 +14,11 @@ export default function ThemePage({ theme }: { theme: ZenTheme }) {
 
   return (
     <div className="mt-24 lg:mt-56 flex-col lg:flex-row flex mx-auto items-start relative">
-      <div className="flex flex-col relative lg:fixed w-md h-full p-5 lg:p-0 lg:pr-5 mr-5 w-full md:max-w-sm">
+      <div className="flex flex-col relative lg:sticky lg:top-0 w-md h-full p-5 lg:p-0 lg:pr-5 mr-5 w-full md:max-w-sm">
+        <div className="flex mt-2 mb-9 items-center cursor-pointer opacity-70" onClick={() => window.history.back()}>
+          <ChevronLeft className="w-4 h-4 mr-1" />
+          <h3 className="text-md">Go back</h3>
+        </div>
         <Image src={theme.image} alt={theme.name} width={500} height={500} className="w-full object-cover rounded-lg border-2 shadow" />
         <h1 className="text-2xl mt-5 font-bold">{theme.name}</h1>
         <p className="text-sm text-muted-foreground mt-2">{theme.description}</p>
@@ -42,14 +46,10 @@ export default function ThemePage({ theme }: { theme: ZenTheme }) {
         <p id="install-theme-error" className="text-muted-foreground text-sm mt-2">You need to have Zen Browser installed to install this theme. <a href="/download" className="text-blue-500">Download now!</a></p>
       </div>
       <hr className="block my-4 lg:hidden" />
-      <div className="flex flex-col lg:border-l lg:min-h-96 pl-10 lg:ml-[25rem] max-w-xl lg:min-w-96 w-full">
-        <div className="flex my-2 items-center cursor-pointer opacity-70" onClick={() => window.history.back()}>
-          <ChevronLeft className="w-4 h-4 mr-1" />
-          <h3 className="text-md">Go back</h3>
-        </div>
+      <div className="flex flex-col lg:border-l lg:min-h-96 px-5 lg:pl-10 max-w-xl lg:min-w-96 w-full">
         <div id="policy" className="w-full">
           {readme === null ? (
-              <LoaderCircleIcon className="animate-spin w-12 h-12 mx-auto" />
+            <LoaderCircleIcon className="animate-spin w-12 h-12 mx-auto" />
           ) : (
             <Markdown>{`${readme}`}</Markdown>
           )}