a tool for shared writing and social publishing
use unitless card width in spacer components
+3
-4
+3
-4
components/Cards.tsx
+3
-4
components/Cards.tsx
···
18
18
19
19
export function Cards(props: { rootCard: string }) {
20
20
let openCards = useUIState((s) => s.openCards);
21
-
let [cardRef, { width: cardWidth }] = useMeasure();
22
21
23
22
return (
24
23
<div
···
30
29
>
31
30
<div
32
31
className="spacer flex justify-end items-start"
33
-
style={{ width: `calc(50vw - ${cardWidth}px/2)` }}
32
+
style={{ width: `calc(50vw - (1px * (var(--card-width-unitless)/2))` }}
34
33
onClick={(e) => {
35
34
e.currentTarget === e.target && blurCard();
36
35
}}
···
46
45
</div>
47
46
</Media>
48
47
</div>
49
-
<div className="flex items-stretch" ref={cardRef}>
48
+
<div className="flex items-stretch">
50
49
<Card entityID={props.rootCard} first />
51
50
</div>
52
51
{openCards.map((card) => (
···
56
55
))}
57
56
<div
58
57
className="spacer"
59
-
style={{ width: `calc((100vw - ${cardWidth}px)/2)` }}
58
+
style={{ width: `calc(50vw - (1px * (var(--card-width-unitless)/2))` }}
60
59
onClick={(e) => {
61
60
e.currentTarget === e.target && blurCard();
62
61
}}