From c7c0acd888c24dda46aa1e8cbf5bb2b0a83c5486 Mon Sep 17 00:00:00 2001
From: UnluckyHuckleberry53
 <153219522+UnluckyHuckleberry53@users.noreply.github.com>
Date: Thu, 11 Apr 2024 15:28:43 -0400
Subject: [PATCH] Fix layout width calculations (#9)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!-- If this pull request closes an issue, please mention the issue
number below -->
Closes # <!-- Issue # here -->

## 💸 TL;DR
<!-- What's the three sentence summary of purpose of the PR -->

The width was always two pixels off because the border is two pixels.
This is a lot more noticable now that we have `context.dimensions`.
Added a calc to make it right.

![CleanShot 2024-04-10 at 15 34
42@2x](https://github.com/reddit/play/assets/153219522/2ca24611-fee7-4f69-8193-be830f0f6677)


## 📜 Details
[Design Doc](<!-- insert Google Doc link here if applicable -->)

[Jira](<!-- insert Jira link if applicable -->)

<!-- Add additional details required for the PR: breaking changes,
screenshots, external dependency changes -->

## 🧪 Testing Steps / Validation
<!-- add details on how this PR has been tested, include reproductions
and screenshots where applicable -->

## ✅ Checks
<!-- Make sure your pr passes the CI checks and do check the following
fields as needed - -->
- [x] CI tests (if present) are passing
- [x] Adheres to code style for repo
- [x] Contributor License Agreement (CLA) completed if not a Reddit
employee
---
 src/elements/play-preview.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/elements/play-preview.ts b/src/elements/play-preview.ts
index 7019882..cb30632 100644
--- a/src/elements/play-preview.ts
+++ b/src/elements/play-preview.ts
@@ -48,6 +48,8 @@ export class PlayPreview extends LitElement {
       border-radius: 16px;
       min-height: 320px;
       box-shadow: var(--shadow-xs);
+      /* Prevents the border from throwing off the context.dimensions calculation */
+      box-sizing: content-box;
 
       /* When the background is visible, the preview is loading. */
       background-color: var(--color-interactive-background);