@stapel/listings-react 0.30.4 → 0.30.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +42 -0
- package/dist/default/ListingSerpCard.d.ts.map +1 -1
- package/dist/default/ListingSerpCard.js +3 -2
- package/dist/default/ListingSerpCard.js.map +1 -1
- package/dist/default/titleClamp.d.ts +22 -1
- package/dist/default/titleClamp.d.ts.map +1 -1
- package/dist/default/titleClamp.js +24 -2
- package/dist/default/titleClamp.js.map +1 -1
- package/llms.txt +1 -1
- package/manifest.json +1 -1
- package/nav-manifest.json +1 -1
- package/package.json +1 -1
- package/src/analytics/generated/events.json +1 -1
- package/src/default/ListingSerpCard.tsx +18 -1
- package/src/default/titleClamp.ts +24 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,47 @@
|
|
|
1
1
|
# @stapel/listings-react
|
|
2
2
|
|
|
3
|
+
## 0.30.6
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 0fccad9: The title clamp outranks a host's own selector on the same element
|
|
8
|
+
|
|
9
|
+
`-webkit-line-clamp` does nothing without `display: -webkit-box`, and that one
|
|
10
|
+
declaration was the easiest in the rule for a container to overwrite by
|
|
11
|
+
accident. A single class selector scores (0,1,0) — exactly what
|
|
12
|
+
`[data-testid="listings-serp-title"]` scores — so whichever sheet loaded last
|
|
13
|
+
won.
|
|
14
|
+
|
|
15
|
+
Measured on a live storefront: the host set `display: block` on its title
|
|
16
|
+
testids to stop two inline spans running together, that rule came second, and
|
|
17
|
+
every clamp in the app went inert. The class was on the element, the sheet was
|
|
18
|
+
in the head, `-webkit-line-clamp: 2` was in the computed style, and a
|
|
19
|
+
113-character title drew three lines — every check that could be made without
|
|
20
|
+
a browser passed.
|
|
21
|
+
|
|
22
|
+
The rule now repeats its own class, scoring (0,2,0). It cannot lose that tie,
|
|
23
|
+
and still loses to a host that really means it.
|
|
24
|
+
|
|
25
|
+
## 0.30.5
|
|
26
|
+
|
|
27
|
+
### Patch Changes
|
|
28
|
+
|
|
29
|
+
- e738f0f: The list card clamps its title too, so all three cards read one rule
|
|
30
|
+
|
|
31
|
+
`titleClamp.ts` was introduced to end two cards answering one question two
|
|
32
|
+
ways. It ended one of the two: `<ListingSerpCard>` — the card a live
|
|
33
|
+
storefront draws in its DEFAULT view, and therefore the one most people are
|
|
34
|
+
actually looking at — was still a bare `<Typography.Text>` with no clamp at
|
|
35
|
+
all. Not cut mid-word, because it had no ellipsis either; simply unbounded, so
|
|
36
|
+
a long title ran on for as many lines as it wanted and left the row ragged
|
|
37
|
+
beside its neighbours.
|
|
38
|
+
|
|
39
|
+
It now carries `TITLE_CLAMP_CLASS` and hoists the same sheet under the same
|
|
40
|
+
`href` as the grid card and the tile. The suite asserts the rule across all
|
|
41
|
+
three cards together rather than card by card, which is the shape of the
|
|
42
|
+
mistake it is there to catch: the first fix reached the tile and missed the
|
|
43
|
+
grid, the second reached the grid and missed the list.
|
|
44
|
+
|
|
3
45
|
## 0.30.4
|
|
4
46
|
|
|
5
47
|
### Patch Changes
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListingSerpCard.d.ts","sourceRoot":"","sources":["../../src/default/ListingSerpCard.tsx"],"names":[],"mappings":"AA4EA,OAAO,KAAK,EAAiB,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGpE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG9C,OAAO,KAAK,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,iBAAiB,CAAC;AA0BtE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"ListingSerpCard.d.ts","sourceRoot":"","sources":["../../src/default/ListingSerpCard.tsx"],"names":[],"mappings":"AA4EA,OAAO,KAAK,EAAiB,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGpE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAG9C,OAAO,KAAK,EAAE,WAAW,IAAI,eAAe,EAAE,MAAM,iBAAiB,CAAC;AA0BtE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAQ7D,OAAO,KAAK,EAAE,oBAAoB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEtE;;;;;;;GAOG;AACH,MAAM,WAAW,iBAAiB;IAChC,6EAA6E;IAC7E,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,yEAAyE;IACzE,QAAQ,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;CACnC;AAED,MAAM,WAAW,wBACf,SAAQ,aAAa,EACnB,oBAAoB;IACtB,QAAQ,CAAC,OAAO,EAAE,eAAe,CAAC;IAClC;;;;;;;;;;OAUG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,4EAA4E;IAC5E,QAAQ,CAAC,UAAU,CAAC,EAAE,iBAAiB,CAAC;IACxC;0CACsC;IACtC,QAAQ,CAAC,UAAU,CAAC,EAAE,SAAS,CAAC;IAChC;;;;;;;;;;;;;;OAcG;IACH,QAAQ,CAAC,kBAAkB,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAChD;gEAC4D;IAC5D,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC;IACjC;wDACoD;IACpD,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAC3B;oEACgE;IAChE,QAAQ,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC;IAChC;;;wDAGoD;IACpD,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5C;mCAC+B;IAC/B,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC;CAC7B;AAED,MAAM,MAAM,oBAAoB,GAAG,wBAAwB,GAAG,oBAAoB,CAAC;AAUnF,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,CAyPzE"}
|
|
@@ -89,6 +89,7 @@ import { FavoriteHeart } from "./favorite.js";
|
|
|
89
89
|
import { LISTING_ACTIONS_CLASS, LISTING_ACTIONS_OVERLAY_CLASS, LISTING_CARD_ACTION_CLASS, } from "./actionRow.js";
|
|
90
90
|
import { CardBadges, CardSpecLine } from "./CardBadges.js";
|
|
91
91
|
import { CARD_FRAME_CLASS, CARD_MAIN_CLASS, CARD_MEDIA_CLASS, CARD_QUERY_CLASS, CARD_TARGET_STYLE_HREF, CARD_HOVER_CLASS, CARD_VIEWED_CLASS, CardTarget, cardTargetCss, } from "./ListingCard.js";
|
|
92
|
+
import { TITLE_CLAMP_CLASS, TITLE_CLAMP_STYLE_HREF, titleClampCss, } from "./titleClamp.js";
|
|
92
93
|
import { ListingPhotoStrip } from "./ListingPhoto.js";
|
|
93
94
|
import { ListingPrice } from "./ListingPrice.js";
|
|
94
95
|
/** The trailing column. Fixed width contribution: it must not take room from
|
|
@@ -137,7 +138,7 @@ export function ListingSerpCard(props) {
|
|
|
137
138
|
}, children: _jsx(FavoriteHeart, { listingId: listing.id, favorited: listing.is_favorited, testId: "listings-serp-favorite", className: LISTING_CARD_ACTION_CLASS, ...(props.blockedReason !== undefined
|
|
138
139
|
? { blockedReason: props.blockedReason }
|
|
139
140
|
: {}), ...(props.signIn !== undefined ? { signIn: props.signIn } : {}) }) }));
|
|
140
|
-
return (_jsxs(SkinTheme, { surface: "bare", ...(props.mode !== undefined ? { mode: props.mode } : {}), children: [_jsx("style", { href: CARD_TARGET_STYLE_HREF, precedence: "default", children: cardTargetCss() }), _jsx(Card, { size: "small", "data-testid": "listings-serp-card", "data-listing-id": listing.id, ...(status !== undefined
|
|
141
|
+
return (_jsxs(SkinTheme, { surface: "bare", ...(props.mode !== undefined ? { mode: props.mode } : {}), children: [_jsx("style", { href: CARD_TARGET_STYLE_HREF, precedence: "default", children: cardTargetCss() }), _jsx("style", { href: TITLE_CLAMP_STYLE_HREF, precedence: "default", children: titleClampCss() }), _jsx(Card, { size: "small", "data-testid": "listings-serp-card", "data-listing-id": listing.id, ...(status !== undefined
|
|
141
142
|
? { "data-listing-status": status.status }
|
|
142
143
|
: {}),
|
|
143
144
|
// THE PHONE CARD SAYS IT IS A TARGET, TOO (D176). It carried no
|
|
@@ -153,7 +154,7 @@ export function ListingSerpCard(props) {
|
|
|
153
154
|
["--listing-card-hover-shadow"]: token.boxShadowSecondary,
|
|
154
155
|
}, children: _jsx("div", { className: CARD_QUERY_CLASS, children: _jsxs("div", { className: CARD_FRAME_CLASS, style: { gap: spacing[3] }, children: [_jsxs("div", { className: CARD_MEDIA_CLASS, children: [_jsx(ListingPhotoStrip, { images: photos, title: title.length > 0 ? title : String(listing.id), testId: "listings-serp-photos" }), heartOverlay] }), _jsx("div", { className: CARD_MAIN_CLASS, children: _jsxs(Flex, { gap: spacing[3], align: "flex-start", children: [_jsxs(Flex, { vertical: true, gap: spacing[1], style: BODY, children: [_jsxs(CardTarget, { ...openProps(props), listingId: listing.id, label: targetLabel, testId: "listings-serp-open", bodyTestId: "listings-serp-body", children: [props.badge, _jsxs(Flex, { align: "center", gap: spacing[2], wrap: true, children: [_jsx(Typography.Text, { strong: true, style: { fontSize: fontSize.xl.fontSize }, "data-testid": "listings-serp-price", children: _jsx(ListingPrice, { amount: listing.price, ...currency }) }), priceTrend !== undefined && (_jsx(PriceTrendIcon, { direction: priceTrend.direction, label: t(priceTrend.direction === "down"
|
|
155
156
|
? LISTINGS_I18N_KEYS.cardPriceDropped
|
|
156
|
-
: LISTINGS_I18N_KEYS.cardPriceRaised) }))] }), priceTrend !== undefined && (_jsxs(Flex, { align: "baseline", gap: spacing[1], "data-testid": "listings-serp-old-price", children: [_jsx(Typography.Text, { type: "secondary", children: t(LISTINGS_I18N_KEYS.cardPriceWas) }), _jsx(Typography.Text, { type: "secondary", delete: true, children: _jsx(ListingPrice, { amount: priceTrend.oldPrice, ...currency }) })] })), _jsx(Typography.Text, { "data-testid": "listings-serp-title", children: title }), props.specsLine !== undefined && props.specsLine.length > 0 ? (_jsx(Typography.Text, { type: "secondary", ellipsis: true, "data-testid": "listings-serp-specs", children: props.specsLine })) : (_jsx(CardSpecLine, { rows: titleDaos, copy: copy, testId: "listings-serp-specs" })), _jsx(CardBadges, { rows: badgeDaos, copy: copy, variant: "badges" })] }), (props.sellerSlotPosition === "below"
|
|
157
|
+
: LISTINGS_I18N_KEYS.cardPriceRaised) }))] }), priceTrend !== undefined && (_jsxs(Flex, { align: "baseline", gap: spacing[1], "data-testid": "listings-serp-old-price", children: [_jsx(Typography.Text, { type: "secondary", children: t(LISTINGS_I18N_KEYS.cardPriceWas) }), _jsx(Typography.Text, { type: "secondary", delete: true, children: _jsx(ListingPrice, { amount: priceTrend.oldPrice, ...currency }) })] })), _jsx(Typography.Text, { "data-testid": "listings-serp-title", className: TITLE_CLAMP_CLASS, children: title }), props.specsLine !== undefined && props.specsLine.length > 0 ? (_jsx(Typography.Text, { type: "secondary", ellipsis: true, "data-testid": "listings-serp-specs", children: props.specsLine })) : (_jsx(CardSpecLine, { rows: titleDaos, copy: copy, testId: "listings-serp-specs" })), _jsx(CardBadges, { rows: badgeDaos, copy: copy, variant: "badges" })] }), (props.sellerSlotPosition === "below"
|
|
157
158
|
? ["location", "seller"]
|
|
158
159
|
: ["seller", "location"]).map((part) => part === "seller" ? (_jsx(Fragment, { children: props.sellerSlot ?? null }, "seller")) : listing.location_label !== undefined &&
|
|
159
160
|
listing.location_label.length > 0 ? (_jsx(Typography.Text, { type: "secondary", "data-testid": "listings-serp-location", children: listing.location_label }, "location")) : null)] }), rail] }) })] }) }) })] }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListingSerpCard.js","sourceRoot":"","sources":["../../src/default/ListingSerpCard.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"ListingSerpCard.js","sourceRoot":"","sources":["../../src/default/ListingSerpCard.tsx"],"names":[],"mappings":"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"}
|
|
@@ -42,6 +42,27 @@ export declare const TITLE_CLAMP_LINES = 2;
|
|
|
42
42
|
export declare const TITLE_CLAMP_CLASS = "stapel-listing-title-clamp";
|
|
43
43
|
/** The `href` the hoisted stylesheet is deduplicated by. */
|
|
44
44
|
export declare const TITLE_CLAMP_STYLE_HREF = "stapel-listings-title-clamp";
|
|
45
|
-
/**
|
|
45
|
+
/**
|
|
46
|
+
* The rule itself, as text, so a test can assert it.
|
|
47
|
+
*
|
|
48
|
+
* ── Why the class is written TWICE ────────────────────────────────────────
|
|
49
|
+
*
|
|
50
|
+
* `-webkit-line-clamp` does nothing without `display: -webkit-box`, so that
|
|
51
|
+
* one declaration is the whole clamp — and it is the easiest declaration in
|
|
52
|
+
* the rule for a host to overwrite by accident. A single class selector scores
|
|
53
|
+
* (0,1,0), exactly the same as the `[data-testid="…-title"]` selector a
|
|
54
|
+
* container naturally reaches for, so whichever stylesheet loads LAST wins.
|
|
55
|
+
* Measured on a live storefront (2026-09-13): the host set `display: block` on
|
|
56
|
+
* its title testids to stop two inline spans running together, that rule
|
|
57
|
+
* happened to come second, and every clamp in the app went inert — the class
|
|
58
|
+
* was on the element, the sheet was in the head, `-webkit-line-clamp: 2` was
|
|
59
|
+
* in the computed style, and a 113-character title still drew three lines.
|
|
60
|
+
*
|
|
61
|
+
* Repeating the class scores (0,2,0), which outranks any single class or
|
|
62
|
+
* attribute selector whatever the load order, and still loses to a host that
|
|
63
|
+
* really means it (an id, a doubled selector of its own, `!important`). That
|
|
64
|
+
* is the right place on the ladder: a clamp that cannot be overridden at all
|
|
65
|
+
* is a different bug.
|
|
66
|
+
*/
|
|
46
67
|
export declare function titleClampCss(): string;
|
|
47
68
|
//# sourceMappingURL=titleClamp.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"titleClamp.d.ts","sourceRoot":"","sources":["../../src/default/titleClamp.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AAEH,mDAAmD;AACnD,eAAO,MAAM,iBAAiB,IAAI,CAAC;AAEnC,yCAAyC;AACzC,eAAO,MAAM,iBAAiB,+BAA+B,CAAC;AAE9D,4DAA4D;AAC5D,eAAO,MAAM,sBAAsB,gCAAgC,CAAC;AAEpE
|
|
1
|
+
{"version":3,"file":"titleClamp.d.ts","sourceRoot":"","sources":["../../src/default/titleClamp.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AAEH,mDAAmD;AACnD,eAAO,MAAM,iBAAiB,IAAI,CAAC;AAEnC,yCAAyC;AACzC,eAAO,MAAM,iBAAiB,+BAA+B,CAAC;AAE9D,4DAA4D;AAC5D,eAAO,MAAM,sBAAsB,gCAAgC,CAAC;AAEpE;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,aAAa,IAAI,MAAM,CAOtC"}
|
|
@@ -42,9 +42,31 @@ export const TITLE_CLAMP_LINES = 2;
|
|
|
42
42
|
export const TITLE_CLAMP_CLASS = "stapel-listing-title-clamp";
|
|
43
43
|
/** The `href` the hoisted stylesheet is deduplicated by. */
|
|
44
44
|
export const TITLE_CLAMP_STYLE_HREF = "stapel-listings-title-clamp";
|
|
45
|
-
/**
|
|
45
|
+
/**
|
|
46
|
+
* The rule itself, as text, so a test can assert it.
|
|
47
|
+
*
|
|
48
|
+
* ── Why the class is written TWICE ────────────────────────────────────────
|
|
49
|
+
*
|
|
50
|
+
* `-webkit-line-clamp` does nothing without `display: -webkit-box`, so that
|
|
51
|
+
* one declaration is the whole clamp — and it is the easiest declaration in
|
|
52
|
+
* the rule for a host to overwrite by accident. A single class selector scores
|
|
53
|
+
* (0,1,0), exactly the same as the `[data-testid="…-title"]` selector a
|
|
54
|
+
* container naturally reaches for, so whichever stylesheet loads LAST wins.
|
|
55
|
+
* Measured on a live storefront (2026-09-13): the host set `display: block` on
|
|
56
|
+
* its title testids to stop two inline spans running together, that rule
|
|
57
|
+
* happened to come second, and every clamp in the app went inert — the class
|
|
58
|
+
* was on the element, the sheet was in the head, `-webkit-line-clamp: 2` was
|
|
59
|
+
* in the computed style, and a 113-character title still drew three lines.
|
|
60
|
+
*
|
|
61
|
+
* Repeating the class scores (0,2,0), which outranks any single class or
|
|
62
|
+
* attribute selector whatever the load order, and still loses to a host that
|
|
63
|
+
* really means it (an id, a doubled selector of its own, `!important`). That
|
|
64
|
+
* is the right place on the ladder: a clamp that cannot be overridden at all
|
|
65
|
+
* is a different bug.
|
|
66
|
+
*/
|
|
46
67
|
export function titleClampCss() {
|
|
47
|
-
|
|
68
|
+
const self = `.${TITLE_CLAMP_CLASS}.${TITLE_CLAMP_CLASS}`;
|
|
69
|
+
return (`${self}{display:-webkit-box;-webkit-box-orient:vertical;` +
|
|
48
70
|
`-webkit-line-clamp:${String(TITLE_CLAMP_LINES)};overflow:hidden;` +
|
|
49
71
|
`overflow-wrap:normal}`);
|
|
50
72
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"titleClamp.js","sourceRoot":"","sources":["../../src/default/titleClamp.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AAEH,mDAAmD;AACnD,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,CAAC;AAEnC,yCAAyC;AACzC,MAAM,CAAC,MAAM,iBAAiB,GAAG,4BAA4B,CAAC;AAE9D,4DAA4D;AAC5D,MAAM,CAAC,MAAM,sBAAsB,GAAG,6BAA6B,CAAC;AAEpE
|
|
1
|
+
{"version":3,"file":"titleClamp.js","sourceRoot":"","sources":["../../src/default/titleClamp.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AAEH,mDAAmD;AACnD,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,CAAC;AAEnC,yCAAyC;AACzC,MAAM,CAAC,MAAM,iBAAiB,GAAG,4BAA4B,CAAC;AAE9D,4DAA4D;AAC5D,MAAM,CAAC,MAAM,sBAAsB,GAAG,6BAA6B,CAAC;AAEpE;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,UAAU,aAAa;IAC3B,MAAM,IAAI,GAAG,IAAI,iBAAiB,IAAI,iBAAiB,EAAE,CAAC;IAC1D,OAAO,CACL,GAAG,IAAI,mDAAmD;QAC1D,sBAAsB,MAAM,CAAC,iBAAiB,CAAC,mBAAmB;QAClE,uBAAuB,CACxB,CAAC;AACJ,CAAC"}
|
package/llms.txt
CHANGED
package/manifest.json
CHANGED
package/nav-manifest.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stapel/listings-react",
|
|
3
|
-
"version": "0.30.
|
|
3
|
+
"version": "0.30.6",
|
|
4
4
|
"description": "Headless React pair for stapel-listings: a typed client over the draft twin, the composer that turns a category schema into a submittable listing, and the owner's dashboard. Two independent axes are rendered as two — lifecycle `status` decides visibility and `moderation_status` decides nothing about it, so an edit to a live listing stays live and says 'under review' instead of vanishing. Feature values are drawn and mirrored by @stapel/attributes-react; photos arrive as an injected upload bag whose `refs` ARE `images_draft` and whose `settled` gates the submit; a publish refusal is routed onto the control that caused it by slug. Zero visual opinion in the main entry; an opt-in /default subpath ships the antd skin.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -107,6 +107,11 @@ import {
|
|
|
107
107
|
cardTargetCss,
|
|
108
108
|
} from "./ListingCard.js";
|
|
109
109
|
import type { ListingCardOpenProps } from "./ListingCard.js";
|
|
110
|
+
import {
|
|
111
|
+
TITLE_CLAMP_CLASS,
|
|
112
|
+
TITLE_CLAMP_STYLE_HREF,
|
|
113
|
+
titleClampCss,
|
|
114
|
+
} from "./titleClamp.js";
|
|
110
115
|
import { ListingPhotoStrip } from "./ListingPhoto.js";
|
|
111
116
|
import { ListingPrice } from "./ListingPrice.js";
|
|
112
117
|
import type { CategoryFeaturesProp, ThemeModeProp } from "./types.js";
|
|
@@ -278,6 +283,9 @@ export function ListingSerpCard(props: ListingSerpCardProps): ReactElement {
|
|
|
278
283
|
<style href={CARD_TARGET_STYLE_HREF} precedence="default">
|
|
279
284
|
{cardTargetCss()}
|
|
280
285
|
</style>
|
|
286
|
+
<style href={TITLE_CLAMP_STYLE_HREF} precedence="default">
|
|
287
|
+
{titleClampCss()}
|
|
288
|
+
</style>
|
|
281
289
|
<Card
|
|
282
290
|
size="small"
|
|
283
291
|
data-testid="listings-serp-card"
|
|
@@ -372,7 +380,16 @@ export function ListingSerpCard(props: ListingSerpCardProps): ReactElement {
|
|
|
372
380
|
</Flex>
|
|
373
381
|
)}
|
|
374
382
|
|
|
375
|
-
|
|
383
|
+
{/* The clamp is the grid card's and the tile's, from
|
|
384
|
+
`titleClamp.ts`. This card is the DEFAULT view on a
|
|
385
|
+
live storefront, and it was the last of the three
|
|
386
|
+
still answering the question its own way: no clamp at
|
|
387
|
+
all, so a long title ran on for as many lines as it
|
|
388
|
+
wanted and made the row ragged beside its neighbours. */}
|
|
389
|
+
<Typography.Text
|
|
390
|
+
data-testid="listings-serp-title"
|
|
391
|
+
className={TITLE_CLAMP_CLASS}
|
|
392
|
+
>
|
|
376
393
|
{title}
|
|
377
394
|
</Typography.Text>
|
|
378
395
|
|
|
@@ -46,10 +46,32 @@ export const TITLE_CLAMP_CLASS = "stapel-listing-title-clamp";
|
|
|
46
46
|
/** The `href` the hoisted stylesheet is deduplicated by. */
|
|
47
47
|
export const TITLE_CLAMP_STYLE_HREF = "stapel-listings-title-clamp";
|
|
48
48
|
|
|
49
|
-
/**
|
|
49
|
+
/**
|
|
50
|
+
* The rule itself, as text, so a test can assert it.
|
|
51
|
+
*
|
|
52
|
+
* ── Why the class is written TWICE ────────────────────────────────────────
|
|
53
|
+
*
|
|
54
|
+
* `-webkit-line-clamp` does nothing without `display: -webkit-box`, so that
|
|
55
|
+
* one declaration is the whole clamp — and it is the easiest declaration in
|
|
56
|
+
* the rule for a host to overwrite by accident. A single class selector scores
|
|
57
|
+
* (0,1,0), exactly the same as the `[data-testid="…-title"]` selector a
|
|
58
|
+
* container naturally reaches for, so whichever stylesheet loads LAST wins.
|
|
59
|
+
* Measured on a live storefront (2026-09-13): the host set `display: block` on
|
|
60
|
+
* its title testids to stop two inline spans running together, that rule
|
|
61
|
+
* happened to come second, and every clamp in the app went inert — the class
|
|
62
|
+
* was on the element, the sheet was in the head, `-webkit-line-clamp: 2` was
|
|
63
|
+
* in the computed style, and a 113-character title still drew three lines.
|
|
64
|
+
*
|
|
65
|
+
* Repeating the class scores (0,2,0), which outranks any single class or
|
|
66
|
+
* attribute selector whatever the load order, and still loses to a host that
|
|
67
|
+
* really means it (an id, a doubled selector of its own, `!important`). That
|
|
68
|
+
* is the right place on the ladder: a clamp that cannot be overridden at all
|
|
69
|
+
* is a different bug.
|
|
70
|
+
*/
|
|
50
71
|
export function titleClampCss(): string {
|
|
72
|
+
const self = `.${TITLE_CLAMP_CLASS}.${TITLE_CLAMP_CLASS}`;
|
|
51
73
|
return (
|
|
52
|
-
|
|
74
|
+
`${self}{display:-webkit-box;-webkit-box-orient:vertical;` +
|
|
53
75
|
`-webkit-line-clamp:${String(TITLE_CLAMP_LINES)};overflow:hidden;` +
|
|
54
76
|
`overflow-wrap:normal}`
|
|
55
77
|
);
|