@linktr.ee/messaging-react 3.24.0 → 3.24.1
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/dist/assets/index.css +1 -1
- package/package.json +1 -1
- package/src/styles.css +35 -0
package/package.json
CHANGED
package/src/styles.css
CHANGED
|
@@ -19,6 +19,41 @@
|
|
|
19
19
|
padding-bottom: calc(var(--messaging-composer-height, 9rem) + 1.25rem);
|
|
20
20
|
}
|
|
21
21
|
|
|
22
|
+
/* Chat-area side gutter. Figma's `chat-area` frame is `pad 16/32/16/32` across
|
|
23
|
+
every desktop attachment frame (`1962:24885`, `1973:12771`, `2032:22657` and
|
|
24
|
+
five more), so the gutter is a flat 32px.
|
|
25
|
+
|
|
26
|
+
stream-chat-react does set an inline padding, and it is neither absent nor
|
|
27
|
+
8px on desktop: `.str-chat__list .str-chat__message-list-scroll` is
|
|
28
|
+
`padding: 0 var(--str-chat__spacing-2)` (8px) at base, then
|
|
29
|
+
`padding: 0 min(var(--str-chat__spacing-10), 4%)` inside
|
|
30
|
+
`@media only screen and (min-device-width: 768px)` — which measures 40px on
|
|
31
|
+
any screen wide enough for the 2.5rem cap to win. So this rule *narrows*
|
|
32
|
+
40px to the specified 32px; it does not add spacing where there was none.
|
|
33
|
+
|
|
34
|
+
Both stream selectors are two-class, i.e. specificity (0,2,0). A bare
|
|
35
|
+
`.str-chat__message-list-scroll` is (0,1,0) and loses outright, so the
|
|
36
|
+
ancestors below are load-order-independent and deliberate — the same
|
|
37
|
+
technique, for the same reason, as the bubble-radius block further down.
|
|
38
|
+
|
|
39
|
+
Each `.str-chat__li` carries `margin-inline: calc(-1 * <that padding>)` plus
|
|
40
|
+
an equal `padding-inline`, which cancel exactly, so content lands on the
|
|
41
|
+
container's padding edge and rows can still paint full-bleed. Nothing here
|
|
42
|
+
needs to compensate for it.
|
|
43
|
+
|
|
44
|
+
Deliberately keyed to viewport width while stream keys to *device* width.
|
|
45
|
+
A real 393px phone keeps stream's 8px base, matching the 393px frames; only
|
|
46
|
+
a desktop window narrowed below 767px keeps 40px, which is stream's quirk
|
|
47
|
+
and not worth a second override. Those frames are admin mobile-web anyway,
|
|
48
|
+
and this stylesheet also dresses the visitor sheet in linktr.ee-profiles,
|
|
49
|
+
whose spacing comes from a different Figma page.
|
|
50
|
+
Block padding is untouched — the floating rule above owns padding-bottom. */
|
|
51
|
+
@media (min-width: 767px) {
|
|
52
|
+
.str-chat .str-chat__list .str-chat__message-list-scroll {
|
|
53
|
+
padding-inline: 32px;
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
22
57
|
.messaging-channel-layout {
|
|
23
58
|
--messaging-composer-fade-height: 2rem;
|
|
24
59
|
}
|