Merge branch 'main' into translate-web-component

Author: loiswells97

CHANGELOG.md

@@ -6,10 +6,24 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## Unreleased
 
+## Fixed
+
+- Styling issue preventing scrolling in the sidebar (#1216)
+- Styling issue on status bar on mobile (#1217)
+- Change tab `block-size` to `min-block-size` to allow for height increase when text wraps (#1219)
+- Changed `SkulptRunner.jsx` implementation of hiding elements to use `display: none` rather than `block-size: 0` (#1219)
+- Enabled `hyphens: auto` globally (with exceptions) to prevent overflow with longer words (#1215)
+- Removed fixed size from `ProjectBar` to prevent overflow when text wraps (#1221)
+- Added missing translation strings (#1222)
+
+## Changed
+
+- Improved status bar styling (#1221)
+
 ## [0.30.1] - 2025-06-09
 
 ### Added
- 
+
 - Fake translation for stress testing (#1206)
 
 ### Changed

src/assets/icons/cloud_tick.svg

@@ -58,10 +58,28 @@
   display: flex;
   flex-flow: column;
   block-size: 100%;
+  hyphens: auto;
+  hyphenate-limit-chars: 10 4 4; // Minimum of 10 characters before hyphenating, minimum of 4 character before and after the hyphen.
 
   .proj {
     min-block-size: 100%;
   }
+
+  code,
+  var,
+  kbd,
+  samp,
+  tt,
+  dir,
+  listing,
+  plaintext,
+  xmp,
+  abbr,
+  acronym,
+  blockquote,
+  q {
+    hyphens: none;
+  }
 }
 
 code {
@@ -91,7 +109,6 @@ button:focus-visible {
   }
 }
 
-
 .--light {
   --editor-color-layer-1: #{$rpf-teal-100};
   --editor-color-layer-2: #{$rpf-white};
@@ -120,5 +137,6 @@ button:focus-visible {
   --editor-color-tab-background: #{$rpf-grey-700};
 
   .rpf-button--secondary {
-    border-color: $rpf-navy-800;}
+    border-color: $rpf-navy-800;
+  }
 }

src/assets/icons/cloud_upload.svg

@@ -7,9 +7,9 @@
   background-color: $rpf-white;
   border-block-start: 1px solid $rpf-grey-150;
   display: flex;
-  block-size: 25px;
   justify-content: space-between;
-  padding: 0 $space-0-5;
+  padding: $space-0-5;
+  gap: var(--space-1);
 }
 
 .mobile-project-bar__name {

src/assets/stylesheets/InternalStyles.scss

@@ -6,7 +6,6 @@
   display: flex;
   align-items: center;
   z-index: 1;
-  block-size: $space-4;
   container-type: inline-size;
   background-color: var(--editor-color-layer-3);
   border: 1px solid var(--editor-color-outline);
@@ -39,6 +38,7 @@
   }
 
   .project-bar__btn-wrapper {
+    display: flex;
     block-size:  100%;
   }
 

src/assets/stylesheets/MobileProjectBar.scss

@@ -3,10 +3,6 @@
 @use "./rpf_design_system/font-size" as *;
 
 .projects-panel-wrapper {
-  .sidebar__panel-content {
-    overflow: visible;
-  }
-
   .projects-panel__your-projects-button {
     display: flex;
     align-items: center;

src/assets/stylesheets/ProjectBar.scss

@@ -5,17 +5,29 @@
 .save-status {
   align-items: center;
   display: flex;
-  gap: $space-0-25;
+  gap: var(--space-1);
   justify-content: flex-end;
   margin-block: 0;
-  padding-inline: $space-1;
+  padding-inline: var(--space-2);
 }
 
 .save-status--mobile {
   margin: unset;
+  padding-inline: 0;
+  gap: var(--space-0-5);
 
   .save-status__text {
-    @include font-size-1(regular);
+    @include font-size-0-75(regular);
+  }
+
+  .save-status__icon {
+    inline-size: 16px;
+    block-size: 16px;
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
   }
 }
 

src/assets/stylesheets/ProjectsPanel.scss

@@ -101,6 +101,7 @@
   display: flex;
   flex-direction: column;
   padding: $space-1;
+  padding-block-end: 0;
   border-radius: 0 8px 8px 0;
   inline-size: inherit;
   background: var(--sidebar-panel-background);
@@ -126,9 +127,8 @@
 .sidebar__panel-content {
   flex: 1;
   padding: $space-1 0;
-  overflow-y: scroll;
+  overflow-y: auto;
   scrollbar-width: thin;
-  overflow: auto;
 }
 
 .sidebar__panel-footer {

src/assets/stylesheets/SaveStatus.scss

@@ -19,7 +19,7 @@
       margin: 0;
       inset-block-start: 0;
       inset-block-end: 0;
-      block-size: $space-3;
+      min-block-size: var(--min-target-size);
       box-sizing: border-box;
       display: flex;
       align-items: center;