upd

client/src/components/FloorSidebarContainer.tsx

@@ -5,7 +5,7 @@ import CloseIcon from "./icons/CloseIcon";
 interface Props {
   sidebarComponent: {
     element: JSX.Element;
-    name: "Floor" | "Rooftop" | "Sky Garden" | "Podium" | "Ground";
+    name: "Floor" | "Rooftop" | "Sky Garden" | "Podium Level" | "Ground Level";
     desc?: string;
   } | null;
   onClose: () => void;
@@ -21,22 +21,18 @@ function FloorSidebarContainer({ sidebarComponent, onClose }: Props) {
 
   return (
     <div
-      className={`fixed top-[54px] right-0 w-1/2 bg-[#F3F3F2] h-[calc(100dvh-54px)] flex flex-col p-6 space-y-6 transition-all duration-300 z-10 ${
+      className={`fixed top-[54px] right-0 lg:w-1/2 w-full bg-[#F3F3F2] h-[calc(100dvh-54px)] flex flex-col p-6 space-y-6 transition-all duration-300 z-10 ${
         sidebarComponent ? "opacity-100 " : "opacity-50 translate-x-full"
-      } ${component?.name === "Floor" ? "overflow-hidden" : "overflow-auto"}`}
+      } ${component?.name !== "Floor" ? "overflow-auto" : ""}`}
     >
       <div className="flex justify-between">
-        <div className="">
+        <div className="self-center">
           <p className="text-2xl font-semibold text-[#0D1922]">
-            {(component?.name === "Floor" &&
-              `${component.element.props.floor} floor`) ||
-              (component?.name === "Sky Garden" && `${component.name}`)}
+            {component?.name === "Floor" ? `${component.element.props.floor} floor` : component?.name}
           </p>
-          <p>{component?.name === "Sky Garden" && `${component.desc}`}</p>
-        </div>
-        <div className="">
-          <Button3 icon={<CloseIcon />} onlyIcon onClick={onClose} />
+          <p className="text-sm">{component?.desc}</p>
         </div>
+        <Button3 icon={<CloseIcon className="w-5 h-5" />} onlyIcon onClick={onClose} className="self-start" />
       </div>
 
       {component?.element}