Fix status bar overflow on mobile (#1217)

closes
RaspberryPiFoundation/digital-editor-issues#688

<img width="447" alt="image"
src="https://github.com/user-attachments/assets/9d7f821a-0a01-4fb6-90b4-785f39308400"
/>

<img width="447" alt="image"
src="https://github.com/user-attachments/assets/9f01c710-9399-4291-967e-0247fa7fccf2"
/>

---------

Co-authored-by: Max Elkins <max.elkins@raspberrypi.org>

Author: jamiebenstead

CHANGELOG.md

@@ -20,6 +20,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - Styling issue on sidebar on mobile (#1194)
 - Styling issue preventing scrolling in the sidebar (#1216)
+- Styling issue on status bar on mobile (#1217)
 
 ## [0.30.0] - 2025-04-15
 

src/assets/icons/cloud_tick.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/icons/cloud_upload.svg

@@ -8,14 +8,25 @@
   gap: $space-0-25;
   justify-content: flex-end;
   margin-block: 0;
-  padding-inline: $space-1;
+  padding-inline: var(--space-1);
 }
 
 .save-status--mobile {
   margin: unset;
+  padding-inline: 0;
 
   .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/MobileProjectBar.scss

@@ -43,7 +43,7 @@ const SaveStatus = ({ isMobile = false }) => {
             <div className="save-status__icon">
               <CloudUploadIcon />
             </div>
-            <div className="save-status__status">
+            <div className="save-status__text">
               {t("saveStatus.saving")}&hellip;
             </div>
           </>