From 46c9286dbf40cf05ae791f2a00c194ca96ea95a1 Mon Sep 17 00:00:00 2001 From: John Niche Date: Wed, 8 Apr 2026 00:39:27 -0300 Subject: [PATCH] =?UTF-8?q?fix(landing):=20comparison=20tables=20=E2=80=94?= =?UTF-8?q?=20columns=20collapsed=20from=20pill=20CSS?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The .cmp-table .yes/.no/.mid { display: inline-block; ... } rule was applied directly to elements. display: inline-block on a table cell removes it from CSS table layout and collapses into an inline flow. The kept working because .yes/.no/.mid are only ever on value cells, never on headers — so every value pill ended up clustered under the selectools header area while LangGraph Studio / n8n / Flowise / Dify / Rivet columns sat empty on the right. Fix: wrap each value cell's content in ... and retarget the pill-layout CSS (display, padding, border-radius, font sizing, nowrap) to the new .pill class. The stays in proper table-cell layout; the span becomes the rounded pill inside it. Color rules stay on the td and cascade to the child span by inheritance. Verified via playwright: td computed display = "table-cell" (was "inline-block") .pill computed display = "inline-block" Both tables visually aligned across all columns, 2 screenshots taken. Affects both comparison tables: - Builder comparison (7 cols × 10 rows) — 60 value cells wrapped - Framework comparison (4 cols × 15 rows) — 45 value cells wrapped --- landing/index.html | 79 ++++++++++++++++++++++------------------------ 1 file changed, 37 insertions(+), 42 deletions(-) diff --git a/landing/index.html b/landing/index.html index a810f98..b4b2679 100644 --- a/landing/index.html +++ b/landing/index.html @@ -1321,13 +1321,6 @@ instead of wrapping to 3-4 lines as reported on Galaxy S23. */ min-width: 800px; } - /* Yes/No verdict cells should never wrap — they're 2-3 chars and wrapping - them looks broken. Only let the long descriptive cells wrap. */ - .cmp-table .yes, - .cmp-table .no, - .cmp-table .mid { - white-space: nowrap; - } .cmp-hint { display: none; font-family: var(--font-mono); @@ -1362,22 +1355,24 @@ .cmp-table .mid { color: var(--amber); } .cmp-table .cap { color: var(--text); } - /* Light polish: pill-shaped backgrounds for verdict cells, subtle row - hover, and a tinted "winner" column (col 2 = selectools). The pill - backgrounds make the verdict scannable without enlarging the type. */ - .cmp-table .yes, - .cmp-table .no, - .cmp-table .mid { + /* Pill-shaped verdict badges. The .yes/.no/.mid classes live on the + (so the whole cell carries the color + column tint), but the pill-shape + styling targets an inner so the stays in proper + table layout. Applying display:inline-block to a removes it from + the table's layout engine and collapses the tbody into an inline flow — + that was the bug that broke both comparison tables. */ + .cmp-table .pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; + white-space: nowrap; } - .cmp-table .yes { background: rgba(34, 197, 94, 0.10); border: 1px solid rgba(34, 197, 94, 0.25); } - .cmp-table .no { background: rgba(100, 116, 139, 0.08); border: 1px solid rgba(100, 116, 139, 0.18); } - .cmp-table .mid { background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.22); } + .cmp-table .yes .pill { background: rgba(34, 197, 94, 0.10); border: 1px solid rgba(34, 197, 94, 0.25); } + .cmp-table .no .pill { background: rgba(100, 116, 139, 0.08); border: 1px solid rgba(100, 116, 139, 0.18); } + .cmp-table .mid .pill { background: rgba(245, 158, 11, 0.08); border: 1px solid rgba(245, 158, 11, 0.22); } /* Subtle row hover (mouse only) — helps the eye follow a single feature across all comparison columns. Coarse pointers skip this. */ @@ -5351,17 +5346,17 @@

The visual builder needs more room.

FeatureselectoolsLangGraph Studion8nFlowiseDifyRivet - PriceFree, foreverPaid (LangSmith)€20/mo cloudFree self-hostFree self-hostFree - Installpip installmacOS desktop appDockerDockerDockerDesktop app - Self-hostedYesNo (desktop only)YesYesYesNo - No CDN/build stepYesN/ANo (React)No (React)No (React)No (Electron) - Code export (Python)YesNoNoNoNoNo - Code export (YAML)YesNoJSON onlyJSON onlyYAMLNo - AI generationYes (NL to graph)NoNoNoNoNo - Live test from browserYesYesYesYesYesYes - Runs on GitHub PagesYesNoNoNoNoNo - Per-node cost previewYesNoNoNoNoNo - Built-in evals50 evaluatorsLangSmith (paid)NoNoNoNo + PriceFree, foreverPaid (LangSmith)€20/mo cloudFree self-hostFree self-hostFree + Installpip installmacOS desktop appDockerDockerDockerDesktop app + Self-hostedYesNo (desktop only)YesYesYesNo + No CDN/build stepYesN/ANo (React)No (React)No (React)No (Electron) + Code export (Python)YesNoNoNoNoNo + Code export (YAML)YesNoJSON onlyJSON onlyYAMLNo + AI generationYes (NL to graph)NoNoNoNoNo + Live test from browserYesYesYesYesYesYes + Runs on GitHub PagesYesNoNoNoNoNo + Per-node cost previewYesNoNoNoNoNo + Built-in evals50 evaluatorsLangSmith (paid)NoNoNoNo @@ -5386,21 +5381,21 @@

What you get vs. what you pay for elsewhere.

CapabilitySelectoolsLangChainCrewAI - Execution tracesBuilt-inLangSmith (paid)Limited logging - GuardrailsBuilt-in (5 types)NeMo (separate)Not built-in - Agent evaluationBuilt-in (50 evals)LangSmith (paid)Not built-in - Cost trackingAutomatic per-callManualNot built-in - Injection defense15 patterns + coherenceNot includedNot included - Visual builderBuilt-in + GitHub PagesLangGraph Studio (paid)Not built-in - Multi-agentAgentGraph + SupervisorLangGraphCore feature - HITL resumeExact yield pointRestarts nodeNot built-in - Composable pipelines@step + | + parallelLCEL (complex)Not built-in - Setup1 package5+ packages1 package - Deploy CLIselectools serveLangServe (separate)Enterprise only - Enterprise signalsSBOM + audit + 95% coverageNot built-inNot built-in - Migration guides4 frameworksNot availableNot available - AI-agent docs (llms.txt)Full index + contentNot availableNot available - CommunityGrowingMassiveLarge + Execution tracesBuilt-inLangSmith (paid)Limited logging + GuardrailsBuilt-in (5 types)NeMo (separate)Not built-in + Agent evaluationBuilt-in (50 evals)LangSmith (paid)Not built-in + Cost trackingAutomatic per-callManualNot built-in + Injection defense15 patterns + coherenceNot includedNot included + Visual builderBuilt-in + GitHub PagesLangGraph Studio (paid)Not built-in + Multi-agentAgentGraph + SupervisorLangGraphCore feature + HITL resumeExact yield pointRestarts nodeNot built-in + Composable pipelines@step + | + parallelLCEL (complex)Not built-in + Setup1 package5+ packages1 package + Deploy CLIselectools serveLangServe (separate)Enterprise only + Enterprise signalsSBOM + audit + 95% coverageNot built-inNot built-in + Migration guides4 frameworksNot availableNot available + AI-agent docs (llms.txt)Full index + contentNot availableNot available + CommunityGrowingMassiveLarge