[dashboard] imporved workspace entry layout (#20016)

Author: svenefftinge

components/dashboard/src/components/ItemsList.tsx

@@ -11,13 +11,19 @@ export function ItemsList(props: { children?: React.ReactNode; className?: strin
 }
 
 export function Item(props: { children?: React.ReactNode; className?: string; header?: boolean; solid?: boolean }) {
+    let layoutClassName = "flex flex-grow flex-row justify-between";
+    // set layoutClassName to "" if className contains 'grid'
+    if (props.className?.includes("grid")) {
+        layoutClassName = "";
+    }
+
     // cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700
     const solidClassName = props.solid ? "bg-gray-100 dark:bg-gray-800" : "hover:bg-gray-100 dark:hover:bg-gray-800";
     const headerClassName = "text-sm text-gray-400 border-t border-b border-gray-200 dark:border-gray-800";
     const notHeaderClassName = "rounded-xl focus:bg-kumquat-light " + solidClassName;
     return (
         <div
-            className={`flex flex-grow flex-row w-full p-3 justify-between transition ease-in-out ${
+            className={`${layoutClassName} w-full p-3 transition ease-in-out ${
                 props.header ? headerClassName : notHeaderClassName
             } ${props.className || ""}`}
         >
@@ -44,7 +50,7 @@ export function ItemFieldContextMenu(props: {
 
     return (
         <div
-            className={`flex hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md cursor-pointer w-8 ${cls} ${
+            className={`flex hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md cursor-pointer min-w-8 w-8 ${cls} ${
                 props.className || ""
             }`}
         >

components/dashboard/src/workspaces/WorkspaceEntry.tsx

@@ -56,9 +56,15 @@ export const WorkspaceEntry: FunctionComponent<Props> = ({ info, shortVersion })
         [workspace.id],
     );
 
+    let gridCol =
+        "grid-cols-[minmax(32px,32px),minmax(100px,auto),minmax(100px,300px),minmax(80px,160px),minmax(32px,32px),minmax(32px,32px)]";
+    if (shortVersion) {
+        gridCol = "grid-cols-[minmax(32px,32px),minmax(100px,auto)]";
+    }
+
     return (
-        <Item className="whitespace-nowrap py-6" solid={menuActive}>
-            <ItemFieldIcon>
+        <Item className={`whitespace-nowrap py-6 px-4 gap-3 grid ${gridCol}`} solid={menuActive}>
+            <ItemFieldIcon className="min-w-8">
                 <WorkspaceStatusIndicator status={workspace?.status} />
             </ItemFieldIcon>
             <div className="flex-grow flex flex-col h-full py-auto truncate">
@@ -77,7 +83,7 @@ export const WorkspaceEntry: FunctionComponent<Props> = ({ info, shortVersion })
             </div>
             {!shortVersion && (
                 <>
-                    <div className="w-2/12 sm:w-3/12  xl:w-4/12 flex flex-col xl:flex-row xl:items-center xl:gap-6 justify-between px-1 md:px-3">
+                    <div className="flex flex-col justify-between">
                         <div className="text-gray-500 dark:text-gray-400 flex flex-row gap-1 items-center overflow-hidden">
                             <div className="min-w-4">
                                 <GitBranchIcon className="h-4 w-4" />
@@ -86,14 +92,11 @@ export const WorkspaceEntry: FunctionComponent<Props> = ({ info, shortVersion })
                                 {currentBranch}
                             </Tooltip>
                         </div>
-                        <div className="mr-auto xl:hidden">
+                        <div className="mr-auto">
                             <PendingChangesDropdown gitStatus={gitStatus} />
                         </div>
                     </div>
-                    <div className="hidden xl:flex xl:items-center xl:min-w-46">
-                        <PendingChangesDropdown gitStatus={gitStatus} />
-                    </div>
-                    <div className="px-1 md:px-3 flex items-center min-w-96 w-28 lg:w-44 text-right">
+                    <div className="flex items-center">
                         <Tooltip
                             content={`Last Activate ${dayjs(
                                 info.status!.phase!.lastTransitionTime!.toDate(),
@@ -105,7 +108,7 @@ export const WorkspaceEntry: FunctionComponent<Props> = ({ info, shortVersion })
                             </div>
                         </Tooltip>
                     </div>
-                    <div className="px-1 md:px-3 flex items-center">
+                    <div className="min-w-8 flex items-center">
                         <div
                             onClick={togglePinned}
                             className={