Fixed header

src/frontend/src/components/headerComponent/index.tsx

@@ -32,7 +32,7 @@ export default function Header(): JSX.Element {
 
   return (
     <div className="header-arrangement">
-      <div className="header-start-display">
+      <div className="header-start-display lg:w-[30%]">
         <Link to="/">
           <span className="ml-4 text-2xl">⛓️</span>
         </Link>
@@ -45,14 +45,19 @@ export default function Header(): JSX.Element {
         <Link to="/">
           <Button
             className="gap-2"
-            variant={location.pathname === "/" ? "primary" : "secondary"}
+            variant={
+              location.pathname === "/flows" ||
+              location.pathname === "/components"
+                ? "primary"
+                : "secondary"
+            }
             size="sm"
           >
             <IconComponent name="Home" className="h-4 w-4" />
-            <div className="flex-1">{USER_PROJECTS_HEADER}</div>
+            <div className="hidden flex-1 md:block">{USER_PROJECTS_HEADER}</div>
           </Button>
         </Link>
-        <Link to="/community">
+        {/* <Link to="/community">
           <Button
             className="gap-2"
             variant={
@@ -63,7 +68,7 @@ export default function Header(): JSX.Element {
             <IconComponent name="Users2" className="h-4 w-4" />
             <div className="flex-1">Community Examples</div>
           </Button>
-        </Link>
+        </Link> */}
         <Link to="/store">
           <Button
             className="gap-2"
@@ -71,20 +76,20 @@ export default function Header(): JSX.Element {
             size="sm"
           >
             <IconComponent name="Store" className="h-4 w-4" />
-            <div className="flex-1">Store</div>
+            <div className="hidden flex-1 md:block">Store</div>
           </Button>
         </Link>
       </div>
-      <div className="header-end-division">
+      <div className="header-end-division lg:w-[30%]">
         <div className="header-end-display">
           <a
             href="https://github.com/logspace-ai/langflow"
             target="_blank"
             rel="noreferrer"
-            className="header-github-link"
+            className="header-github-link gap-2"
           >
-            <FaGithub className="mr-2 h-5 w-5" />
-            Star
+            <FaGithub className="h-5 w-5" />
+            <div className="hidden lg:block">Star</div>
             <div className="header-github-display">{stars}</div>
           </a>
           <a

src/frontend/src/pages/MainPage/components/components/index.tsx

@@ -94,7 +94,6 @@ export default function ComponentsComponent() {
               <SkeletonCardComponent />
               <SkeletonCardComponent />
               <SkeletonCardComponent />
-              <SkeletonCardComponent />
             </>
           ) : (
             flows

src/frontend/src/pages/MainPage/components/flows/index.tsx

@@ -94,7 +94,6 @@ export default function FlowsComponent() {
               <SkeletonCardComponent />
               <SkeletonCardComponent />
               <SkeletonCardComponent />
-              <SkeletonCardComponent />
             </>
           ) : (
             flows

src/frontend/src/style/applies.css

@@ -237,7 +237,7 @@
   }
 
   .main-page-flows-display {
-    @apply grid w-full gap-4 md:grid-cols-2 lg:grid-cols-4;
+    @apply grid w-full gap-4 md:grid-cols-2 lg:grid-cols-3;
   }
 
   .community-page-arrangement {
@@ -495,7 +495,7 @@
     @apply flex items-center gap-0.5 rounded-md px-1.5 py-1 text-sm font-medium;
   }
   .header-menu-bar-display {
-    @apply flex max-w-[200px] cursor-pointer items-center gap-2;
+    @apply flex max-w-[120px] lg:max-w-[200px] cursor-pointer items-center gap-2;
   }
   .header-menu-flow-name {
     @apply flex-1 truncate;
@@ -505,13 +505,13 @@
   }
 
   .header-arrangement {
-    @apply flex-max-width h-12 items-center justify-between border-border bg-background;
+    @apply flex-max-width h-12 items-center justify-between border-b border-border bg-muted;
   }
   .header-start-display {
-    @apply flex w-[30%] items-center justify-start gap-2;
+    @apply flex items-center justify-start gap-2;
   }
   .header-end-division {
-    @apply flex w-[30%] justify-end px-2;
+    @apply flex justify-end px-2;
   }
   .header-end-display {
     @apply ml-auto mr-2 flex items-center gap-5;
@@ -535,7 +535,7 @@
     @apply hover:bg-accent hover:text-accent-foreground;
   }
   .header-github-display {
-    @apply -mr-px ml-2 flex h-9 items-center justify-center rounded-md rounded-l-none border bg-background px-2 text-sm;
+    @apply -mr-px ml-1 flex h-9 items-center justify-center rounded-md rounded-l-none border bg-background px-2 text-sm;
   }
   .header-notifications-box {
     @apply fixed left-0 top-0 h-screen w-screen;