use round() in transforms

[mayank99]

Changes

This PR helps with #1551 by rounding some percentage values to the nearest pixel, using the brand-new round() CSS function. This is mainly in transforms in dialog and expandable-block. And for browsers that don't support round(), the unrounded fallback will continue to be used.

Unrelated to the round() change but might possibly help towards #1551: simplified information-panel to remove transform: translate(0).

I don't think this PR is the "ultimate" fix, so I'm not linking the issue to be closed. But it's a small net improvement nonetheless.

Implementation notes:

• I had to use Round() instead of round() to disambiguate from the Sass round() function.
• I had to add @supports blocks which would normally be unnecessary, because lightningcss was trying to "minify" the CSS by removing repeated instances of the same property.

Testing

I tried to test in my Windows VM with some of the sandboxes linked in #1551. It was somewhat difficult to reproduce the issues in the first place, but I did see an improvement in at least one situation:

Screenshots

Before	After

Further testing on a real Windows machine would be useful. (Make sure to update to Chrome 125)

Docs

Added changesets.

[Ben-Pusey-Bentley]

@Ben-Pusey-Bentley I don't see much of a difference (the "Before" text is not even blurry, at least in the screenshots). It would be nice to find a reproducible issue first. Try this and this and this

This code shows the improvement better:

Code

import * as React from 'react';
import {
  ExpandableBlock,
  Flex,
  Modal,
  ModalContent,
  Table,
  ToggleSwitch,
} from '@itwin/itwinui-react';

export default function App({
  isDvh,
  setIsDvh,
}: {
  isDvh: boolean;
  setIsDvh: (value: boolean) => void;
}) {
  const packageInfo = {
    '@bentley/documents-management': '2.1.7-dev.0',
    '@bentley/formsrenderer': '1.102.0',
    '@bentley/office365-collaboration-login-modal': '1.2.0',
    '@bentley/office365-collaboration-settings': '1.2.2',
    '@bentley/pw-api': '1.1.0-dev.1',
    '@bentley/pw-i18n': '1.0.4-dev.0',
    '@bentley/pwnxt-document-picker': '3.4.1',
    '@bentley/supply-chain-components': '0.0.3-beta.1',
    '@itwin/itwinui-react': '2.12.19',
  };

  return (
    <>
      <Modal isOpen={true} title="Connection info">
        <ModalContent>
          <Flex flexDirection="column" alignItems="stretch">
            <ToggleSwitch
              label="Use DVH units"
              defaultChecked={isDvh}
              onChange={() => setIsDvh(!isDvh)}
            />
            <ExpandableBlock
              title="Package versions"
              size="small"
              isExpanded={true}
            >
              <Table
                columns={[
                  { Header: 'Package', accessor: 'name' },
                  { Header: 'Version', accessor: 'version' },
                ]}
                emptyTableContent="No data"
                data={Object.entries(packageInfo).map(([name, version]) => ({
                  name,
                  version,
                }))}
                density="extra-condensed"
                style={{ maxHeight: '200px' }}
              />
            </ExpandableBlock>
          </Flex>
        </ModalContent>
      </Modal>
    </>
  );
}

Before:

After:

The header text is still blurry in the after image, but the text inside of the table rows isn't blurry anymore.