Refactor StudioImmersiveModal to enhance toolbar title styling for improved visibility

Author: vtushar06

contentcuration/contentcuration/frontend/shared/views/StudioImmersiveModal.vue

@@ -20,7 +20,7 @@
       </template>
 
       <template #default>
-        <span class="notranslate">
+        <span class="notranslate toolbar-title">
           <slot name="header">{{ title }}</slot>
         </span>
       </template>
@@ -134,4 +134,12 @@
     overflow-y: auto;
   }
 
+  .toolbar-title {
+    display: block;
+    margin-inline-start: 16px;  
+    margin-inline-end: 16px;    
+    white-space: nowrap;
+    max-width: calc(100% - 80px);
+  }
+
 </style>