update cs

src/components/Layouts/LeftSidebar.jsx

@@ -24,7 +24,7 @@ const sidebarItems = [
 export function Sidebar() {
   const { selectedPanel, setSelectedPanel } = useContext(CanvasContext);
   return (
-    <div className="w-20 border-r bg-background flex flex-col items-center py-4 gap-6">
+    <div className="w-20 border-r bg-background flex flex-col items-center py-4 gap-6 md:pt-16 xl:pt-0">
       {sidebarItems.map((item) => {
         const Icon = item.icon;
         return (

src/components/Panel/CanvasPanel.jsx

@@ -19,7 +19,7 @@ const CanvasPanel = () => {
           <X className="h-4 w-4" />
         </Button>
       </div>
-      <ScrollArea className="lg:h-[calc(90vh-190px)] px-4 py-4">
+      <ScrollArea className="md:h-[calc(90vh-190px)] px-4 py-4">
         <CanvasSetting />
       </ScrollArea>
     </div>

src/components/Panel/ColorPanel.jsx

@@ -19,7 +19,7 @@ const ColorPanel = () => {
           <X className="h-4 w-4" />
         </Button>
       </div>
-      <ScrollArea className="lg:h-[calc(90vh-190px)] px-4 py-4">
+      <ScrollArea className="md:h-[calc(90vh-190px)] px-4 py-4">
         <ApplyColor />
       </ScrollArea>
     </div>

src/components/Panel/EditorPanel.jsx

@@ -50,7 +50,7 @@ const EditorPanel = () => {
   return (
     <>
       {selectedPanel !== "" && (
-        <div className="w-80 lg:h-[calc(90vh-100px)] bg-background rounded-xl shadow-lg mx-4 my-auto">
+        <div className="w-80 md:h-[calc(90vh-120px)] bg-background rounded-xl shadow-lg mx-4 my-auto">
           {renderPanel()}
         </div>
       )}

src/components/Panel/FlipPanel.jsx

@@ -22,7 +22,7 @@ const FlipPanel = () => {
           <X className="h-4 w-4" />
         </Button>
       </div>
-      <ScrollArea className="lg:h-[calc(90vh-190px)] px-4 py-4">
+      <ScrollArea className="md:h-[calc(90vh-190px)] px-4 py-4">
         <Card className="shadow-none border-0">
           <CollapsibleComponent text={"Flip, Rotate Control"}>
             <div className="space-y-2">

src/components/Panel/GroupObjectPanel.jsx

@@ -21,7 +21,7 @@ const GroupObjectPanel = () => {
           <X className="h-4 w-4" />
         </Button>
       </div>
-      <ScrollArea className="lg:h-[calc(90vh-190px)] px-4 py-4">
+      <ScrollArea className="md:h-[calc(90vh-190px)] px-4 py-4">
         <SelectObjectFromGroup />
         {/* Skew Customization */}
         <SkewCustomization />

src/components/Panel/IconPanel.jsx

@@ -20,7 +20,7 @@ const IconPanel = () => {
         </Button>
       </div>
 
-      <ScrollArea className="lg:h-[calc(90vh-190px)] px-4 py-4">
+      <ScrollArea className="md:h-[calc(90vh-190px)] px-4 py-4">
         <AllIconsPage />
       </ScrollArea>
     </div>

src/components/Panel/ImagePanel.jsx

@@ -19,7 +19,7 @@ const ImagePanel = () => {
           <X className="h-4 w-4" />
         </Button>
       </div>
-      <ScrollArea className="lg:h-[calc(90vh-190px)] px-4 py-4">
+      <ScrollArea className="md:h-[calc(90vh-190px)] px-4 py-4">
         <AddImageIntoShape />
       </ScrollArea>
     </div>

src/components/Panel/PositionPanel.jsx

@@ -19,7 +19,7 @@ const PositionPanel = () => {
           <X className="h-4 w-4" />
         </Button>
       </div>
-      <ScrollArea className="lg:h-[calc(90vh-190px)]  px-4 py-4">
+      <ScrollArea className="md:h-[calc(90vh-190px)]  px-4 py-4">
         <PositionCustomization />
       </ScrollArea>
     </div>

src/components/Panel/ShadowPanel.jsx

@@ -19,7 +19,7 @@ const ShadowPanel = () => {
           <X className="h-4 w-4" />
         </Button>
       </div>
-      <ScrollArea className="lg:h-[calc(90vh-190px)]  px-4 py-4">
+      <ScrollArea className="md:h-[calc(90vh-190px)]  px-4 py-4">
         <ShadowCustomization />
       </ScrollArea>
     </div>

src/components/Panel/ShapePanel.jsx

@@ -23,7 +23,7 @@ const ShapePanel = () => {
         </Button>
       </div>
 
-      <ScrollArea className="lg:h-[calc(90vh-190px)] px-4 py-4">
+      <ScrollArea className="md:h-[calc(90vh-190px)] px-4 py-4">
         <h2 className="font-semibold text-sm">Custom Shapes</h2>
         <Separator className="my-2" />
         <div className="space-y-4">

src/components/Panel/StrokePanel.jsx

@@ -19,7 +19,7 @@ const StrokePanel = () => {
           <X className="h-4 w-4" />
         </Button>
       </div>
-      <ScrollArea className="lg:h-[calc(90vh-190px)] px-4 py-4">
+      <ScrollArea className="md:h-[calc(90vh-190px)] px-4 py-4">
         <StrokeCustomization />
       </ScrollArea>
     </div>

src/components/Panel/TextPanel.jsx

@@ -53,7 +53,7 @@ export default function TextPanel() {
         </Button>
       </div>
 
-      <ScrollArea className="lg:h-[calc(90vh-190px)] px-4 py-4">
+      <ScrollArea className="md:h-[calc(90vh-195px)] px-4 py-4">
         <Button
           className="w-full bg-[#FF2B85] hover:bg-[#FF2B85] text-white rounded-[10px] mb-6 h-12 font-medium text-xl"
           onClick={() => {

src/components/Panel/TopBar.jsx

@@ -27,7 +27,7 @@ export function TopBar() {
       <ScrollArea
         className={`!absolute top-2 -translate-x-1/2 z-40 h-28 ${
           selectedPanel !== ""
-            ? "w-[500px] lg:w-[700px] xl:w-[900px] xl:left-[25%] 2xl:left-[50%]"
+            ? "md:w-[475px] left-[41%] lg:w-[700px] lg:left-[43%] mdxl:left-[45%] xl:w-[900px] xl:left-[46%] 2xl:left-[50%]"
             : "w-[500px] lg:w-[600px] xl:w-[900px] lg:left-[41%] xl:left-[50%]"
         }   `}
       >

src/components/Panel/UploadPanel.jsx

@@ -20,7 +20,7 @@ const UploadPanel = () => {
         </Button>
       </div>
 
-      <ScrollArea className="lg:h-[calc(90vh-190px)] px-4 py-4">
+      <ScrollArea className="md:h-[calc(90vh-190px)] px-4 py-4">
         <UploadImage />
       </ScrollArea>
     </div>

tailwind.config.js

@@ -13,7 +13,9 @@ export default {
           foreground: "hsl(var(--primary-foreground))",
         },
       },
-
+      screens: {
+        mdxl: "1100px",
+      },
       colors: {
         border: "hsl(var(--border))",
         input: "hsl(var(--input))",