fixed side panel visual bugs

app/modules/SidePanel/SidePanel.tsx

@@ -1,6 +1,4 @@
 import { useState } from "react";
-import { Tabs } from "../Tabs";
-import { Transition } from "@headlessui/react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faChevronLeft,
@@ -15,26 +13,20 @@ export const SidePanel = ({children}:Props) => {
   const [isVisible, setIsVisible] = useState(true);
 
   return (
-    <div className="relative border-l border-l-ui-panel-border bg-ui-panel">
+    <div className={
+      "relative border-l border-l-ui-panel-border bg-ui-panel transition-all duration-300 ease-in-out"
+      + (isVisible ? " w-[23.5rem]" : " w-0")
+      }
+    >
       <button
         onClick={() => setIsVisible(!isVisible)}
-        className="hover:bg-ui-controls-button absolute left-[-25px] top-1/2 flex rounded-l-lg bg-ui-controls px-2 py-3 align-middle text-sm text-white transition duration-150 ease-in-out"
+        className="hover:bg-ui-controls-button absolute left-[-25px] top-1/2 flex rounded-l-lg bg-ui-controls px-2 py-3 align-middle text-sm text-white"
       >
         <FontAwesomeIcon icon={isVisible ? faChevronRight : faChevronLeft} />
       </button>
-      <Transition
-        show={isVisible}
-        enter="transition-transform duration-300"
-        enterFrom="translate-x-full"
-        enterTo="translate-x-0"
-        leave="transition-transform duration-300"
-        leaveFrom="translate-x-0"
-        leaveTo="translate-x-full"
-      >
-
-          {children}
-
-      </Transition>
+      <div className="relative w-[23.5rem] h-full">
+        {children}
+      </div>
     </div>
 
   );

app/modules/SidePanelOld/SidePanelInnerOld.tsx

@@ -1,67 +0,0 @@
-import { useCallback, useLayoutEffect, useState } from "react";
-import { Dialog } from "@headlessui/react";
-
-import { faXmark } from "@fortawesome/pro-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-import { TOP_BAR_HEIGHT } from "~/constants";
-
-export const SidePanelInner = ({
-  title,
-  children,
-  closeCallback,
-}: {
-  title?: string;
-  children: React.ReactNode;
-  closeCallback: () => void;
-}) => {
-  const [height, setHeight] = useState(0);
-  const handleWindowResize = useCallback(() => {
-    if (window) {
-      setHeight(Math.ceil((window.innerHeight * 3) / 4) - TOP_BAR_HEIGHT);
-    }
-    return 0;
-  }, []);
-
-  useLayoutEffect(() => {
-    handleWindowResize();
-    window.addEventListener("resize", handleWindowResize);
-    return () => {
-      window.removeEventListener("resize", handleWindowResize);
-    };
-  }, [handleWindowResize]);
-
-  return (
-    <div
-      className="flex flex-col overflow-y-scroll border-y border-l border-ui-panel-border bg-ui-panel py-6 shadow-xl"
-      style={{ height: height + "px" }}
-    >
-      <div className="px-4 sm:px-6">
-        <div className="flex items-start justify-between">
-          {!title && <span />}
-          {title && (
-            <Dialog.Title className="text-base font-semibold leading-6 text-white">
-              {title}
-            </Dialog.Title>
-          )}
-          <div className="ml-3 flex h-7 items-center">
-            <button
-              type="button"
-              className="relative rounded-md bg-brand-primary text-white hover:bg-brand-primary-400 focus:outline-none focus:ring-brand-primary-500"
-              onClick={closeCallback}
-            >
-              {/* <span className="absolute -inset-2.5" /> */}
-              <span className="sr-only">Close panel</span>
-              <FontAwesomeIcon
-                className="mx-1 mt-1 h-6 w-6"
-                aria-hidden="true"
-                icon={faXmark}
-              />
-            </button>
-          </div>
-        </div>
-      </div>
-      <div className="relative mt-6 flex-1">{children}</div>
-    </div>
-  );
-};

app/modules/SidePanelOld/SidePanelOld.tsx

@@ -1,54 +0,0 @@
-import { Fragment, useState } from "react";
-import { Dialog, Transition } from "@headlessui/react";
-import { faGears } from "@fortawesome/pro-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-import { Button } from "~/components/Button";
-
-import { SidePanelInner } from "./SidePanelInnerOld";
-
-interface SidePanelPropsI {
-  title?: string;
-  children: React.ReactNode;
-}
-
-export const SidePanel = ({ title, children }: SidePanelPropsI) => {
-  const [open, setOpen] = useState<boolean>(false);
-  const handleOpen = () => setOpen(true);
-  const handleClose = () => setOpen(false);
-
-  return (
-    <>
-      <Button className="fixed right-0 top-20 mr-4 mt-2" onClick={handleOpen}>
-        <FontAwesomeIcon className="fa-2xl -mx-2" icon={faGears} />
-      </Button>
-      <Transition.Root show={open} as={Fragment}>
-        <Dialog as="div" className="relative z-10" onClose={setOpen}>
-          <div className="fixed inset-0" />
-
-          <div className="fixed inset-0 overflow-hidden">
-            <div className="absolute inset-0 overflow-hidden">
-              <div className="pointer-events-none fixed inset-y-0 right-0 top-16 mt-2 flex max-w-full pl-10 sm:pl-16">
-                <Transition.Child
-                  as={Fragment}
-                  enter="transform transition ease-in-out duration-500 sm:duration-700"
-                  enterFrom="translate-x-full"
-                  enterTo="translate-x-0"
-                  leave="transform transition ease-in-out duration-500 sm:duration-700"
-                  leaveFrom="translate-x-0"
-                  leaveTo="translate-x-full"
-                >
-                  <Dialog.Panel className="pointer-events-auto w-screen lg:max-w-md">
-                    <SidePanelInner title={title} closeCallback={handleClose}>
-                      {children}
-                    </SidePanelInner>
-                  </Dialog.Panel>
-                </Transition.Child>
-              </div>
-            </div>
-          </div>
-        </Dialog>
-      </Transition.Root>
-    </>
-  );
-};

app/modules/SidePanelOld/index.tsx

@@ -1 +0,0 @@
-export { SidePanel } from "./SidePanelOld";

app/modules/Tabs/Tabs.tsx

@@ -19,7 +19,7 @@ export const Tabs = ({ tabs: tabProps }: { tabs: TabType[] }) => {
     );
 
   return (
-    <div className="w-full max-w-md px-2 sm:px-0">
+    <div className="w-full h-full px-2 sm:px-0 flex flex-col">
       <Tab.Group defaultIndex={3}>
         <Tab.List className="flex">
           {tabs.map((tab, idx) => (
@@ -31,9 +31,9 @@ export const Tabs = ({ tabs: tabProps }: { tabs: TabType[] }) => {
             </Tab>
           ))}
         </Tab.List>
-        <Tab.Panels>
+        <Tab.Panels className="grow overflow-scroll p-4">
           {tabs.map((tab, idx) => (
-            <Tab.Panel key={idx} className="p-4 text-white focus:outline-none">
+            <Tab.Panel key={idx}>
               {tab.children}
             </Tab.Panel>
           ))}

app/pages/PageEnigma/comps/SidePanelTabs/TabStylization.tsx

@@ -32,7 +32,7 @@ export const TabStylization = ()=>{
     }
   }
   return(
-    <>
+    <div className="gap-2">
       <H4>Select Base Stylizer</H4>
       <div className="flex gap-2 my-2">
         <ItemPicker
@@ -82,6 +82,6 @@ export const TabStylization = ()=>{
           }
         </Button>
       </div>
-    </>
+    </div>
   );
 }