Fix changes dropdown alignment (#20023)

Author: filiptronicek

components/dashboard/src/components/PendingChangesDropdown.tsx

@@ -7,8 +7,13 @@
 import ContextMenu, { ContextMenuEntry } from "./ContextMenu";
 import CaretDown from "../icons/CaretDown.svg";
 import { WorkspaceGitStatus } from "@gitpod/public-api/lib/gitpod/v1/workspace_pb";
+import { cn } from "@podkit/lib/cn";
 
-export default function PendingChangesDropdown({ gitStatus }: { gitStatus?: WorkspaceGitStatus }) {
+type Props = {
+    gitStatus?: WorkspaceGitStatus;
+    className?: string;
+};
+export default function PendingChangesDropdown({ gitStatus, className }: Props) {
     const headingStyle = "text-gray-500 dark:text-gray-400 text-left";
     const itemStyle = "text-gray-400 dark:text-gray-500 text-left -mt-5";
     const menuEntries: ContextMenuEntry[] = [];
@@ -42,9 +47,9 @@ export default function PendingChangesDropdown({ gitStatus }: { gitStatus?: Work
     return (
         <ContextMenu
             menuEntries={menuEntries}
-            customClasses="w-64 max-h-48 overflow-y-scroll overflow-x-clip mx-auto left-0 right-0"
+            customClasses={"w-64 max-h-48 overflow-y-scroll overflow-x-clip mx-auto left-0 right-0"}
         >
-            <p className="flex items-center text-gitpod-red">
+            <p className={cn("flex items-center text-gitpod-red", className)}>
                 <span>
                     {totalChanges} Change{totalChanges === 1 ? "" : "s"}
                 </span>

components/dashboard/src/start/StartWorkspace.tsx

@@ -722,7 +722,10 @@ export default class StartWorkspace extends React.Component<StartWorkspaceProps,
                                 </a>
                             </div>
                         </div>
-                        <PendingChangesDropdown gitStatus={this.state.workspace.status.gitStatus} />
+                        <PendingChangesDropdown
+                            gitStatus={this.state.workspace.status.gitStatus}
+                            className="justify-center"
+                        />
                         <div className="mt-10 justify-center flex space-x-2">
                             <a target="_parent" href={gitpodHostUrl.asWorkspacePage().toString()}>
                                 <Button variant="secondary">Go to Dashboard</Button>

components/dashboard/src/workspaces/WorkspacesSearchBar.tsx

@@ -5,11 +5,10 @@
  */
 
 import { FunctionComponent } from "react";
-import { Link } from "react-router-dom";
 import { StartWorkspaceModalKeyBinding } from "../App";
 import DropDown from "../components/DropDown";
 import search from "../icons/search.svg";
-import { Button } from "@podkit/buttons/Button";
+import { LinkButton } from "@podkit/buttons/LinkButton";
 
 type WorkspacesSearchBarProps = {
     searchTerm: string;
@@ -67,11 +66,9 @@ export const WorkspacesSearchBar: FunctionComponent<WorkspacesSearchBarProps> =
                     ]}
                 />
             </div>
-            <Link to={"/new"}>
-                <Button className="ml-2 gap-1.5 h-10">
-                    New Workspace <span className="opacity-60 hidden md:inline">{StartWorkspaceModalKeyBinding}</span>
-                </Button>
-            </Link>
+            <LinkButton href={"/new"} className="ml-2 gap-1.5 h-10">
+                New Workspace <span className="opacity-60 hidden md:inline">{StartWorkspaceModalKeyBinding}</span>
+            </LinkButton>
         </div>
     );
 };

yarn.lock

@@ -5530,20 +5530,10 @@ caniuse-api@^3.0.0:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001271:
-  version "1.0.30001274"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001274.tgz"
-  integrity sha512-+Nkvv0fHyhISkiMIjnyjmf5YJcQ1IQHZN6U9TLUMroWR38FNwpsC51Gb68yueafX1V6ifOisInSgP9WJFS13ew==
-
-caniuse-lite@^1.0.30001517, caniuse-lite@^1.0.30001520:
-  version "1.0.30001521"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001521.tgz#e9930cf499f7c1e80334b6c1fbca52e00d889e56"
-  integrity sha512-fnx1grfpEOvDGH+V17eccmNjucGUnCbP6KL+l5KqBIerp26WK/+RQ7CIDE37KGJjaPyqWXXlFUyKiWmvdNNKmQ==
-
-caniuse-lite@^1.0.30001587, caniuse-lite@^1.0.30001599:
-  version "1.0.30001600"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001600.tgz#93a3ee17a35aa6a9f0c6ef1b2ab49507d1ab9079"
-  integrity sha512-+2S9/2JFhYmYaDpZvo0lKkfvuKIglrx68MwOBqMGHhQsNkLjB5xtc/TGoEPs+MxjSyN/72qer2g97nzR641mOQ==
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001271, caniuse-lite@^1.0.30001517, caniuse-lite@^1.0.30001520, caniuse-lite@^1.0.30001587, caniuse-lite@^1.0.30001599:
+  version "1.0.30001641"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001641.tgz"
+  integrity sha512-Phv5thgl67bHYo1TtMY/MurjkHhV4EDaCosezRXgZ8jzA/Ub+wjxAvbGvjoFENStinwi5kCyOYV3mi5tOGykwA==
 
 case-anything@^2.1.13:
   version "2.1.13"