fix(landing): keep feature-tile graphics uncropped at small breakpoints

Feature tiles shrank their min-height on small screens while the tallest
vignettes (audit ledger, staging panel) still needed ~300px of visual slot,
cropping their tops against the slot's overflow-hidden. Tiles now hold one
440px min-height everywhere. The 3-up grid also collapses to two columns
below lg instead of md, and the fixed-width canvases (access graph,
standards seal, ops router) scale down on the narrow two-column band and
the 3-up row just past lg so outer labels and chips are never cut off.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: andresdjasso

apps/sim/app/(landing)/components/solutions-page/components/solutions-card-row/solutions-card-row.tsx

@@ -99,7 +99,7 @@ export function SolutionsCardRow({
         className={cn(
           'grid',
           gridCols,
-          'max-sm:grid-cols-1 max-md:grid-cols-2',
+          'max-sm:grid-cols-1 max-lg:grid-cols-2',
           SOLUTIONS_SPACING.cardGridGap
         )}
       >

apps/sim/app/(landing)/components/solutions-page/constants.ts

@@ -88,8 +88,14 @@ export const SOLUTIONS_VISUAL = {
   heroAspect: 'aspect-[16/9]',
   /** Fixed height of a card's visual panel - uniform across every card. */
   cardHeight: 'h-[240px]',
-  /** Minimum height for framed feature tiles with copy and future UI in one surface. */
-  featureTileMinHeight: 'min-h-[440px] max-lg:min-h-[400px] max-sm:min-h-[380px]',
+  /**
+   * Minimum height for framed feature tiles with copy and future UI in one
+   * surface. One value at every breakpoint: the tallest tile vignettes (audit
+   * ledger, staging panel) need ~300px of visual slot below the copy block, so
+   * shrinking the tile on small screens crops their tops against the slot's
+   * `overflow-hidden`.
+   */
+  featureTileMinHeight: 'min-h-[440px]',
 } as const
 
 /**

apps/sim/app/(landing)/enterprise/components/feature-graphics/access-control-graphic.tsx

@@ -96,7 +96,11 @@ function edgePath(edge: Edge): string {
  * shrink at narrow tile widths its absolutely-positioned columns (fixed
  * `left-*` coordinates) would drift right of the box's true midline;
  * instead it keeps its geometry and overflows both edges equally, so the
- * Support → Review axis always sits on the tile's center.
+ * Support → Review axis always sits on the tile's center. On the narrow
+ * grid bands where the tile drops below the canvas width (small two-column
+ * screens and the 3-up row just past `lg`) the whole canvas scales down via
+ * transform — preserving that centering — so the outer team labels are
+ * never cropped.
  */
 export function AccessControlGraphic() {
   return (
@@ -105,7 +109,7 @@ export function AccessControlGraphic() {
         aria-hidden='true'
         className='absolute inset-0 flex items-center justify-center pr-8 max-lg:pr-6'
       >
-        <div className='relative h-[250px] w-[320px] shrink-0'>
+        <div className='relative h-[250px] w-[320px] shrink-0 max-sm:scale-100 max-md:scale-[0.8] lg:max-[1180px]:scale-[0.8]'>
           <svg
             className='absolute inset-0'
             fill='none'

apps/sim/app/(landing)/enterprise/components/feature-graphics/audit-trail-graphic.tsx

@@ -103,7 +103,7 @@ export function AuditTrailGraphic() {
         aria-hidden='true'
         className='absolute inset-0 flex items-center justify-center pr-8 max-lg:pr-6'
       >
-        <div className='w-[312px]'>
+        <div className='w-full max-w-[312px]'>
           <div className='mb-4 flex items-center justify-between'>
             <span className='font-medium text-[var(--text-primary)] text-base'>Audit log</span>
             <ChipTag variant='mono' className='bg-[var(--surface-6)]'>

apps/sim/app/(landing)/enterprise/components/feature-graphics/operations-teams-graphic.tsx

@@ -199,14 +199,17 @@ function PortTag({ port }: { port: Port }) {
  * center. The fixed-size canvas is centered with a transform (`left-1/2`
  * + `-translate-x-1/2`, the standards tile's approach) so at narrow tile
  * widths it keeps its wiring geometry and overflows both edges equally
- * instead of drifting.
+ * instead of drifting. On the narrow grid bands where the tile drops
+ * below the canvas width (small two-column screens and the 3-up row just
+ * past `lg`) the canvas scales down via transform so the outer tool pills
+ * are never cropped.
  */
 export function OperationsTeamsGraphic() {
   return (
     <FeatureGraphicShell>
       <div aria-hidden='true' className='absolute inset-0 pr-8 pb-8 max-lg:pr-6 max-lg:pb-6'>
         <div className='relative h-full'>
-          <div className='-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-1/2 h-[248px] w-[280px]'>
+          <div className='-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-1/2 h-[248px] w-[280px] max-sm:scale-100 max-md:scale-[0.85] lg:max-[1180px]:scale-[0.85]'>
             <svg
               className='absolute inset-0'
               fill='none'

apps/sim/app/(landing)/enterprise/components/feature-graphics/standards-graphic.tsx

@@ -55,14 +55,17 @@ import styles from '@/app/(landing)/enterprise/components/feature-graphics/stand
  * bled slot's center. The canvas itself is centered with a transform
  * (`left-1/2` + `-translate-x-1/2`) rather than flex `justify-center`
  * because an overflowing fixed-size flex item start-aligns instead of
- * centering once the tile gets narrower than the canvas.
+ * centering once the tile gets narrower than the canvas. On the narrow
+ * grid bands where the tile drops below the canvas width (small
+ * two-column screens and the 3-up row just past `lg`) the canvas scales
+ * down via transform so the SOC 2 / Open source chips are never cropped.
  */
 export function StandardsGraphic() {
   return (
     <FeatureGraphicShell>
       <div aria-hidden='true' className='absolute inset-0 pr-8 max-lg:pr-6'>
         <div className='relative h-full'>
-          <div className='-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-1/2 h-[250px] w-[320px]'>
+          <div className='-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-1/2 h-[250px] w-[320px] max-sm:scale-100 max-md:scale-[0.8] lg:max-[1180px]:scale-[0.8]'>
             <div className='absolute top-0 left-[48px] size-[224px] rounded-full border border-[color:color-mix(in_srgb,var(--text-muted-inverse)_22%,transparent)] [mask-image:linear-gradient(to_bottom,black_30%,transparent_92%)]' />
             <div className='absolute top-[36px] left-[84px] size-[152px] rounded-full border border-[color:color-mix(in_srgb,var(--text-muted-inverse)_35%,transparent)]' />