@stoker-platform/web-app 0.5.57 → 0.5.58

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @stoker-platform/web-app
 
+## 0.5.58
+
+### Patch Changes
+
+- feat: improve list metrics layout
+
 ## 0.5.57
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@stoker-platform/web-app",
-    "version": "0.5.57",
+    "version": "0.5.58",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE.md",
     "scripts": {

package/src/Collection.tsx

@@ -1895,7 +1895,7 @@ function Collection({
                                                     (action) => !action.condition || action.condition(),
                                                 ) ? (
                                                     <DropdownMenu>
-                                                        <DropdownMenuTrigger>
+                                                        <DropdownMenuTrigger asChild>
                                                             <Button
                                                                 type="button"
                                                                 size="sm"

package/src/List.tsx

@@ -1320,8 +1320,9 @@ export function List({
                 >
                     <CardContent>
                         {metrics && hasMetrics && !relationList && (
-                            <div className="hidden lg:flex flex-row gap-4 mb-4 mt-4">
+                            <div className="hidden lg:flex flex-row gap-4 mb-4 mt-4 max-w-[calc(100vw-96px)]">
                                 {metrics.map((metric: Metric | Chart, index: number) => {
+                                    const hideThirdMetric = index >= 2 ? "hidden xl:grid" : undefined
                                     if (
                                         permissions?.Role &&
                                         (!metric.roles || metric.roles.includes(permissions?.Role))
@@ -1337,7 +1338,7 @@ export function List({
                                             return (
                                                 <div
                                                     key={`metric-${index}`}
-                                                    className="grid gap-3 place-content-center"
+                                                    className={cn("grid gap-3 place-content-center", hideThirdMetric)}
                                                 >
                                                     <Card className="p-4 pt-6 pb-6 h-[175px] min-w-[175px] flex flex-col place-content-center items-center bg-blue-500 dark:bg-blue-500/50 text-primary-foreground dark:text-primary">
                                                         <div className="relative bottom-2">

package/src/utils/runViewTransition.ts

@@ -2,12 +2,17 @@ import { flushSync } from "react-dom"
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const runViewTransition = (callback: () => any) => {
-    if (document.startViewTransition) {
-        document.startViewTransition(() => {
-            flushSync(() => {
-                callback()
+    if (document.startViewTransition && document.visibilityState === "visible") {
+        try {
+            const transition = document.startViewTransition(() => {
+                flushSync(() => {
+                    callback()
+                })
             })
-        })
+            transition.finished.catch(() => {})
+        } catch {
+            callback()
+        }
     } else {
         callback()
     }