Fixed classes of sidebar to make it more like the main page

src/frontend/src/components/sidebarComponent/components/sideBarButtons/index.tsx

@@ -17,7 +17,7 @@ const SideBarButtonsComponent = ({
   pathname,
 }: SideBarButtonsComponentProps) => {
   return (
-    <>
+    <div className="flex gap-2 overflow-auto lg:h-[70vh] lg:flex-col">
       {items.map((item) => (
         <Link to={item.href!}>
           <div
@@ -28,15 +28,17 @@ const SideBarButtonsComponent = ({
               pathname === item.href
                 ? "border border-border bg-muted hover:bg-muted"
                 : "border border-transparent hover:border-border hover:bg-transparent",
-              "w-full justify-start gap-3",
+              "flex w-full shrink-0 justify-start gap-4",
             )}
           >
             {item.icon}
-            {item.title}
+            <span className="block max-w-full truncate opacity-100">
+              {item.title}
+            </span>
           </div>
         </Link>
       ))}
-    </>
+    </div>
   );
 };
 export default SideBarButtonsComponent;

src/frontend/src/components/sidebarComponent/components/sideBarFolderButtons/index.tsx

@@ -175,11 +175,11 @@ const SideBarFoldersButtonsComponent = ({
                     event.stopPropagation();
                     event.preventDefault();
                   }}
-                  className="flex w-full items-center gap-2"
+                  className="flex w-full items-center gap-4"
                 >
                   <IconComponent
                     name={"folder"}
-                    className="mr-2 w-4 flex-shrink-0 justify-start stroke-[1.5] opacity-100"
+                    className="w-4 flex-shrink-0 justify-start stroke-[1.5] opacity-100"
                   />
                   {editFolderName?.edit ? (
                     <div>

src/frontend/src/components/sidebarComponent/index.tsx

@@ -41,16 +41,20 @@ export default function SidebarNav({
   return (
     <nav className={cn(className)} {...props}>
       <HorizontalScrollFadeComponent>
-        <SideBarButtonsComponent items={items} pathname={pathname} />
-
-        {!loadingFolders && folders?.length > 0 && isFolderPath && (
-          <SideBarFoldersButtonsComponent
-            folders={folders}
-            pathname={pathname}
-            handleChangeFolder={handleChangeFolder}
-            handleEditFolder={handleEditFolder}
-            handleDeleteFolder={handleDeleteFolder}
-          />
+        {items.length > 0 ? (
+          <SideBarButtonsComponent items={items} pathname={pathname} />
+        ) : (
+          !loadingFolders &&
+          folders?.length > 0 &&
+          isFolderPath && (
+            <SideBarFoldersButtonsComponent
+              folders={folders}
+              pathname={pathname}
+              handleChangeFolder={handleChangeFolder}
+              handleEditFolder={handleEditFolder}
+              handleDeleteFolder={handleDeleteFolder}
+            />
+          )
         )}
       </HorizontalScrollFadeComponent>
     </nav>

src/frontend/src/components/ui/button.tsx

@@ -20,6 +20,7 @@ const buttonVariants = cva(
           "border border-muted bg-muted text-secondary-foreground hover:bg-secondary-foreground/5",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "underline-offset-4 hover:underline text-primary",
+        none: "",
       },
       size: {
         default: "h-10 py-2 px-4",
@@ -27,6 +28,7 @@ const buttonVariants = cva(
         xs: "py-0.5 px-3 rounded-md",
         lg: "h-11 px-8 rounded-md",
         icon: "py-1 px-1 rounded-md",
+        none: "",
       },
     },
     defaultVariants: {

src/frontend/src/pages/SettingsPage/index.tsx

@@ -21,7 +21,7 @@ export default function SettingsPage(): JSX.Element {
       icon: (
         <ForwardedIconComponent
           name="SlidersHorizontal"
-          className="mx-[0.08rem] w-[1.1rem] stroke-[1.5]"
+          className="w-4 flex-shrink-0 justify-start stroke-[1.5]"
         />
       ),
     },
@@ -32,7 +32,7 @@ export default function SettingsPage(): JSX.Element {
       icon: (
         <ForwardedIconComponent
           name="Globe"
-          className="mx-[0.08rem] w-[1.1rem] stroke-[1.5]"
+          className="w-4 flex-shrink-0 justify-start stroke-[1.5]"
         />
       ),
     },
@@ -40,7 +40,10 @@ export default function SettingsPage(): JSX.Element {
       title: "Shortcuts",
       href: "/settings/shortcuts",
       icon: (
-        <ForwardedIconComponent name="Keyboard" className="w-5 stroke-[1.5]" />
+        <ForwardedIconComponent
+          name="Keyboard"
+          className="w-4 flex-shrink-0 justify-start stroke-[1.5]"
+        />
       ),
     },
   ];
@@ -50,7 +53,7 @@ export default function SettingsPage(): JSX.Element {
       description="Manage the general settings for Langflow."
     >
       <div className="flex h-full w-full space-y-8 lg:flex-row lg:space-x-8 lg:space-y-0">
-        <aside className="flex h-full flex-col space-y-6 lg:w-1/5">
+        <aside className="flex h-full shrink-0 flex-col space-y-6 lg:w-[20vw]">
           <SidebarNav items={sidebarNavItems} />
         </aside>
         <div className="h-full w-full flex-1 pb-8">