Fix styling of design system components in plugins (#1263)

related to
RaspberryPiFoundation/digital-editor-issues#969

Author: loiswells97

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

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;

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);