Card aspect ratio and title style updates

common/changes/@itwin/imodel-browser-react/alex-mui-tweaks_2026-06-15-22-00.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@itwin/imodel-browser-react",
+      "comment": "Update Stratakit card aspect ratio and title style",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@itwin/imodel-browser-react"
+}

packages/apps/storybook/src/imodel-browser/mui/BaseCard.stories.tsx

@@ -176,7 +176,7 @@ export const Statuses = () => (
     sx={{
       display: "grid",
       gap: 2,
-      gridTemplateColumns: "repeat(auto-fill, minmax(22.5rem, 1fr))",
+      gridTemplateColumns: "repeat(auto-fill, minmax(18rem, 1fr))",
     }}
   >
     {(

packages/modules/imodel-browser/jest.config.js

@@ -5,19 +5,16 @@
 module.exports = {
   roots: ["<rootDir>/src"],
   transform: {
-    "^.+\\.(ts|tsx)$": [
+    "^.+\\.(ts|tsx|js|jsx)$": [
       "ts-jest",
       {
-        tsconfig: {
-          module: "CommonJS",
-          moduleResolution: "Node10",
-          types: ["jest", "node"],
-        },
+        tsconfig: "./tsconfig.test.json",
+        diagnostics: false,
       },
     ],
   },
   transformIgnorePatterns: [
-    "[/\\\\]node_modules[/\\\\](?!@bentley/ui).+\\.(js|jsx|ts|tsx)$",
+    "node_modules/(?!(\\.pnpm/(@stratakit|@ariakit|@mui).*|@bentley/ui|@stratakit|@ariakit|@mui))",
     "^.+\\.module\\.(css|sass|scss)$",
   ],
   testEnvironment: "jsdom",

packages/modules/imodel-browser/src/mui/components/baseCard/BaseCard.test.tsx

@@ -0,0 +1,98 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import "@testing-library/jest-dom";
+
+import Avatar from "@mui/material/Avatar";
+import AvatarGroup from "@mui/material/AvatarGroup";
+import Box from "@mui/material/Box";
+import Chip from "@mui/material/Chip";
+import svgPin from "@stratakit/icons/pin.svg";
+import svgSave from "@stratakit/icons/save.svg";
+import svgStatusWarning from "@stratakit/icons/status-warning.svg";
+import { Root } from "@stratakit/mui";
+import { render } from "@testing-library/react";
+import React from "react";
+
+import { BaseCard, BaseCardProps } from "./BaseCard";
+import { ThumbnailIconButton } from "./ThumbnailIconButton";
+
+const renderBaseCard = (props: Partial<BaseCardProps> = {}) =>
+  render(
+    <Root colorScheme="light">
+      <BaseCard title="Test Card" {...props} />
+    </Root>
+  );
+
+describe("BaseCard", () => {
+  it("renders with only a title", () => {
+    const { container } = renderBaseCard();
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  it("renders with all the props", () => {
+    const { container } = renderBaseCard({
+      description:
+        "When there is more than one `action` prop they will be rendered as buttons in the footer of the card and the whole card is not clickable.",
+      subheader: "This is a subheader",
+      onContextMenu: jest.fn(),
+      actions: [
+        { key: "open", label: "Open", onClick: jest.fn() },
+        { key: "share", label: "Share", onClick: jest.fn() },
+        {
+          key: "disabled",
+          label: "Disabled",
+          onClick: jest.fn(),
+          disabled: true,
+        },
+      ],
+      moreActions: [
+        {
+          key: "open",
+          label: "Open with",
+          onClick: jest.fn(),
+        },
+        { key: "share", label: "Share", onClick: jest.fn() },
+        { key: "delete", label: "Delete", onClick: jest.fn() },
+        {
+          key: "disabled",
+          label: "Disabled option",
+          onClick: jest.fn(),
+          disabled: true,
+        },
+      ],
+
+      statusIconHref: svgStatusWarning,
+      thumbnailTopLeft: (
+        <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+          <Chip size="small" label="Top Left" />
+          <AvatarGroup max={3}>
+            <Avatar alt="User 1" src="https://i.pravatar.cc/150?img=1" />
+            <Avatar alt="User 2" src="https://i.pravatar.cc/150?img=2" />
+            <Avatar alt="User 3" src="https://i.pravatar.cc/150?img=3" />
+          </AvatarGroup>
+        </Box>
+      ),
+
+      thumbnailTopRight: (
+        <>
+          <ThumbnailIconButton
+            aria-label="Add to favorites"
+            onClick={jest.fn()}
+            icon={svgPin}
+          />
+          <ThumbnailIconButton
+            aria-label="Muted icon button"
+            onClick={jest.fn()}
+            icon={svgSave}
+            muted
+          />
+        </>
+      ),
+      thumbnailBottomLeft: <Chip size="small" label="Bottom left" />,
+      thumbnailBottomRight: <Chip size="small" label="Bottom right" />,
+    });
+    expect(container.firstChild).toMatchSnapshot();
+  });
+});

packages/modules/imodel-browser/src/mui/components/baseCard/BaseCard.tsx

@@ -118,12 +118,15 @@ export interface BaseCardProps
 const baseCardSx = {
   overflow: "hidden",
   minWidth: "18rem",
-  minHeight: "15rem",
+  width: "21.5rem",
+  maxWidth: "24rem",
   display: "flex",
   flexDirection: "column",
 };
 
 const textEllipsisSx = {
+  typography: "body1",
+  fontWeight: "500",
   display: "block",
   overflow: "hidden",
   textOverflow: "ellipsis",