From 3c991476227e89f34e31de0518bc433471c690b1 Mon Sep 17 00:00:00 2001 From: austincalvelage Date: Wed, 12 Aug 2026 21:17:29 -0600 Subject: [PATCH 1/8] fix(ui): align Section styles --- .../user-profile-section-style-alignment.md | 2 + packages/swingset/src/stories/section.mdx | 4 +- .../swingset/src/stories/section.stories.tsx | 114 +++++++++++------- .../src/mosaic/components/section/section.tsx | 32 +++-- packages/ui/src/mosaic/icons/registry.tsx | 8 ++ packages/ui/src/mosaic/tokens.stylex.ts | 4 +- 6 files changed, 108 insertions(+), 56 deletions(-) create mode 100644 .changeset/user-profile-section-style-alignment.md diff --git a/.changeset/user-profile-section-style-alignment.md b/.changeset/user-profile-section-style-alignment.md new file mode 100644 index 00000000000..a845151cc84 --- /dev/null +++ b/.changeset/user-profile-section-style-alignment.md @@ -0,0 +1,2 @@ +--- +--- diff --git a/packages/swingset/src/stories/section.mdx b/packages/swingset/src/stories/section.mdx index 640904aedb6..c19ff9a638e 100644 --- a/packages/swingset/src/stories/section.mdx +++ b/packages/swingset/src/stories/section.mdx @@ -26,9 +26,9 @@ import { Section } from '@clerk/ui/mosaic/components/section'; ``` -`Section.Group` owns the outlined surface. Its direct `Section.Row` children own separation and may stack one or more `Section.Item` entries. Each item lays out optional media, flexible content, and trailing actions. `Section.Media` accepts `md` and `lg` sizes. +`Section.Group` owns the outlined surface. Its direct `Section.Row` children own separation and may stack one or more `Section.Item` entries. Each item lays out optional media, flexible content, and trailing actions. `Section.Media` accepts `sm`, `md`, `lg`, and `xl` sizes. -Use `Section.Items` for a nested value list beneath a row's header item. The row keeps an 8px header-to-list gap, nested items stack without gaps at a 44px minimum height, and their content receives 12px vertical padding. +Use `Section.Items` for a nested value list beneath a row's header item. The row keeps a 12px header-to-list gap, and nested items stack without gaps with 4px vertical padding. ## Examples diff --git a/packages/swingset/src/stories/section.stories.tsx b/packages/swingset/src/stories/section.stories.tsx index 44dfec684c8..5b9c0fc7df7 100644 --- a/packages/swingset/src/stories/section.stories.tsx +++ b/packages/swingset/src/stories/section.stories.tsx @@ -3,6 +3,7 @@ import { Badge } from '@clerk/ui/mosaic/components/badge'; import { Button } from '@clerk/ui/mosaic/components/button'; import { Icon } from '@clerk/ui/mosaic/components/icon'; import { Section } from '@clerk/ui/mosaic/components/section'; +import * as stylex from '@stylexjs/stylex'; import type { StoryMeta } from '@/lib/types'; @@ -10,13 +11,33 @@ export { default as __source } from './section.stories?raw'; const providerIconUrl = (provider: string) => `https://img.clerk.com/static/${provider}.svg`; +const styles = stylex.create({ + providerMedia: { + backgroundColor: 'var(--cl-color-background)', + borderColor: 'light-dark(var(--cl-color-border-faded), var(--cl-color-background))', + borderRadius: 'var(--cl-radius-lg)', + borderStyle: 'solid', + borderWidth: '1px', + }, + providerIcon: { + display: 'block', + height: '20px', + width: '20px', + }, +}); + function ProviderIcon({ provider }: { provider: string }) { return ( - + + + ); } @@ -32,19 +53,28 @@ export function Default() { Profile - - - Profile picture - PNG or JPEG, Recommended size 1:1, up to 10MB. - - - + + + PB + + + Profile picture + Recommend size 1:1, up to 10MB. + + + @@ -61,7 +91,7 @@ export function Default() { size='sm' variant='outline' > - Update name + Edit name @@ -79,7 +109,7 @@ export function Default() { size='sm' variant='outline' > - Update username + Edit username @@ -113,19 +143,28 @@ export function MultipleEmailAndPhoneNumbers() { Profile - - - Profile picture - PNG or JPEG, Recommended size 1:1, up to 10MB. - - - + + + PB + + + Profile picture + Recommend size 1:1, up to 10MB. + + + @@ -142,7 +181,7 @@ export function MultipleEmailAndPhoneNumbers() { size='sm' variant='outline' > - Update name + Edit name @@ -160,7 +199,7 @@ export function MultipleEmailAndPhoneNumbers() { size='sm' variant='outline' > - Update username + Edit username @@ -177,12 +216,7 @@ export function MultipleEmailAndPhoneNumbers() { size='sm' variant='outline' > - Add - + Add email @@ -236,12 +270,7 @@ export function MultipleEmailAndPhoneNumbers() { size='sm' variant='outline' > - Add - + Add phone number @@ -279,9 +308,7 @@ export function ConnectedAccounts() { - - - + Google test@google.com @@ -301,9 +328,7 @@ export function ConnectedAccounts() { - - - + Apple @@ -314,6 +339,11 @@ export function ConnectedAccounts() { variant='outline' > Connect + @@ -340,7 +370,7 @@ export function Destructive() { diff --git a/packages/ui/src/mosaic/components/section/section.tsx b/packages/ui/src/mosaic/components/section/section.tsx index 601e9bddfab..e85867a5dea 100644 --- a/packages/ui/src/mosaic/components/section/section.tsx +++ b/packages/ui/src/mosaic/components/section/section.tsx @@ -17,7 +17,7 @@ export type SectionGroupProps = MosaicComponentProps<'div'>; export type SectionRowProps = MosaicComponentProps<'div'>; export type SectionItemsProps = MosaicComponentProps<'div'>; export type SectionItemProps = MosaicComponentProps<'div'>; -export type SectionMediaSize = 'sm' | 'md' | 'lg'; +export type SectionMediaSize = 'sm' | 'md' | 'lg' | 'xl'; export type SectionMediaProps = MosaicComponentProps<'div'> & { size?: SectionMediaSize }; export type SectionContentProps = MosaicComponentProps<'div'>; export type SectionLabelProps = MosaicComponentProps<'div'>; @@ -33,13 +33,19 @@ const styles = stylex.create({ rowGap: space['2'], width: '100%', }, + title: { + alignItems: 'center', + display: 'flex', + fontWeight: fontWeightVars['--cl-font-medium'], + minHeight: space['8'], + }, group: { borderColor: colorVars['--cl-color-border'], borderRadius: radiusVars['--cl-radius-xl'], borderStyle: 'solid', borderWidth: '1px', overflow: 'hidden', - backgroundColor: colorVars['--cl-color-background'], + backgroundColor: colorVars['--cl-color-card'], width: '100%', }, row: { @@ -52,12 +58,16 @@ const styles = stylex.create({ }, display: 'flex', flexDirection: 'column', + minHeight: '75px', paddingBlockEnd: { default: space['4'], [stylex.when.descendant('[data-nested]', sectionItemsMarker)]: space['1'], }, paddingBlockStart: space['4'], - rowGap: space['2'], + rowGap: { + default: space['2'], + [stylex.when.descendant('[data-nested]', sectionItemsMarker)]: space['3'], + }, width: 'auto', }, items: { @@ -74,7 +84,7 @@ const styles = stylex.create({ width: '100%', }, nestedItem: { - minHeight: space['11'], + paddingBlock: space['1'], }, mediaBase: { alignItems: 'center', @@ -96,6 +106,10 @@ const styles = stylex.create({ height: space['8'], width: space['8'], }, + mediaXl: { + height: space['10'], + width: space['10'], + }, content: { display: 'flex', flexDirection: 'column', @@ -104,9 +118,6 @@ const styles = stylex.create({ rowGap: space['0.5'], minWidth: 0, }, - nestedContent: { - paddingBlock: space['3'], - }, label: { color: colorVars['--cl-color-card-foreground'], fontSize: typeScaleVars['--cl-text-sm-size'], @@ -116,7 +127,7 @@ const styles = stylex.create({ description: { color: colorVars['--cl-color-neutral-faded'], fontSize: typeScaleVars['--cl-text-sm-size'], - fontWeight: fontWeightVars['--cl-font-medium'], + fontWeight: fontWeightVars['--cl-font-normal'], lineHeight: typeScaleVars['--cl-text-sm-leading'], textWrap: 'balance', }, @@ -134,6 +145,7 @@ const mediaSizes = { sm: styles.mediaSm, md: styles.mediaMd, lg: styles.mediaLg, + xl: styles.mediaXl, }; const SectionTitleContext = React.createContext> | null>(null); @@ -183,7 +195,7 @@ const Title = React.forwardRef(function S id={id} render={render ?? (props =>

)} size='sm' - {...mergeStyleProps(themeProps('section-title'), className, style)} + {...mergeStyleProps(themeProps('section-title'), stylex.props(styles.title), className, style)} {...rest} /> ); @@ -296,7 +308,7 @@ const Content = React.forwardRef(function S props: { ...mergeStyleProps( themeProps('section-content', { nested }), - stylex.props(reset.base, styles.content, nested && styles.nestedContent), + stylex.props(reset.base, styles.content), className, style, ), diff --git a/packages/ui/src/mosaic/icons/registry.tsx b/packages/ui/src/mosaic/icons/registry.tsx index 26a28cda818..a652c87c706 100644 --- a/packages/ui/src/mosaic/icons/registry.tsx +++ b/packages/ui/src/mosaic/icons/registry.tsx @@ -94,6 +94,13 @@ const Plus = glyph( />, ); +const ArrowRightTop = glyph( + , +); + const Pen = glyph( Date: Thu, 13 Aug 2026 16:25:35 -0600 Subject: [PATCH 2/8] fix(ui): use spacing tokens for Section row height --- .changeset/extend-mosaic-spacing-scale.md | 2 + .../src/mosaic/components/section/section.tsx | 2 +- packages/ui/src/mosaic/tokens.stylex.ts | 62 +++++++++++++++++++ 3 files changed, 65 insertions(+), 1 deletion(-) create mode 100644 .changeset/extend-mosaic-spacing-scale.md diff --git a/.changeset/extend-mosaic-spacing-scale.md b/.changeset/extend-mosaic-spacing-scale.md new file mode 100644 index 00000000000..a845151cc84 --- /dev/null +++ b/.changeset/extend-mosaic-spacing-scale.md @@ -0,0 +1,2 @@ +--- +--- diff --git a/packages/ui/src/mosaic/components/section/section.tsx b/packages/ui/src/mosaic/components/section/section.tsx index e85867a5dea..9609c34bf99 100644 --- a/packages/ui/src/mosaic/components/section/section.tsx +++ b/packages/ui/src/mosaic/components/section/section.tsx @@ -58,7 +58,6 @@ const styles = stylex.create({ }, display: 'flex', flexDirection: 'column', - minHeight: '75px', paddingBlockEnd: { default: space['4'], [stylex.when.descendant('[data-nested]', sectionItemsMarker)]: space['1'], @@ -68,6 +67,7 @@ const styles = stylex.create({ default: space['2'], [stylex.when.descendant('[data-nested]', sectionItemsMarker)]: space['3'], }, + minHeight: `calc(${space['18.5']} + 1px)`, width: 'auto', }, items: { diff --git a/packages/ui/src/mosaic/tokens.stylex.ts b/packages/ui/src/mosaic/tokens.stylex.ts index 94fee6a38e7..7d285c86ae2 100644 --- a/packages/ui/src/mosaic/tokens.stylex.ts +++ b/packages/ui/src/mosaic/tokens.stylex.ts @@ -205,14 +205,76 @@ export const space = stylex.defineVars({ '4': step(4), '4.5': step(4.5), '5': step(5), + '5.5': step(5.5), '6': step(6), + '6.5': step(6.5), '7': step(7), + '7.5': step(7.5), '8': step(8), + '8.5': step(8.5), '9': step(9), + '9.5': step(9.5), '10': step(10), + '10.5': step(10.5), '11': step(11), + '11.5': step(11.5), '12': step(12), + '12.5': step(12.5), '13': step(13), + '13.5': step(13.5), + '14': step(14), + '14.5': step(14.5), + '15': step(15), + '15.5': step(15.5), + '16': step(16), + '16.5': step(16.5), + '17': step(17), + '17.5': step(17.5), + '18': step(18), + '18.5': step(18.5), + '19': step(19), + '19.5': step(19.5), + '20': step(20), + '20.5': step(20.5), + '21': step(21), + '21.5': step(21.5), + '22': step(22), + '22.5': step(22.5), + '23': step(23), + '23.5': step(23.5), + '24': step(24), + '24.5': step(24.5), + '25': step(25), + '25.5': step(25.5), + '26': step(26), + '26.5': step(26.5), + '27': step(27), + '27.5': step(27.5), + '28': step(28), + '28.5': step(28.5), + '29': step(29), + '29.5': step(29.5), + '30': step(30), + '30.5': step(30.5), + '31': step(31), + '31.5': step(31.5), + '32': step(32), + '32.5': step(32.5), + '33': step(33), + '33.5': step(33.5), + '34': step(34), + '34.5': step(34.5), + '35': step(35), + '35.5': step(35.5), + '36': step(36), + '36.5': step(36.5), + '37': step(37), + '37.5': step(37.5), + '38': step(38), + '38.5': step(38.5), + '39': step(39), + '39.5': step(39.5), + '40': step(40), }); // ============================================================================= From ff944125797d5e5881a041b4a6f15f6d1b3bfa6e Mon Sep 17 00:00:00 2001 From: austincalvelage Date: Fri, 14 Aug 2026 13:06:30 -0600 Subject: [PATCH 3/8] fix(swingset): remove section column gap overrides --- packages/swingset/src/stories/section.stories.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/swingset/src/stories/section.stories.tsx b/packages/swingset/src/stories/section.stories.tsx index 5b9c0fc7df7..19f8eb49a80 100644 --- a/packages/swingset/src/stories/section.stories.tsx +++ b/packages/swingset/src/stories/section.stories.tsx @@ -53,7 +53,7 @@ export function Default() { Profile - + Profile - + Date: Fri, 14 Aug 2026 13:12:15 -0600 Subject: [PATCH 4/8] fix(ui): rely on line height for section title --- packages/ui/src/mosaic/components/section/section.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/ui/src/mosaic/components/section/section.tsx b/packages/ui/src/mosaic/components/section/section.tsx index 9609c34bf99..3c6ffdf77c5 100644 --- a/packages/ui/src/mosaic/components/section/section.tsx +++ b/packages/ui/src/mosaic/components/section/section.tsx @@ -34,10 +34,7 @@ const styles = stylex.create({ width: '100%', }, title: { - alignItems: 'center', - display: 'flex', fontWeight: fontWeightVars['--cl-font-medium'], - minHeight: space['8'], }, group: { borderColor: colorVars['--cl-color-border'], From 44b777215610c456244fae3331b4df2a25e582c4 Mon Sep 17 00:00:00 2001 From: austincalvelage Date: Fri, 14 Aug 2026 13:18:45 -0600 Subject: [PATCH 5/8] fix(ui): rely on section item gap for actions --- packages/ui/src/mosaic/components/section/section.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/ui/src/mosaic/components/section/section.tsx b/packages/ui/src/mosaic/components/section/section.tsx index 3c6ffdf77c5..2b92bbaba9f 100644 --- a/packages/ui/src/mosaic/components/section/section.tsx +++ b/packages/ui/src/mosaic/components/section/section.tsx @@ -133,7 +133,6 @@ const styles = stylex.create({ display: 'flex', flexShrink: 0, justifyContent: 'flex-end', - marginInlineStart: space['3'], }, }); /* eslint-enable @stylexjs/no-lookahead-selectors */ From b73694c38bf106727e1f8b38b62c3bdddb70e63e Mon Sep 17 00:00:00 2001 From: austincalvelage Date: Fri, 14 Aug 2026 13:42:12 -0600 Subject: [PATCH 6/8] fix(ui): size xl Section media at 42px --- packages/ui/src/mosaic/components/section/section.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ui/src/mosaic/components/section/section.tsx b/packages/ui/src/mosaic/components/section/section.tsx index 2b92bbaba9f..d65b93e8243 100644 --- a/packages/ui/src/mosaic/components/section/section.tsx +++ b/packages/ui/src/mosaic/components/section/section.tsx @@ -104,8 +104,8 @@ const styles = stylex.create({ width: space['8'], }, mediaXl: { - height: space['10'], - width: space['10'], + height: space['10.5'], + width: space['10.5'], }, content: { display: 'flex', From 5622c9a6ea9e866e9efc106a404dd8dc278113f1 Mon Sep 17 00:00:00 2001 From: austincalvelage Date: Fri, 14 Aug 2026 13:53:01 -0600 Subject: [PATCH 7/8] refactor(ui): extract Section styles --- .../components/section/section.styles.ts | 117 ++++++++++++++++++ .../src/mosaic/components/section/section.tsx | 115 +---------------- 2 files changed, 118 insertions(+), 114 deletions(-) create mode 100644 packages/ui/src/mosaic/components/section/section.styles.ts diff --git a/packages/ui/src/mosaic/components/section/section.styles.ts b/packages/ui/src/mosaic/components/section/section.styles.ts new file mode 100644 index 00000000000..91cc4210745 --- /dev/null +++ b/packages/ui/src/mosaic/components/section/section.styles.ts @@ -0,0 +1,117 @@ +import * as stylex from '@stylexjs/stylex'; + +import { colorVars, fontWeightVars, radiusVars, space, typeScaleVars } from '../../tokens.stylex'; +import { sectionItemsMarker } from './section.markers.stylex'; + +/* eslint-disable @stylexjs/no-lookahead-selectors -- Mosaic's supported browsers include :has(); + the marker keeps this selector scoped to Section.Items. */ +export const styles = stylex.create({ + root: { + display: 'flex', + flexDirection: 'column', + rowGap: space['2'], + width: '100%', + }, + title: { + fontWeight: fontWeightVars['--cl-font-medium'], + }, + group: { + borderColor: colorVars['--cl-color-border'], + borderRadius: radiusVars['--cl-radius-xl'], + borderStyle: 'solid', + borderWidth: '1px', + overflow: 'hidden', + backgroundColor: colorVars['--cl-color-card'], + width: '100%', + }, + row: { + marginInline: space['4'], + borderBlockStartColor: colorVars['--cl-color-border'], + borderBlockStartStyle: 'solid', + borderBlockStartWidth: { + default: '1px', + ':first-child': '0px', + }, + display: 'flex', + flexDirection: 'column', + paddingBlockEnd: { + default: space['4'], + [stylex.when.descendant('[data-nested]', sectionItemsMarker)]: space['1'], + }, + paddingBlockStart: space['4'], + rowGap: { + default: space['2'], + [stylex.when.descendant('[data-nested]', sectionItemsMarker)]: space['3'], + }, + minHeight: `calc(${space['18.5']} + 1px)`, + width: 'auto', + }, + items: { + display: 'flex', + flexDirection: 'column', + width: '100%', + }, + item: { + alignItems: 'center', + columnGap: space['3'], + display: 'flex', + flexWrap: 'nowrap', + justifyContent: 'space-between', + width: '100%', + }, + nestedItem: { + paddingBlock: space['1'], + }, + mediaBase: { + alignItems: 'center', + alignSelf: 'center', + aspectRatio: '1/1', + display: 'flex', + flexShrink: 0, + justifyContent: 'center', + }, + mediaSm: { + height: space['4'], + width: space['4'], + }, + mediaMd: { + height: space['6'], + width: space['6'], + }, + mediaLg: { + height: space['8'], + width: space['8'], + }, + mediaXl: { + height: space['10.5'], + width: space['10.5'], + }, + content: { + display: 'flex', + flexDirection: 'column', + flexGrow: 1, + justifyContent: 'center', + rowGap: space['0.5'], + minWidth: 0, + }, + label: { + color: colorVars['--cl-color-card-foreground'], + fontSize: typeScaleVars['--cl-text-sm-size'], + fontWeight: fontWeightVars['--cl-font-medium'], + lineHeight: typeScaleVars['--cl-text-sm-leading'], + }, + description: { + color: colorVars['--cl-color-neutral-faded'], + fontSize: typeScaleVars['--cl-text-sm-size'], + fontWeight: fontWeightVars['--cl-font-normal'], + lineHeight: typeScaleVars['--cl-text-sm-leading'], + textWrap: 'balance', + }, + actions: { + alignItems: 'center', + display: 'flex', + flexShrink: 0, + justifyContent: 'flex-end', + }, +}); +/* eslint-enable @stylexjs/no-lookahead-selectors */ diff --git a/packages/ui/src/mosaic/components/section/section.tsx b/packages/ui/src/mosaic/components/section/section.tsx index d65b93e8243..944166d2a8e 100644 --- a/packages/ui/src/mosaic/components/section/section.tsx +++ b/packages/ui/src/mosaic/components/section/section.tsx @@ -5,11 +5,11 @@ import React from 'react'; import type { MosaicComponentProps } from '../../props'; import { mergeStyleProps, themeProps } from '../../props'; -import { colorVars, fontWeightVars, radiusVars, space, typeScaleVars } from '../../tokens.stylex'; import type { HeadingProps } from '../heading'; import { Heading } from '../heading'; import { reset } from '../reset.styles'; import { sectionItemsMarker } from './section.markers.stylex'; +import { styles } from './section.styles'; export type SectionRootProps = Omit, 'title'>; export type SectionTitleProps = Omit; @@ -24,119 +24,6 @@ export type SectionLabelProps = MosaicComponentProps<'div'>; export type SectionDescriptionProps = MosaicComponentProps<'div'>; export type SectionActionsProps = MosaicComponentProps<'div'>; -/* eslint-disable @stylexjs/no-lookahead-selectors -- Mosaic's supported browsers include :has(); - the marker keeps this selector scoped to Section.Items. */ -const styles = stylex.create({ - root: { - display: 'flex', - flexDirection: 'column', - rowGap: space['2'], - width: '100%', - }, - title: { - fontWeight: fontWeightVars['--cl-font-medium'], - }, - group: { - borderColor: colorVars['--cl-color-border'], - borderRadius: radiusVars['--cl-radius-xl'], - borderStyle: 'solid', - borderWidth: '1px', - overflow: 'hidden', - backgroundColor: colorVars['--cl-color-card'], - width: '100%', - }, - row: { - marginInline: space['4'], - borderBlockStartColor: colorVars['--cl-color-border'], - borderBlockStartStyle: 'solid', - borderBlockStartWidth: { - default: '1px', - ':first-child': '0px', - }, - display: 'flex', - flexDirection: 'column', - paddingBlockEnd: { - default: space['4'], - [stylex.when.descendant('[data-nested]', sectionItemsMarker)]: space['1'], - }, - paddingBlockStart: space['4'], - rowGap: { - default: space['2'], - [stylex.when.descendant('[data-nested]', sectionItemsMarker)]: space['3'], - }, - minHeight: `calc(${space['18.5']} + 1px)`, - width: 'auto', - }, - items: { - display: 'flex', - flexDirection: 'column', - width: '100%', - }, - item: { - alignItems: 'center', - columnGap: space['3'], - display: 'flex', - flexWrap: 'nowrap', - justifyContent: 'space-between', - width: '100%', - }, - nestedItem: { - paddingBlock: space['1'], - }, - mediaBase: { - alignItems: 'center', - alignSelf: 'center', - aspectRatio: '1/1', - display: 'flex', - flexShrink: 0, - justifyContent: 'center', - }, - mediaSm: { - height: space['4'], - width: space['4'], - }, - mediaMd: { - height: space['6'], - width: space['6'], - }, - mediaLg: { - height: space['8'], - width: space['8'], - }, - mediaXl: { - height: space['10.5'], - width: space['10.5'], - }, - content: { - display: 'flex', - flexDirection: 'column', - flexGrow: 1, - justifyContent: 'center', - rowGap: space['0.5'], - minWidth: 0, - }, - label: { - color: colorVars['--cl-color-card-foreground'], - fontSize: typeScaleVars['--cl-text-sm-size'], - fontWeight: fontWeightVars['--cl-font-medium'], - lineHeight: typeScaleVars['--cl-text-sm-leading'], - }, - description: { - color: colorVars['--cl-color-neutral-faded'], - fontSize: typeScaleVars['--cl-text-sm-size'], - fontWeight: fontWeightVars['--cl-font-normal'], - lineHeight: typeScaleVars['--cl-text-sm-leading'], - textWrap: 'balance', - }, - actions: { - alignItems: 'center', - display: 'flex', - flexShrink: 0, - justifyContent: 'flex-end', - }, -}); -/* eslint-enable @stylexjs/no-lookahead-selectors */ - const mediaSizes = { sm: styles.mediaSm, md: styles.mediaMd, From 886d4721a454eefad1db722223b38938da350a6a Mon Sep 17 00:00:00 2001 From: austincalvelage Date: Fri, 14 Aug 2026 13:58:18 -0600 Subject: [PATCH 8/8] fix(ui): extend Section media size scale --- packages/swingset/src/stories/section.stories.tsx | 6 +++--- .../ui/src/mosaic/components/section/section.styles.ts | 8 ++++---- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/swingset/src/stories/section.stories.tsx b/packages/swingset/src/stories/section.stories.tsx index 19f8eb49a80..6cdc9b945c8 100644 --- a/packages/swingset/src/stories/section.stories.tsx +++ b/packages/swingset/src/stories/section.stories.tsx @@ -29,7 +29,7 @@ const styles = stylex.create({ function ProviderIcon({ provider }: { provider: string }) { return ( - + - +