fix: responsive dialog size

[LimeWub]

Description

When Dialog responsive sizing is used with fullscreen, the height never returns back to normal. This is due to how stitches and css works, if a style property has not been overwritten it just keeps applying to the document.

Implementation

Reset all relevant (size) CSS properties on every size variant of the Dialog

Screenshots

With sandbox code:

import * as React from 'react'
import * as ReactDOM from 'react-dom'
import { reset } from 'stitches-reset'

import { Box, Flex, globalCss, Dialog, Button } from '../src'

globalCss({ ...reset, '*': { boxSizing: 'border-box' } })()

const App = () => (
  <Flex
    css={{
      minHeight: '100vh',
      justifyContent: 'center',
      alignItems: 'center',
      flexDirection: 'column'
    }}
  >
    <Dialog open>
      <Dialog.Trigger asChild>
        <Button>Open Dialog</Button>
      </Dialog.Trigger>
      <Dialog.Content
        size={{ '@initial': 'fullscreen', '@md': 'xl' }}
      >
        <Box css={{ size: 500, bg: 'red', color: 'white' }}>content</Box>
      </Dialog.Content>
    </Dialog>
  </Flex>
)

ReactDOM.render(<App />, document.getElementById('root'))

before

https://github.com/user-attachments/assets/e2cd8c32-de1d-44a1-bfc6-6f1dd8cd8814

after

https://github.com/user-attachments/assets/d8a39242-471b-4534-941c-93abf84cd43c