diff --git a/CHANGELOG.md b/CHANGELOG.md
index 26588aa75..bbebe53dc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - Changed the horizontal scrollbar to show without needing to scroll to the bottom of the editor window (#1257)
 
+### Fixed
+
+- Styling design system components used in the web component (#1263)
+
 ## [0.33.0] - 2025-10-15
 
 ### Added
diff --git a/src/assets/stylesheets/ExternalStyles.scss b/src/assets/stylesheets/ExternalStyles.scss
index 923ebe18d..2e780f96b 100644
--- a/src/assets/stylesheets/ExternalStyles.scss
+++ b/src/assets/stylesheets/ExternalStyles.scss
@@ -3,5 +3,6 @@
 @use "../../../node_modules/prismjs/plugins/line-numbers/prism-line-numbers.css";
 @use "../../../node_modules/prismjs/plugins/line-highlight/prism-line-highlight.css";
 @use "../../../node_modules/@raspberrypifoundation/design-system-core/scss/components/alert.scss";
+@use "../../../node_modules/@raspberrypifoundation/design-system-core/scss/design-system-core.scss";
 @use "../../../node_modules/material-symbols/sharp.scss";
 @use "../../../node_modules/plotly.js/src/css/style.scss" as plotlyStyle;
diff --git a/src/assets/stylesheets/Sidebar.scss b/src/assets/stylesheets/Sidebar.scss
index d853f49b9..8256c048c 100644
--- a/src/assets/stylesheets/Sidebar.scss
+++ b/src/assets/stylesheets/Sidebar.scss
@@ -102,6 +102,7 @@
   flex-direction: column;
   padding: $space-1;
   padding-block-end: 0;
+  position: relative;
   border-radius: 0 8px 8px 0;
   inline-size: inherit;
   background: var(--sidebar-panel-background);