Align web gutters in dialog

src/alf/util/useGutters.ts

@@ -31,10 +31,10 @@ const gutters: Record<
 }
 
 type Gutters = {
-  paddingTop?: number
-  paddingRight?: number
-  paddingBottom?: number
-  paddingLeft?: number
+  paddingTop: number
+  paddingRight: number
+  paddingBottom: number
+  paddingLeft: number
 }
 
 export function useGutters([all]: [Gutter]): Gutters
@@ -57,16 +57,13 @@ export function useGutters([top, right, bottom, left]: Gutter[]) {
     }
 
     return {
-      paddingTop:
-        top === 0 ? undefined : gutters[top][activeBreakpoint || 'default'],
+      paddingTop: top === 0 ? 0 : gutters[top][activeBreakpoint || 'default'],
       paddingRight:
-        right === 0 ? undefined : gutters[right][activeBreakpoint || 'default'],
+        right === 0 ? 0 : gutters[right][activeBreakpoint || 'default'],
       paddingBottom:
-        bottom === 0
-          ? undefined
-          : gutters[bottom][activeBreakpoint || 'default'],
+        bottom === 0 ? 0 : gutters[bottom][activeBreakpoint || 'default'],
       paddingLeft:
-        left === 0 ? undefined : gutters[left][activeBreakpoint || 'default'],
+        left === 0 ? 0 : gutters[left][activeBreakpoint || 'default'],
     }
   }, [activeBreakpoint, top, bottom, left, right])
 }

src/components/Dialog/index.web.tsx

@@ -16,7 +16,14 @@ import {RemoveScrollBar} from 'react-remove-scroll-bar'
 
 import {logger} from '#/logger'
 import {useDialogStateControlContext} from '#/state/dialogs'
-import {atoms as a, flatten, useBreakpoints, useTheme, web} from '#/alf'
+import {
+  atoms as a,
+  flatten,
+  useBreakpoints,
+  useGutters,
+  useTheme,
+  web,
+} from '#/alf'
 import {Button, ButtonIcon} from '#/components/Button'
 import {Context} from '#/components/Dialog/context'
 import {
@@ -150,8 +157,8 @@ export function Inner({
   contentContainerStyle,
 }: DialogInnerProps) {
   const t = useTheme()
+  const gutters = useGutters(['wide'])
   const {close} = React.useContext(Context)
-  const {gtMobile} = useBreakpoints()
   useFocusGuards()
   return (
     <FocusScope loop asChild trapped>
@@ -188,9 +195,7 @@ export function Inner({
           onDismiss={close}
           style={{display: 'flex', flexDirection: 'column'}}>
           {header}
-          <View style={[gtMobile ? a.p_2xl : a.p_xl, contentContainerStyle]}>
-            {children}
-          </View>
+          <View style={[gutters, contentContainerStyle]}>{children}</View>
         </DismissableLayer>
       </View>
     </FocusScope>

src/components/dialogs/BlueskyPlusCore/index.tsx

@@ -15,7 +15,7 @@ import {
 import {parseOfferingId} from '#/state/purchases/types'
 import {useSession} from '#/state/session'
 import * as Toast from '#/view/com/util/Toast'
-import {atoms as a, tokens, useBreakpoints, useTheme} from '#/alf'
+import {atoms as a, tokens, useBreakpoints, useGutters,useTheme} from '#/alf'
 import {Admonition} from '#/components/Admonition'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
@@ -48,6 +48,7 @@ export function BlueskyPlusCore({
 function DialogInner({control}: {control: Dialog.DialogControlProps}) {
   const t = useTheme()
   const {_} = useLingui()
+  const dialogGutters = useGutters(['wide'])
   const {gtMobile} = useBreakpoints()
   const {currentAccount} = useSession()
   const copy = useCoreOfferingCopy()
@@ -162,10 +163,10 @@ function DialogInner({control}: {control: Dialog.DialogControlProps}) {
               ? undefined
               : {borderTopLeftRadius: 20, borderTopRightRadius: 20},
             {
-              top: (a.p_xl.padding + 4) * -1,
+              top: dialogGutters.paddingTop * -1,
               bottom: 0,
-              left: a.p_xl.padding * -1,
-              right: a.p_xl.padding * -1,
+              left: dialogGutters.paddingLeft * -1,
+              right: dialogGutters.paddingRight * -1,
             },
           ]}>
           <GradientFill gradient={tokens.gradients.nordic} />