Update toolbar styles and add viewport region toolbar

src/app/app.css

@@ -77,16 +77,21 @@ button:disabled {
 .toolbar {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
+  justify-content: flex-start;
+  flex-wrap: nowrap;
   gap: 12px;
-  padding: 8px 14px;
+  min-height: 48px;
+  height: 48px;
+  padding: 6px 12px;
   background: rgba(18, 22, 28, 0.88);
   border: 1px solid var(--color-border);
   border-radius: 16px;
   box-shadow: var(--shadow-panel);
   backdrop-filter: blur(16px);
   min-width: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: thin;
 }
 
 .toolbar__brand {
@@ -111,27 +116,27 @@ button:disabled {
 .toolbar__scene-controls {
   display: flex;
   align-items: center;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   gap: 8px;
-  flex: 1 1 520px;
-  min-width: 260px;
+  flex: 0 0 auto;
+  min-width: max-content;
 }
 
 .toolbar__project-name {
-  flex: 1 1 240px;
+  flex: 0 0 220px;
   min-width: 180px;
-  max-width: 320px;
+  max-width: 220px;
 }
 
 .toolbar__scene-picker {
-  flex: 0 1 220px;
-  min-width: 160px;
+  flex: 0 0 180px;
+  min-width: 180px;
 }
 
 .toolbar__scene-name {
-  flex: 1 1 320px;
+  flex: 0 0 220px;
   min-width: 180px;
-  max-width: 460px;
+  max-width: 220px;
 }
 
 .toolbar__scene-select {
@@ -151,6 +156,7 @@ button:disabled {
 .toolbar__group {
   display: flex;
   align-items: center;
+  flex-wrap: nowrap;
   gap: 6px;
   padding: 6px;
   background: rgba(255, 255, 255, 0.02);
@@ -208,7 +214,7 @@ button:disabled {
 
 .toolbar__project-name-input,
 .toolbar__scene-name-input {
-  height: 36px;
+  height: 32px;
   padding: 0 12px;
   font-size: 0.92rem;
   font-weight: 700;
@@ -837,7 +843,7 @@ button:disabled {
 
 .viewport-region {
   display: grid;
-  grid-template-rows: minmax(0, 1fr);
+  grid-template-rows: auto minmax(0, 1fr);
   min-height: 0;
   background: rgba(20, 24, 31, 0.92);
   border: 1px solid var(--color-border);
@@ -861,6 +867,25 @@ button:disabled {
   min-height: 0;
 }
 
+.viewport-region__toolbar {
+  display: flex;
+  align-items: center;
+  min-height: 44px;
+  padding: 6px 10px;
+  border-bottom: 1px solid var(--color-border);
+  background: rgba(14, 18, 24, 0.72);
+}
+
+.viewport-region__toolbar-scroll {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: max-content;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: thin;
+}
+
 .viewport-region__panels--single {
   display: flex;
   padding: 12px;
@@ -924,9 +949,10 @@ button:disabled {
   right: 12px;
   z-index: 2;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   align-items: flex-end;
-  gap: 8px;
+  justify-content: flex-end;
+  gap: 6px;
   padding: 0;
   background: transparent;
   border-bottom: 0;
@@ -974,7 +1000,7 @@ button:disabled {
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
-  gap: 8px;
+  gap: 6px;
   pointer-events: auto;
 }
 
@@ -1421,9 +1447,8 @@ button:disabled {
   }
 
   .toolbar {
-    flex-direction: column;
-    align-items: flex-start;
-    padding: 12px;
+    height: 48px;
+    padding: 6px 12px;
   }
 
   .workspace {