fix(compare): fix SourceLink inline-anchor overflow, align table breakpoint

Root cause of the persistent table-overflow/mobile-scroll issues: SourceLink
renders a plain <a> with no explicit display, so it defaults to
'display: inline'. min-width and truncate are no-ops on inline elements, so
any fact with a source (nearly all of them) ignored its flex/grid parent's
width constraint and could force the whole row (and thus the whole table)
wider than intended, regardless of any container-level min-w-0/max-content
fix. Give the anchor 'block min-w-0' so width constraints and truncation
actually cascade down to the wrapped value.

Also aligns the table's mobile-stack breakpoint from an ad hoc sm (640px) to
lg (1024px), matching this route group's own tablet-and-below convention
(.claude/rules for the (landing) group), and fixes the stacked mobile cells
to override the cell's base items-center with items-stretch so the name tag
and value get a real full-width box to truncate within instead of shrinking
to their own content size with no boundary.

Author: waleedlatif1

apps/sim/app/(landing)/comparison/components/comparison-table/comparison-table.tsx

@@ -11,27 +11,37 @@ export interface ComparisonTableProps {
 }
 
 /**
- * Pins the row-label column during horizontal scroll at tablet width and up
- * (the standard pattern for responsive data tables, e.g. Stripe/GitHub/Notion
- * comparison tables) so a reader keeps row context while scrolling to see the
- * Sim/competitor values. Below `sm` the table switches to a stacked layout
- * instead (see `MOBILE_STACK`), so sticky positioning is scoped to `sm:` only.
- * The shadow is a permanent CSS-only affordance (no scroll-position JS) so
- * this stays a zero-hydration server component.
+ * Pins the row-label column during horizontal scroll on genuinely spacious
+ * viewports (the standard pattern for responsive data tables, e.g.
+ * Stripe/GitHub/Notion comparison tables) so a reader keeps row context while
+ * scrolling to see the Sim/competitor values. Below `lg` (this page's own
+ * tablet-and-below tier, per `.claude/rules` for this route group) the table
+ * switches to a stacked layout instead (see `MOBILE_STACK_*`) rather than
+ * relying on horizontal scroll at a width too narrow to render a 3-column
+ * table comfortably, so sticky positioning is scoped to `lg:` only. The
+ * shadow is a permanent CSS-only affordance (no scroll-position JS) so this
+ * stays a zero-hydration server component.
  */
-const STICKY_LABEL_COL = 'sm:sticky sm:left-0 sm:z-10 sm:shadow-[2px_0_4px_-2px_rgba(0,0,0,0.08)]'
+const STICKY_LABEL_COL = 'lg:sticky lg:left-0 lg:z-10 lg:shadow-[2px_0_4px_-2px_rgba(0,0,0,0.08)]'
 
 /**
- * Below `sm` (640px) a 3-column grid has no room to be legible even with a
- * pinned label column, so each fact instead stacks as label -> Sim's value ->
- * the competitor's value, with a small name tag on each value since the
- * column headers are no longer directly above. Applied to the label cell.
+ * Below `lg` (1024px) a 3-column grid doesn't reliably have room to be
+ * legible, so each fact instead stacks as label -> Sim's value -> the
+ * competitor's value, with a small name tag on each value since the column
+ * headers are no longer directly above. Applied to the label cell.
  */
-const MOBILE_STACK_LABEL = 'max-sm:border-r-0 max-sm:border-b-0 max-sm:pt-3 max-sm:pb-1'
+const MOBILE_STACK_LABEL = 'max-lg:border-r-0 max-lg:border-b-0 max-lg:pt-3 max-lg:pb-1'
 
-/** Applied to a value cell (Sim's or the competitor's) in the stacked mobile layout. */
+/**
+ * Applied to a value cell (Sim's or the competitor's) in the stacked mobile
+ * layout. `items-stretch` overrides the cell's base `items-center` (which
+ * would otherwise shrink-wrap and center each child horizontally in a
+ * flex-col): stretching gives the name tag and the value their own
+ * full-width box to left-align and truncate within, instead of a
+ * content-sized box with no boundary to clip against.
+ */
 const MOBILE_STACK_VALUE =
-  'max-sm:flex-col max-sm:items-start max-sm:gap-0.5 max-sm:border-r-0 max-sm:px-4'
+  'max-lg:flex-col max-lg:items-stretch max-lg:gap-0.5 max-lg:border-r-0 max-lg:px-4'
 
 function ColumnHeader({
   name,
@@ -72,15 +82,15 @@ export function ComparisonTable({ sim, competitor }: ComparisonTableProps) {
       <div
         role='table'
         aria-label={`Sim vs ${competitor.name} feature comparison`}
-        className='grid grid-cols-1 sm:min-w-[560px] sm:grid-cols-[minmax(140px,max-content)_1fr_1fr]'
+        className='grid grid-cols-1 lg:min-w-[560px] lg:grid-cols-[minmax(140px,max-content)_1fr_1fr]'
       >
         <div className='contents' role='row'>
           <div
             role='columnheader'
             className={cn(
               'flex min-w-0 flex-col justify-center border-[var(--border)] border-r border-b bg-[var(--surface-1)] px-4 py-4',
               STICKY_LABEL_COL,
-              'max-sm:border-r-0'
+              'max-lg:border-r-0'
             )}
           >
             <span className='truncate font-medium text-[var(--text-primary)] text-base'>
@@ -119,7 +129,7 @@ export function ComparisonTable({ sim, competitor }: ComparisonTableProps) {
                   className={cn(
                     'border-[var(--border)] border-r bg-[var(--surface-1)] px-4 py-2',
                     STICKY_LABEL_COL,
-                    'max-sm:border-r-0',
+                    'max-lg:border-r-0',
                     sectionIdx > 0 && 'border-[var(--border-1)] border-t'
                   )}
                 >
@@ -130,7 +140,7 @@ export function ComparisonTable({ sim, competitor }: ComparisonTableProps) {
                 <div
                   role='presentation'
                   className={cn(
-                    'col-span-2 bg-[var(--surface-1)] max-sm:hidden',
+                    'col-span-2 bg-[var(--surface-1)] max-lg:hidden',
                     sectionIdx > 0 && 'border-[var(--border-1)] border-t'
                   )}
                 />
@@ -152,7 +162,7 @@ export function ComparisonTable({ sim, competitor }: ComparisonTableProps) {
                         isNotLastRow && 'border-[var(--border-1)] border-b'
                       )}
                     >
-                      <span className='text-[var(--text-body)] text-small max-sm:font-medium max-sm:text-[var(--text-primary)]'>
+                      <span className='text-[var(--text-body)] text-small max-lg:font-medium max-lg:text-[var(--text-primary)]'>
                         {row.label}
                       </span>
                     </div>
@@ -161,11 +171,11 @@ export function ComparisonTable({ sim, competitor }: ComparisonTableProps) {
                       className={cn(
                         'flex min-w-0 items-center gap-1 border-[var(--border)] border-r bg-[var(--surface-2)] px-3 py-2.5',
                         MOBILE_STACK_VALUE,
-                        'max-sm:border-b-0 max-sm:pt-1 max-sm:pb-1',
+                        'max-lg:border-b-0 max-lg:pt-1 max-lg:pb-1',
                         isNotLastRow && 'border-[var(--border-1)] border-b'
                       )}
                     >
-                      <span className='font-medium text-[var(--text-muted)] text-caption sm:hidden'>
+                      <span className='font-medium text-[var(--text-muted)] text-caption lg:hidden'>
                         {sim.name}
                       </span>
                       <FactValue fact={simFact} />
@@ -175,11 +185,11 @@ export function ComparisonTable({ sim, competitor }: ComparisonTableProps) {
                       className={cn(
                         'flex min-w-0 items-center gap-1 bg-[var(--surface-2)] px-3 py-2.5',
                         MOBILE_STACK_VALUE,
-                        'max-sm:pt-1 max-sm:pb-3',
+                        'max-lg:pt-1 max-lg:pb-3',
                         isNotLastRow && 'border-[var(--border-1)] border-b'
                       )}
                     >
-                      <span className='font-medium text-[var(--text-muted)] text-caption sm:hidden'>
+                      <span className='font-medium text-[var(--text-muted)] text-caption lg:hidden'>
                         {competitor.name}
                       </span>
                       <FactValue fact={competitorFact} />

apps/sim/app/(landing)/comparison/components/source-info/source-info.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import type { ReactNode } from 'react'
-import { Tooltip } from '@sim/emcn'
+import { cn, Tooltip } from '@sim/emcn'
 import type { FactSource } from '@/lib/compare/data'
 
 export interface SourceLinkProps {
@@ -29,7 +29,7 @@ export function SourceLink({ source, children, className }: SourceLinkProps) {
           target='_blank'
           rel='noopener noreferrer'
           aria-label={`${source.label} (opens source)`}
-          className={className}
+          className={cn('block min-w-0', className)}
         >
           {children}
         </a>