From d569525643d1dcf9c2cca78bc3b5ce18b7f584d1 Mon Sep 17 00:00:00 2001
From: Anna Mistele <aemandine@gmail.com>
Date: Wed, 4 Sep 2024 14:56:16 -0700
Subject: [PATCH] Adjust sizing (#1589)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary:
* Make PhET widget smaller

<img width="1117" alt="Storybook editor page with a PhET widget that has approximately a 16:9 aspect ratio and that does not leave its bounding box" src="https://github.com/user-attachments/assets/f6299524-98eb-424b-861f-81c4050745da">

Issue: LEMS-2306

## Test plan:
* `yarn jest packages/perseus/src/widgets/phet-simulation/phet-simulation.test.ts`
* Verify that the widget seems to have an appropriate aspect ratio in Storybook

Author: aemandine

Reviewers: SonicScrewdriver, aemandine

Required Reviewers:

Approved By: SonicScrewdriver

Checks: ✅ codecov/project, ✅ codecov/patch, ✅ Upload Coverage (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Jest Coverage (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ gerald

Pull Request URL: https://github.com/Khan/perseus/pull/1589
---
 .changeset/nasty-balloons-type.md                        | 5 +++++
 .../src/widgets/phet-simulation/phet-simulation.tsx      | 9 +++++----
 2 files changed, 10 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/nasty-balloons-type.md

diff --git a/.changeset/nasty-balloons-type.md b/.changeset/nasty-balloons-type.md
new file mode 100644
index 0000000000..fe30ec5514
--- /dev/null
+++ b/.changeset/nasty-balloons-type.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus": patch
+---
+
+Make PhET widget smaller
diff --git a/packages/perseus/src/widgets/phet-simulation/phet-simulation.tsx b/packages/perseus/src/widgets/phet-simulation/phet-simulation.tsx
index ab65e2dd37..adc47d647b 100644
--- a/packages/perseus/src/widgets/phet-simulation/phet-simulation.tsx
+++ b/packages/perseus/src/widgets/phet-simulation/phet-simulation.tsx
@@ -6,6 +6,7 @@
 import Banner from "@khanacademy/wonder-blocks-banner";
 import {View} from "@khanacademy/wonder-blocks-core";
 import IconButton from "@khanacademy/wonder-blocks-icon-button";
+import {spacing} from "@khanacademy/wonder-blocks-tokens";
 import cornersOutIcon from "@phosphor-icons/core/regular/corners-out.svg";
 import {StyleSheet} from "aphrodite";
 import * as React from "react";
@@ -189,8 +190,7 @@ export class PhetSimulation extends React.Component<Props, State> {
                     title={this.props.description}
                     sandbox={sandboxProperties}
                     style={{
-                        minWidth: 400,
-                        height: 360,
+                        height: 225,
                         width: "100%",
                         borderWidth: 0,
                     }}
@@ -234,9 +234,10 @@ const styles = StyleSheet.create({
         borderRadius: borderRadiusLarge,
         borderWidth: 1,
         borderColor: basicBorderColor,
-        padding: phoneMargin,
+        padding: spacing.medium_16,
         paddingBottom: 0,
-        width: 650,
+        // Include space for medium_16 padding on each side
+        width: 400 + spacing.xLarge_32,
     },
 });