fix: login to save button overflow (#1221)

- Removed fixed ProjectBar height to allow button it to grow if needed
- Centre aligned buttons
- Tweak save status space for better aesthetics when wrapping (and in
general)

Author: maxelkins

CHANGELOG.md

@@ -13,6 +13,11 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - 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)
+
+## Changed
+
+- Improved status bar styling (#1221)
 
 ## [0.30.1] - 2025-06-09
 

src/assets/stylesheets/ProjectBar.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/SaveStatus.scss

@@ -5,15 +5,16 @@
 .save-status {
   align-items: center;
   display: flex;
-  gap: $space-0-25;
+  gap: var(--space-1);
   justify-content: flex-end;
   margin-block: 0;
-  padding-inline: var(--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-0-75(regular);