@likec4/diagram 1.24.1 → 1.25.1

package/src/likec4diagram/{XYFlow.tsx → DiagramXYFlow.tsx}

@@ -2,10 +2,11 @@ import { type EdgeId, type NodeId, nonNullable } from '@likec4/core'
 import { useCallbackRef } from '@mantine/hooks'
 import clsx from 'clsx'
 import { shallowEqual } from 'fast-equals'
-import { memo } from 'react'
+import { type PropsWithChildren, memo } from 'react'
 import type { EnforceOptional } from 'type-fest/source/enforce-optional'
 import { BaseXYFlow } from '../base/BaseXYFlow'
 import { useDiagramEventHandlers } from '../context'
+import { ReduceGraphicsViewportListener } from '../context/ReduceGraphics'
 import { useDiagram, useDiagramContext } from '../hooks/useDiagram'
 import type { LikeC4DiagramProperties } from '../LikeC4Diagram.props'
 import type { DiagramContext } from '../state/types'
@@ -50,9 +51,14 @@ type Picked = EnforceOptional<
     | 'nodesSelectable'
   >
 >
-export type LikeC4DiagramXYFlowProps = Required<Picked>
+export type LikeC4DiagramXYFlowProps = PropsWithChildren<Required<Picked>>
 
-export const LikeC4DiagramXYFlow = memo<LikeC4DiagramXYFlowProps>(({ background, nodesDraggable, nodesSelectable }) => {
+export const LikeC4DiagramXYFlow = memo<LikeC4DiagramXYFlowProps>(({
+  background,
+  nodesDraggable,
+  nodesSelectable,
+  children,
+}) => {
   const diagram = useDiagram()
   const {
     initialized,
@@ -149,7 +155,9 @@ export const LikeC4DiagramXYFlow = memo<LikeC4DiagramXYFlowProps>(({ background,
       nodesSelectable={nodesSelectable}
       {...(notReadOnly && nodesDraggable && layoutConstraints)}
       {...props}>
+      <ReduceGraphicsViewportListener />
       <DiagramUI />
+      {children}
     </BaseXYFlow>
   )
 }, shallowEqual)

package/src/likec4diagram/custom/edges/RelationshipEdge.tsx

@@ -5,6 +5,7 @@ import {
 } from '@likec4/core'
 import { useDebouncedEffect } from '@react-hookz/web'
 import type { XYPosition } from '@xyflow/react'
+import { EdgeLabelRenderer } from '@xyflow/react'
 import clsx from 'clsx'
 import { curveCatmullRomOpen, line as d3line } from 'd3-shape'
 import { type PointerEvent as ReactPointerEvent, useEffect, useRef, useState } from 'react'
@@ -13,6 +14,7 @@ import { customEdge, EdgeActionButton, EdgeContainer, EdgeLabel, EdgePath } from
 import { useEnabledFeature } from '../../../context'
 import { useXYFlow, useXYInternalNode, useXYStoreApi } from '../../../hooks'
 import { useDiagram } from '../../../hooks/useDiagram'
+import { useLooseReducedGraphics } from '../../../hooks/useReducedGraphics'
 import { vector, VectorImpl } from '../../../utils/vector'
 import { bezierControlPoints, bezierPath, isSamePoint } from '../../../utils/xyflow'
 import type { Types } from '../../types'
@@ -27,6 +29,7 @@ const curve = d3line<XYPosition>()
   .y(d => d.y)
 
 export const RelationshipEdge = customEdge<Types.RelationshipEdgeData>((props) => {
+  const isReducedGraphicsMode = useLooseReducedGraphics()
   const [isControlPointDragging, setIsControlPointDragging] = useState(false)
   const xyflowStore = useXYStoreApi()
   const xyflow = useXYFlow()
@@ -44,10 +47,11 @@ export const RelationshipEdge = customEdge<Types.RelationshipEdgeData>((props) =
     target,
     targetX,
     targetY,
+    selected = false,
     data: {
       id: edgeId,
-      navigateTo,
       points,
+      hovered = false,
       active = false,
       dimmed = false,
       labelBBox,
@@ -56,6 +60,8 @@ export const RelationshipEdge = customEdge<Types.RelationshipEdgeData>((props) =
     },
   } = props
 
+  const navigateTo = enableNavigateTo ? data.navigateTo : undefined
+
   const sourceNode = nonNullable(useXYInternalNode(source)!, `source node ${source} not found`)
   const targetNode = nonNullable(useXYInternalNode(target)!, `target node ${target} not found`)
 
@@ -297,7 +303,7 @@ export const RelationshipEdge = customEdge<Types.RelationshipEdgeData>((props) =
           <div {...props} />
         </NotePopover>
       )
-    } else if (enableRelationshipDetails) {
+    } else if (enableRelationshipDetails && (!isReducedGraphicsMode || hovered || selected || active)) {
       renderLabel = (props: any) => (
         <RelationshipsDropdownMenu
           disabled={!!dimmed}
@@ -313,24 +319,6 @@ export const RelationshipEdge = customEdge<Types.RelationshipEdgeData>((props) =
   return (
     <EdgeContainer {...props} className={clsx(isControlPointDragging && edgesCss.controlDragging)}>
       <EdgePath {...props} svgPath={edgePath} ref={svgPathRef} onEdgePointerDown={onEdgePointerDown} />
-      {enableEdgeEditing && (
-        <g
-          onContextMenu={e => {
-            e.preventDefault()
-            e.stopPropagation()
-          }}>
-          {controlPoints.map((p, i) => (
-            <circle
-              onPointerDown={e => onControlPointerDown(i, e)}
-              className={edgesCss.controlPoint}
-              key={i}
-              cx={p.x}
-              cy={p.y}
-              r={3}
-            />
-          ))}
-        </g>
-      )}
       <EdgeLabel
         edgeProps={props}
         labelPosition={{
@@ -340,7 +328,7 @@ export const RelationshipEdge = customEdge<Types.RelationshipEdgeData>((props) =
         }}
         {...renderLabel && { renderRoot: renderLabel }}
       >
-        {!isControlPointDragging && enableNavigateTo && navigateTo && (
+        {!isControlPointDragging && navigateTo && (
           <EdgeActionButton
             {...props}
             onClick={e => {
@@ -349,6 +337,29 @@ export const RelationshipEdge = customEdge<Types.RelationshipEdgeData>((props) =
             }} />
         )}
       </EdgeLabel>
+      {/* Render control points above edge label  */}
+      {enableEdgeEditing && controlPoints.length > 0 && (
+        <EdgeLabelRenderer>
+          <EdgeContainer component="svg" className={edgesCss.controlPointsContainer} {...props}>
+            <g
+              onContextMenu={e => {
+                e.preventDefault()
+                e.stopPropagation()
+              }}>
+              {controlPoints.map((p, i) => (
+                <circle
+                  onPointerDown={e => onControlPointerDown(i, e)}
+                  className={clsx('nodrag nopan', edgesCss.controlPoint)}
+                  key={i}
+                  cx={Math.round(p.x)}
+                  cy={Math.round(p.y)}
+                  r={3}
+                />
+              ))}
+            </g>
+          </EdgeContainer>
+        </EdgeLabelRenderer>
+      )}
     </EdgeContainer>
   )
 })

package/src/likec4diagram/custom/edges/RelationshipsDropdownMenu.tsx

@@ -1,9 +1,9 @@
 import {
   type DiagramEdge,
   type EdgeId,
+  type LikeC4Model,
   type NodeId,
   DiagramNode,
-  LikeC4Model,
   nameFromFqn,
 } from '@likec4/core'
 import {

package/src/likec4diagram/custom/edges/edges.css.ts

@@ -1,8 +1,23 @@
 import { globalStyle, style } from '@vanilla-extract/css'
+import { ZIndexes } from '../../../base/const'
 import { mantine, xyvars } from '../../../theme-vars'
 
 const isSelected = '.react-flow__edge.selected'
 
+export const controlPointsContainer = style({
+  overflow: 'visible',
+  position: 'absolute',
+  pointerEvents: 'none',
+  top: 0,
+  left: 0,
+  zIndex: ZIndexes.Edge,
+  selectors: {
+    [`&:is([data-edge-hovered='true'])`]: {
+      zIndex: ZIndexes.Edge + 1,
+    },
+  },
+})
+
 export const controlPoint = style({
   fill: xyvars.edge.stroke,
   stroke: xyvars.edge.stroke,

package/src/likec4diagram/custom/index.tsx

@@ -1,7 +1,20 @@
 import type { Types } from '../types'
 import { RelationshipEdge } from './edges/RelationshipEdge'
+import {
+  CompoundDeploymentNode,
+  CompoundElementNode,
+  DeploymentNode,
+  ElementNode,
+  ViewGroupNode,
+} from './nodes/nodeTypes'
 
-export { nodeTypes } from './nodes/nodeTypes'
+export const nodeTypes = {
+  element: ElementNode,
+  deployment: DeploymentNode,
+  'compound-element': CompoundElementNode,
+  'compound-deployment': CompoundDeploymentNode,
+  'view-group': ViewGroupNode,
+} satisfies { [key in Types.Node['type']]: any }
 
 export const edgeTypes = {
   relationship: RelationshipEdge,

package/src/likec4diagram/custom/nodes/nodeTypes.tsx

@@ -36,72 +36,74 @@ const ElementDetailsButtonWithHandler = ({ fqn, ...props }: NodeProps<Types.Node
   )
 }
 
-export const nodeTypes = {
-  element: customNode<Types.ElementNodeData>((props) => (
-    <ElementNodeContainer nodeProps={props}>
-      <ElementShape {...props} isMultiple={props.data.isMultiple} withSelectedIndicator={props.selected} />
-      <ElementTitle {...props} />
-      <ElementActions {...props} />
+export const ElementNode = customNode<Types.ElementNodeData>((props) => (
+  <ElementNodeContainer nodeProps={props}>
+    <ElementShape {...props} isMultiple={props.data.isMultiple} withSelectedIndicator={props.selected} />
+    <ElementTitle {...props} />
+    <ElementActions {...props} />
+    <ElementDetailsButtonWithHandler
+      fqn={props.data.modelFqn}
+      {...props} />
+    <IfNotEnabled feature="ReadOnly">
+      <ElementToolbar {...props} />
+    </IfNotEnabled>
+    <DefaultHandles />
+  </ElementNodeContainer>
+))
+
+export const DeploymentNode = customNode<Types.DeploymentElementNodeData>((props) => (
+  <ElementNodeContainer nodeProps={props}>
+    <ElementShape {...props} isMultiple={props.data.isMultiple} withSelectedIndicator={props.selected} />
+    <ElementTitle {...props} />
+    <DeploymentElementActions {...props} />
+    {!!props.data.modelFqn && (
       <ElementDetailsButtonWithHandler
         fqn={props.data.modelFqn}
         {...props} />
-      <IfNotEnabled feature="ReadOnly">
-        <ElementToolbar {...props} />
-      </IfNotEnabled>
-      <DefaultHandles />
-    </ElementNodeContainer>
-  )),
-  deployment: customNode<Types.DeploymentElementNodeData>((props) => (
-    <ElementNodeContainer nodeProps={props}>
-      <ElementShape {...props} isMultiple={props.data.isMultiple} withSelectedIndicator={props.selected} />
-      <ElementTitle {...props} />
-      <DeploymentElementActions {...props} />
-      {!!props.data.modelFqn && (
-        <ElementDetailsButtonWithHandler
-          fqn={props.data.modelFqn}
-          {...props} />
-      )}
-      <IfNotEnabled feature="ReadOnly">
-        <DeploymentElementToolbar {...props} />
-      </IfNotEnabled>
-      <DefaultHandles />
-    </ElementNodeContainer>
-  )),
-  'compound-element': customNode<Types.CompoundElementNodeData>((props) => {
-    const diagram = useDiagram()
-    return (
-      <CompoundNodeContainer nodeProps={props}>
-        <CompoundTitle {...props} />
-        <CompoundActions {...props} />
-        <IfEnabled feature="ElementDetails">
-          <CompoundDetailsButton
-            {...props}
-            onClick={e => {
-              e.stopPropagation()
-              diagram.openElementDetails(props.data.modelFqn, props.id as NodeId)
-            }} />
-        </IfEnabled>
-        <IfNotEnabled feature="ReadOnly">
-          <CompoundElementToolbar {...props} />
-        </IfNotEnabled>
-        <DefaultHandles />
-      </CompoundNodeContainer>
-    )
-  }),
-  'compound-deployment': customNode<Types.CompoundDeploymentNodeData>((props) => (
+    )}
+    <IfNotEnabled feature="ReadOnly">
+      <DeploymentElementToolbar {...props} />
+    </IfNotEnabled>
+    <DefaultHandles />
+  </ElementNodeContainer>
+))
+
+export const CompoundElementNode = customNode<Types.CompoundElementNodeData>((props) => {
+  const diagram = useDiagram()
+  return (
     <CompoundNodeContainer nodeProps={props}>
       <CompoundTitle {...props} />
       <CompoundActions {...props} />
+      <IfEnabled feature="ElementDetails">
+        <CompoundDetailsButton
+          {...props}
+          onClick={e => {
+            e.stopPropagation()
+            diagram.openElementDetails(props.data.modelFqn, props.id as NodeId)
+          }} />
+      </IfEnabled>
       <IfNotEnabled feature="ReadOnly">
-        <CompoundDeploymentToolbar {...props} />
+        <CompoundElementToolbar {...props} />
       </IfNotEnabled>
       <DefaultHandles />
     </CompoundNodeContainer>
-  )),
-  'view-group': customNode<Types.ViewGroupNodeData>((props) => (
-    <CompoundNodeContainer nodeProps={props}>
-      <CompoundTitle {...props} />
-      <DefaultHandles />
-    </CompoundNodeContainer>
-  )),
-} satisfies { [key in Types.Node['type']]: any }
+  )
+})
+
+export const CompoundDeploymentNode = customNode<Types.CompoundDeploymentNodeData>((props) => (
+  <CompoundNodeContainer nodeProps={props}>
+    <CompoundTitle {...props} />
+    <CompoundActions {...props} />
+    <IfNotEnabled feature="ReadOnly">
+      <CompoundDeploymentToolbar {...props} />
+    </IfNotEnabled>
+    <DefaultHandles />
+  </CompoundNodeContainer>
+))
+
+export const ViewGroupNode = customNode<Types.ViewGroupNodeData>((props) => (
+  <CompoundNodeContainer nodeProps={props}>
+    <CompoundTitle {...props} />
+    <DefaultHandles />
+  </CompoundNodeContainer>
+))

package/src/likec4diagram/ui/controls/Controls.tsx

@@ -1,9 +1,10 @@
-import { ActionIconGroup, Badge, Group, Loader, Stack } from '@mantine/core'
+import { ActionIconGroup, Badge, Box, Group, Loader, Stack } from '@mantine/core'
 import { IconFileSymlink, IconFocusCentered, IconMenu2 } from '@tabler/icons-react'
 import { clsx } from 'clsx'
-import { LayoutGroup } from 'framer-motion'
+import { AnimatePresence, LayoutGroup, m } from 'framer-motion'
 import { memo } from 'react'
 import { useDiagramEventHandlers, useEnabledFeatures } from '../../../context'
+import { type ControlsCustomLayout, useControlsCustomLayout } from '../../../context/ControlsCustomLayout'
 import { useMantinePortalProps } from '../../../hooks'
 import { useDiagram, useDiagramContext, useDiagramSyncLayoutState } from '../../../hooks/useDiagram'
 import { stopPropagation } from '../../../utils'
@@ -16,11 +17,62 @@ import { NavigationButtons } from './NavigationButtons'
 import * as css from './styles.css'
 import { ToggleReadonly } from './ToggleReadonly'
 
+const ControlsDefaultLayout: ControlsCustomLayout = ({
+  burgerMenu,
+  navigationButtons,
+  search,
+  actionsGroup,
+}) => (
+  <Group
+    component={m.div}
+    // @ts-expect-error group component not fully polymorphic
+    initial={{
+      opacity: 0.05,
+      translateX: -30,
+      translateY: -16,
+    }}
+    animate={{
+      opacity: 1,
+      translateX: 0,
+      translateY: 0,
+    }}
+    exit={{
+      opacity: 0.05,
+      translateX: -30,
+      translateY: -10,
+    }}
+    align="flex-start"
+    className={clsx(
+      'react-flow__panel',
+      css.panel,
+      'likec4-top-left-panel',
+    )}
+    gap="xs"
+    onClick={stopPropagation}
+  >
+    <Stack align="flex-start" gap="xs">
+      <LayoutGroup>
+        <Group
+          className={clsx(css.navigationButtons, 'likec4-navigation-webview')}
+          gap={'xs'}>
+          {burgerMenu}
+          {navigationButtons}
+        </Group>
+      </LayoutGroup>
+      {actionsGroup}
+    </Stack>
+    <Box>
+      {search}
+    </Box>
+  </Group>
+)
+
 export const Controls = memo(() => {
-  const { viewId, hasLayoutDrift, viewportChanged } = useDiagramContext(c => ({
+  const { viewId, hasLayoutDrift, viewportChanged, isNotActiveWalkthrough } = useDiagramContext(c => ({
     viewId: c.view.id,
     hasLayoutDrift: c.view.hasLayoutDrift ?? false,
     viewportChanged: c.viewportChangedManually,
+    isNotActiveWalkthrough: c.activeWalkthrough === null,
   }))
   const diagram = useDiagram()
   const {
@@ -36,24 +88,13 @@ export const Controls = memo(() => {
   } = useEnabledFeatures()
   const notReadOnly = !enableReadOnly
   const portalProps = useMantinePortalProps()
-
+  const ControlsLayout = useControlsCustomLayout() ?? ControlsDefaultLayout
   return (
-    <Group
-      align="flex-start"
-      className={clsx(
-        'react-flow__panel',
-        css.panel,
-        'likec4-top-left-panel',
-      )}
-      gap="xs"
-      onClick={stopPropagation}
-    >
-      <Stack align="flex-start" gap="xs">
-        <LayoutGroup>
-          <Group
-            className={clsx(css.navigationButtons, 'likec4-navigation-webview')}
-            gap={'xs'}>
-            {onBurgerMenuClick && (
+    <LayoutGroup inherit={false}>
+      <AnimatePresence initial={false} mode="wait">
+        {isNotActiveWalkthrough && (
+          <ControlsLayout
+            burgerMenu={onBurgerMenuClick && (
               <ActionIcon
                 onClick={e => {
                   e.stopPropagation()
@@ -62,47 +103,47 @@ export const Controls = memo(() => {
                 <IconMenu2 />
               </ActionIcon>
             )}
-            {enableNavigationButtons && <NavigationButtons />}
-          </Group>
-        </LayoutGroup>
-        <ActionIconGroup className={css.actionIconGroup} orientation="vertical">
-          {enableVscode && (
-            <Tooltip label="Open source" {...portalProps}>
-              <ActionIcon
-                onClick={e => {
-                  e.stopPropagation()
-                  onOpenSource?.({ view: viewId })
-                }}>
-                <IconFileSymlink stroke={1.5} />
-              </ActionIcon>
-            </Tooltip>
-          )}
-          {enableControls && <ToggleReadonly />}
-          {enableControls && hasLayoutDrift && <LayoutDriftNotification {...portalProps} />}
-          {enableControls && notReadOnly && (
-            <>
-              <ChangeAutoLayoutButton {...portalProps} />
-              <ManualLayoutToolsButton {...portalProps} />
-            </>
-          )}
-          {enableControls && (
-            <Tooltip label={viewportChanged ? 'Center camera' : 'Camera is centered'} {...portalProps}>
-              <ActionIcon
-                onClick={e => {
-                  e.stopPropagation()
-                  diagram.fitDiagram()
-                }}>
-                <IconFocusCentered />
-              </ActionIcon>
-            </Tooltip>
-          )}
-        </ActionIconGroup>
-      </Stack>
-      <Group>
-        {enableSearch && <LikeC4Search />}
-        {/* {notReadOnly && <SyncLayoutBadge />} */}
-      </Group>
-    </Group>
+            navigationButtons={enableNavigationButtons && <NavigationButtons />}
+            search={enableSearch && <LikeC4Search />}
+            syncInProgressBadge={<SyncLayoutBadge />}
+            actionsGroup={
+              <ActionIconGroup className={css.actionIconGroup} orientation="vertical">
+                {enableVscode && (
+                  <Tooltip label="Open source" {...portalProps}>
+                    <ActionIcon
+                      onClick={e => {
+                        e.stopPropagation()
+                        onOpenSource?.({ view: viewId })
+                      }}>
+                      <IconFileSymlink stroke={1.5} />
+                    </ActionIcon>
+                  </Tooltip>
+                )}
+                {enableControls && <ToggleReadonly />}
+                {enableControls && hasLayoutDrift && <LayoutDriftNotification {...portalProps} />}
+                {enableControls && notReadOnly && (
+                  <>
+                    <ChangeAutoLayoutButton {...portalProps} />
+                    <ManualLayoutToolsButton {...portalProps} />
+                  </>
+                )}
+                {enableControls && (
+                  <Tooltip label={viewportChanged ? 'Center camera' : 'Camera is centered'} {...portalProps}>
+                    <ActionIcon
+                      onClick={e => {
+                        e.stopPropagation()
+                        diagram.fitDiagram()
+                      }}>
+                      <IconFocusCentered />
+                    </ActionIcon>
+                  </Tooltip>
+                )}
+              </ActionIconGroup>
+            }
+          />
+        )}
+      </AnimatePresence>
+    </LayoutGroup>
   )
 })
 

package/src/likec4diagram/ui/controls/NavigationButtons.tsx

@@ -18,7 +18,12 @@ export const NavigationButtons = () => {
   return (
     <AnimatePresence>
       {hasStepBack && (
-        <m.div
+        <ActionIcon
+          component={m.button}
+          onClick={e => {
+            e.stopPropagation()
+            diagram.navigate('back')
+          }}
           layout
           initial={{ opacity: 0.05, transform: 'translateX(-10px)' }}
           animate={{ opacity: 1, transform: 'translateX(0)' }}
@@ -26,18 +31,14 @@ export const NavigationButtons = () => {
             opacity: 0.05,
             transform: 'translateX(-10px)',
           }}
-          key={'back'}>
-          <ActionIcon
-            onClick={e => {
-              e.stopPropagation()
-              diagram.navigate('back')
-            }}>
-            <IconChevronLeft />
-          </ActionIcon>
-        </m.div>
+          key={'back'}
+        >
+          <IconChevronLeft />
+        </ActionIcon>
       )}
       {hasStepForward && (
-        <m.div
+        <ActionIcon
+          component={m.button}
           layout
           initial={{ opacity: 0.05, transform: 'translateX(10px)' }}
           animate={{ opacity: 1, transform: 'translateX(0)' }}
@@ -45,15 +46,13 @@ export const NavigationButtons = () => {
             opacity: 0,
             transform: 'translateX(10px)',
           }}
-          key={'forward'}>
-          <ActionIcon
-            onClick={e => {
-              e.stopPropagation()
-              diagram.navigate('forward')
-            }}>
-            <IconChevronRight />
-          </ActionIcon>
-        </m.div>
+          key={'forward'}
+          onClick={e => {
+            e.stopPropagation()
+            diagram.navigate('forward')
+          }}>
+          <IconChevronRight />
+        </ActionIcon>
       )}
     </AnimatePresence>
   )

package/src/likec4diagram/ui/controls/styles.css.ts

@@ -1,8 +1,7 @@
 import { rem } from '@mantine/core'
 import { fallbackVar, globalStyle, style } from '@vanilla-extract/css'
 import { calc } from '@vanilla-extract/css-utils'
-import { whereNotReducedGraphics } from '../../../LikeC4Diagram.css'
-import { mantine, vars } from '../../../theme-vars'
+import { mantine, vars, whereNotReducedGraphics, whereReducedGraphics } from '../../../theme-vars'
 
 export const navigationButtons = style({
   gap: calc(mantine.spacing.xs).divide(1.5).toString(),
@@ -18,10 +17,16 @@ export const panel = style({
   pointerEvents: 'none',
 })
 
-globalStyle(`${panel} :where(button, .action-icon)`, {
+globalStyle(`${panel} :where(button, .action-icon, [role="dialog"])`, {
   pointerEvents: 'all',
 })
 
+globalStyle(`${whereReducedGraphics} ${panel} .action-icon`, {
+  vars: {
+    '--ai-radius': '0px',
+  },
+})
+
 globalStyle(`.likec4-top-left-panel .action-icon`, {
   vars: {
     ['--ai-size']: '2rem',

package/src/likec4diagram/ui/diagram-title/DiagramTitlePanel.css.ts

@@ -1,19 +1,13 @@
 import { fallbackVar, style } from '@vanilla-extract/css'
-import { whereNotReducedGraphics } from '../../../LikeC4Diagram.css'
-import { mantine, vars, whereDark } from '../../../theme-vars'
-
-export const container = style({
-  bottom: 0,
-  left: 0,
-  padding: 8,
-  margin: 0,
-})
+import { mantine, vars, whereDark, whereNotReducedGraphics } from '../../../theme-vars'
 
 export const card = style({
   cursor: 'default',
   minWidth: 200,
   maxWidth: 'calc(100vw - 16px)',
+  width: 'auto',
   backgroundColor: mantine.colors.body,
+  borderRadius: '0px',
   '@media': {
     [mantine.largerThan('sm')]: {
       minWidth: 250,
@@ -29,6 +23,7 @@ export const card = style({
       backgroundColor: mantine.colors.dark[6],
     },
     [`${whereNotReducedGraphics} &`]: {
+      borderRadius: mantine.radius.sm,
       backgroundColor: `color-mix(in srgb, ${mantine.colors.body}, transparent 20%)`,
       WebkitBackdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),
       backdropFilter: fallbackVar(vars.safariAnimationHook, 'blur(8px)'),