Add E2E test for transform status bar and update CSS for status bar items

src/app/App.tsx

@@ -6484,10 +6484,10 @@ export function App({ store, initialStatusMessage }: AppProps) {
         </div>
 
         <footer className="status-bar">
-          <div>
+          <div className="status-bar__item status-bar__item--message" title={statusMessage}>
             <span className="status-bar__strong">Status:</span> {statusMessage}
           </div>
-          <div>
+          <div className="status-bar__item">
             <span className="status-bar__strong">Spawn:</span>{" "}
             {runtimeScene.spawn.source === "playerStart"
               ? "Authored Player Start"
@@ -10783,7 +10783,11 @@ export function App({ store, initialStatusMessage }: AppProps) {
       )}
 
       <footer className="status-bar">
-        <div className="status-bar__item" data-testid="status-message">
+        <div
+          className="status-bar__item status-bar__item--message"
+          data-testid="status-message"
+          title={statusMessage}
+        >
           <span className="status-bar__strong">Status:</span> {statusMessage}
         </div>
         <div
@@ -10808,12 +10812,17 @@ export function App({ store, initialStatusMessage }: AppProps) {
           <div
             className="status-bar__item status-bar__item--asset"
             data-testid="status-asset-hover"
+            title={hoveredAssetStatusMessage}
           >
             <span className="status-bar__strong">Asset:</span>{" "}
             {hoveredAssetStatusMessage}
           </div>
         )}
-        <div className="status-bar__item" data-testid="status-last-command">
+        <div
+          className="status-bar__item"
+          data-testid="status-last-command"
+          title={lastCommandLabel}
+        >
           <span className="status-bar__strong">Last:</span> {lastCommandLabel}
         </div>
       </footer>

src/app/app.css

@@ -1222,9 +1222,10 @@ button:disabled {
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   gap: 12px;
   min-height: 36px;
+  height: 36px;
   padding: 6px 12px;
   background: rgba(18, 22, 28, 0.88);
   border: 1px solid var(--color-border);
@@ -1232,13 +1233,24 @@ button:disabled {
   color: var(--color-muted);
   font-size: 0.8rem;
   line-height: 1.2;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: thin;
 }
 
 .status-bar__item {
   display: flex;
   align-items: baseline;
   gap: 4px;
+  flex: 0 0 auto;
   min-width: 0;
+  white-space: nowrap;
+}
+
+.status-bar__item--message {
+  flex: 1 1 320px;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .status-bar__item--asset {
@@ -1320,6 +1332,8 @@ button:disabled {
   .status-bar {
     flex-direction: column;
     align-items: flex-start;
+    height: auto;
     padding: 12px 16px;
+    overflow: visible;
   }
 }