set breakpoints on container not media query (#776)

Related to #708
and fixes input/output panel breakpoints when web component is
positioned on a page that doesn't take the full width of the screen

Currently the breakpoints change as a result of the positioning of the
web component on the page e.g. if additional margin is added around the
web component the breakpoints will be effected


https://github.com/RaspberryPiFoundation/editor-ui/assets/74183390/371ce394-6fb8-4e97-bb67-2e32e58ef4b9

Author: sra405

CHANGELOG.md

@@ -32,6 +32,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Fixed
 
+- Container rather than media query breakpoints for the web component (#776)
 - `FileMenu` alignment (#720)
 - Edit icon not showing in ContextMenu (#720)
 - Updated sidebar and file icons to correct size (#720)

src/assets/stylesheets/Project.scss

@@ -33,6 +33,7 @@
 }
 
 .proj-container {
+  container-type: inline-size;
   display: flex;
   flex-direction: row;
   overflow-y: hidden;
@@ -64,8 +65,7 @@
   }
 
   // TODO: use container queries (fix with cquery breaking positioning of drag/drop & autocomplete)
-  @media (min-width: 912px) {
-    // width is 880px for the container + the rest of the page
+  @container (min-width: 880px) {
     .proj-editor-wrapper {
       flex-flow: row;
     }
@@ -143,7 +143,7 @@
     background-color: $rpf-white;
   }
 
-  @media (min-width: 600px) {
+  @container (min-width: 600px) {
     .proj-runner-container,
     .proj-editor-container,
     .sidebar {
@@ -159,7 +159,7 @@
     background-color: $rpf-grey-800;
   }
 
-  @media (min-width: 600px) {
+  @container (min-width: 600px) {
     .proj-runner-container,
     .proj-editor-container,
     .sidebar {