Add Prompt Builder sets/framing and harden mobile draft look settings.

Sets and beats filter by shot size; scenes reorder/delete; portrait links Prompt Builder; landscape queue collapses; per-engine look settings and prompt Clear persist across iOS resumes.

components/studio2/Bench.vue

@@ -120,7 +120,10 @@
       </div>
 
       <label>
-       <span class="field-label">Prompt</span>
+       <span class="field-label flex items-center justify-between gap-2">
+        Prompt
+        <button type="button" class="text-[11px] font-normal text-[var(--muted)] hover:text-[var(--amber)]" @click.prevent="clearPrompt">Clear</button>
+       </span>
        <textarea
         ref="promptArea"
         v-model="form.promptSections.action"
@@ -373,12 +376,15 @@
    </section>
 
    <!-- RIGHT queue -->
-   <aside class="bench-panel queue-col">
+   <aside class="bench-panel queue-col" :data-collapsed="queueCollapsed ? '1' : undefined">
     <div class="queue-head">
-     Queue
-     <span class="queue-badge">{{ queueCount }}</span>
+     <button type="button" class="queue-toggle" :aria-expanded="queueCollapsed ? 'false' : 'true'" @click="queueCollapsed=!queueCollapsed">
+      Queue
+      <span class="queue-badge">{{ queueCount }}</span>
+      <span class="queue-toggle-mark" aria-hidden="true">{{ queueCollapsed ? '▸' : '▾' }}</span>
+     </button>
     </div>
-    <div class="queue-list">
+    <div v-show="!queueCollapsed" class="queue-list">
      <div
       v-for="card in queueCards"
       :key="card.id"
@@ -410,7 +416,7 @@
      </div>
      <p v-if="!queueCards.length" class="px-1 text-[var(--type-sm)] text-[var(--muted)]">No active jobs</p>
     </div>
-    <div class="queue-foot">
+    <div v-show="!queueCollapsed" class="queue-foot">
      <button type="button" class="generate-cta" :disabled="submitting" @click="queue">
       <span aria-hidden="true">▶</span>
       {{ submitting ? 'Queuing…' : (batchMode && imagePromptCount > 1 ? `Generate · ${imagePromptCount} prompts` : 'Generate') }}
@@ -506,7 +512,14 @@ const NEG_STORAGE_KEY='studio2-negative-chips'
 const ENHANCE_STORAGE_KEY='studio2-qwen21-enhance-prompt'
 const TURBO_STORAGE_KEY='studio2-qwen21-turbo'
 const BENCH_DRAFT_KEY='aigen:bench-draft'
+const BENCH_DRAFT_SESSION_KEY='aigen:bench-draft:session'
 let draftTimer:ReturnType<typeof setTimeout>|null=null
+let restoringDraft=false
+type EngineLook={steps:number;cfg:number;aspect:string;seed:number|null;seedMode:string;loraStack:any[]}
+function defaultEngineLook(engine:string):EngineLook{
+ if(engine==='qwen21') return {steps:25,cfg:1,aspect:'auto',seed:null,seedMode:'random',loraStack:[]}
+ return {steps:24,cfg:4,aspect:'auto',seed:null,seedMode:'random',loraStack:[]}
+}
 function readStoredNegatives(){
  if(!import.meta.client)return [...defaultNegatives]
  try{
@@ -537,8 +550,9 @@ function writeStoredTurbo(on:boolean){
  try{localStorage.setItem(TURBO_STORAGE_KEY,on?'1':'0')}catch{/* ignore */}
 }
 function benchDraftPayload(){
+ if(['flux','krea','qwen21'].includes(form.engine)) rememberEngineSampling(form.engine)
  return {
-  v:1,
+  v:2,
   mode:form.mode,
   engine:form.engine,
   folderId:form.folderId,
@@ -563,67 +577,95 @@ function benchDraftPayload(){
   batchMode:!!batchMode.value,
   eyeOpen:!!eyeOpen.value,
   hideInputs:!!hideInputs.value,
+  queueCollapsed:!!queueCollapsed.value,
+  selectedId:selected.value?.id||'',
   music:structuredClone({tags:music.tags,lyrics:music.lyrics,duration:music.duration,seed:music.seed,name:music.name})
  }
 }
+function writeDraftStores(payload:string){
+ try{localStorage.setItem(BENCH_DRAFT_KEY,payload)}catch{/* ignore */}
+ try{sessionStorage.setItem(BENCH_DRAFT_SESSION_KEY,payload)}catch{/* ignore */}
+}
+function readDraftRaw(){
+ let session=''
+ let local=''
+ try{session=sessionStorage.getItem(BENCH_DRAFT_SESSION_KEY)||''}catch{/* ignore */}
+ try{local=localStorage.getItem(BENCH_DRAFT_KEY)||''}catch{/* ignore */}
+ return session || local
+}
 function saveBenchDraft(immediate=false){
- if(!import.meta.client)return
+ if(!import.meta.client || restoringDraft)return
  const write=()=>{
-  try{localStorage.setItem(BENCH_DRAFT_KEY,JSON.stringify(benchDraftPayload()))}catch{/* ignore */}
+  try{writeDraftStores(JSON.stringify(benchDraftPayload()))}catch{/* ignore */}
  }
  if(draftTimer)clearTimeout(draftTimer)
  if(immediate){write();return}
  draftTimer=setTimeout(write,400)
 }
+function mergeEngineLook(row:any, fallback:EngineLook):EngineLook{
+ return {
+  steps:Number.isFinite(Number(row?.steps))?Number(row.steps):fallback.steps,
+  cfg:Number.isFinite(Number(row?.cfg))?Number(row.cfg):fallback.cfg,
+  aspect:typeof row?.aspect==='string' && row.aspect ? row.aspect : fallback.aspect,
+  seed:row?.seed==null || row?.seed==='' ? null : Number(row.seed),
+  seedMode:row?.seedMode==='locked'?'locked':'random',
+  loraStack:Array.isArray(row?.loraStack)?structuredClone(row.loraStack):structuredClone(fallback.loraStack)
+ }
+}
 function restoreBenchDraft(){
  if(!import.meta.client)return
- let raw=''
- try{raw=localStorage.getItem(BENCH_DRAFT_KEY)||''}catch{return}
+ const raw=readDraftRaw()
  if(!raw)return
  let draft:any
  try{draft=JSON.parse(raw)}catch{return}
- if(!draft||draft.v!==1)return
- if(draft.mode)form.mode=draft.mode
- if(draft.engine)form.engine=draft.engine
- if(draft.folderId)form.folderId=draft.folderId
- if(draft.enhancePrompt!=null)form.enhancePrompt=!!draft.enhancePrompt
- if(draft.turbo!=null)form.turbo=!!draft.turbo
- if(draft.lockFace!=null)form.lockFace=!!draft.lockFace
- if(draft.lockOutfit!=null)form.lockOutfit=!!draft.lockOutfit
- if(draft.promptSections)form.promptSections=sectionsFrom(draft.promptSections)
- if(Array.isArray(draft.photos))form.photos=draft.photos.filter((p:any)=>p?.stillId).map((p:any)=>({stillId:String(p.stillId),role:String(p.role||'change')}))
- if(draft.imageStyles)form.imageStyles={positive:draft.imageStyles.positive||[],negative:draft.imageStyles.negative||[]}
- if(draft.settings){
-  Object.assign(form.settings,{
-   aspect:draft.settings.aspect||form.settings.aspect,
-   seed:draft.settings.seed ?? form.settings.seed,
-   seedMode:draft.settings.seedMode||form.settings.seedMode,
-   steps:draft.settings.steps ?? form.settings.steps,
-   cfg:draft.settings.cfg ?? form.settings.cfg,
-   duration:draft.settings.duration ?? form.settings.duration,
-   fps:draft.settings.fps ?? form.settings.fps,
-   loraStack:Array.isArray(draft.settings.loraStack)?draft.settings.loraStack:form.settings.loraStack
-  })
- }
- if(draft.engineSampling && typeof draft.engineSampling==='object'){
-  for(const key of ['flux','krea','qwen21'] as const){
-   const row=draft.engineSampling[key]
-   if(row && Number.isFinite(Number(row.steps)) && Number.isFinite(Number(row.cfg))){
-    engineSampling[key]={steps:Number(row.steps),cfg:Number(row.cfg)}
+ if(!draft|| (draft.v!==1 && draft.v!==2))return
+ restoringDraft=true
+ try{
+  if(draft.engineSampling && typeof draft.engineSampling==='object'){
+   for(const key of ['flux','krea','qwen21'] as const){
+    const row=draft.engineSampling[key]
+    if(!row) continue
+    engineSampling[key]=mergeEngineLook(row, defaultEngineLook(key))
    }
   }
+  if(draft.mode)form.mode=draft.mode
+  if(draft.engine)form.engine=draft.engine
+  if(draft.folderId)form.folderId=draft.folderId
+  if(draft.enhancePrompt!=null)form.enhancePrompt=!!draft.enhancePrompt
+  if(draft.turbo!=null)form.turbo=!!draft.turbo
+  if(draft.lockFace!=null)form.lockFace=!!draft.lockFace
+  if(draft.lockOutfit!=null)form.lockOutfit=!!draft.lockOutfit
+  if(draft.promptSections)form.promptSections=sectionsFrom(draft.promptSections)
+  if(Array.isArray(draft.photos))form.photos=draft.photos.filter((p:any)=>p?.stillId).map((p:any)=>({stillId:String(p.stillId),role:String(p.role||'change')}))
+  if(draft.imageStyles)form.imageStyles={positive:draft.imageStyles.positive||[],negative:draft.imageStyles.negative||[]}
+  if(draft.settings){
+   Object.assign(form.settings,{
+    aspect:draft.settings.aspect||form.settings.aspect,
+    seed:draft.settings.seed ?? form.settings.seed,
+    seedMode:draft.settings.seedMode||form.settings.seedMode,
+    steps:draft.settings.steps ?? form.settings.steps,
+    cfg:draft.settings.cfg ?? form.settings.cfg,
+    duration:draft.settings.duration ?? form.settings.duration,
+    fps:draft.settings.fps ?? form.settings.fps,
+    loraStack:Array.isArray(draft.settings.loraStack)?draft.settings.loraStack:form.settings.loraStack
+   })
+  }
+  if(['flux','krea','qwen21'].includes(form.engine)) applyEngineSampling(form.engine)
+  if(draft.batchMode!=null)batchMode.value=!!draft.batchMode
+  if(draft.eyeOpen!=null)eyeOpen.value=!!draft.eyeOpen
+  if(draft.hideInputs!=null)hideInputs.value=!!draft.hideInputs
+  if(draft.queueCollapsed!=null)queueCollapsed.value=!!draft.queueCollapsed
+  if(draft.music){
+   music.tags=String(draft.music.tags||music.tags)
+   music.lyrics=String(draft.music.lyrics||music.lyrics)
+   if(draft.music.duration!=null)music.duration=Number(draft.music.duration)||music.duration
+   if(draft.music.seed!=null)music.seed=String(draft.music.seed)
+   if(draft.music.name!=null)music.name=String(draft.music.name)
+  }
+  syncPhotosBindings()
+ } finally {
+  restoringDraft=false
  }
- if(draft.batchMode!=null)batchMode.value=!!draft.batchMode
- if(draft.eyeOpen!=null)eyeOpen.value=!!draft.eyeOpen
- if(draft.hideInputs!=null)hideInputs.value=!!draft.hideInputs
- if(draft.music){
-  music.tags=String(draft.music.tags||music.tags)
-  music.lyrics=String(draft.music.lyrics||music.lyrics)
-  if(draft.music.duration!=null)music.duration=Number(draft.music.duration)||music.duration
-  if(draft.music.seed!=null)music.seed=String(draft.music.seed)
-  if(draft.music.name!=null)music.name=String(draft.music.name)
- }
- syncPhotosBindings()
 }
 
 const xaigen=isXaigenStudio(useRuntimeConfig().public)
@@ -662,11 +704,12 @@ const route=useRoute()
 const tasks=['generate','edit','compose','refine','video','extend','music']
 const settingsOpen=ref(false),detailsOpen=ref(false),submitting=ref(false),error=ref(''),batchText=ref('')
 const batchMode=ref(false)
+const queueCollapsed=ref(false)
 const selectionPinned=ref(false)
-const engineSampling=reactive<Record<string,{steps:number;cfg:number}>>({
- flux:{steps:24,cfg:4},
- krea:{steps:24,cfg:4},
- qwen21:{steps:25,cfg:1}
+const engineSampling=reactive<Record<string,EngineLook>>({
+ flux:defaultEngineLook('flux'),
+ krea:defaultEngineLook('krea'),
+ qwen21:defaultEngineLook('qwen21')
 })
 const viewerVideo=ref<HTMLVideoElement|null>(null)
 const viewerMuted=ref(false)
@@ -696,22 +739,36 @@ function defaultSamplingFor(engine:string){
 }
 function rememberEngineSampling(engine:string){
  if(!['flux','krea','qwen21'].includes(engine)) return
+ const fallback=defaultEngineLook(engine)
  engineSampling[engine]={
-  steps:Number(form.settings.steps)||defaultSamplingFor(engine).steps,
-  cfg:Number(form.settings.cfg)||defaultSamplingFor(engine).cfg
+  steps:Number(form.settings.steps)||defaultSamplingFor(engine).steps||fallback.steps,
+  cfg:Number(form.settings.cfg)||defaultSamplingFor(engine).cfg||fallback.cfg,
+  aspect:String(form.settings.aspect||fallback.aspect),
+  seed:form.settings.seed==null || form.settings.seed==='' ? null : Number(form.settings.seed),
+  seedMode:form.settings.seedMode==='locked'?'locked':'random',
+  loraStack:Array.isArray(form.settings.loraStack)?structuredClone(form.settings.loraStack):[]
  }
 }
 function applyEngineSampling(engine:string){
- const saved=engineSampling[engine]
+ if(!['flux','krea','qwen21'].includes(engine)) return
+ const saved=engineSampling[engine] || defaultEngineLook(engine)
  const fallback=defaultSamplingFor(engine)
- form.settings.steps=saved?.steps ?? fallback.steps
- form.settings.cfg=saved?.cfg ?? fallback.cfg
+ form.settings.steps=saved.steps ?? fallback.steps
+ form.settings.cfg=saved.cfg ?? fallback.cfg
+ form.settings.aspect=saved.aspect || form.settings.aspect || 'auto'
+ form.settings.seed=saved.seed
+ form.settings.seedMode=saved.seedMode || 'random'
+ form.settings.loraStack=Array.isArray(saved.loraStack)?structuredClone(saved.loraStack):[]
+}
+function clearPrompt(){
+ if(form.promptSections) form.promptSections.action=''
 }
 watch(engineOptions,opts=>{
  const current=opts.find(o=>o.value===form.engine)
  if(!current || current.disabled)form.engine=opts.find(o=>!o.disabled)?.value || form.engine
 })
 watch(()=>form.engine,(engine,prev)=>{
+ if(restoringDraft) return
  if(prev && prev!==engine) rememberEngineSampling(prev)
  if(['flux','krea','qwen21'].includes(engine)) applyEngineSampling(engine)
  if(engine==='qwen21'){
@@ -722,14 +779,17 @@ watch(()=>form.engine,(engine,prev)=>{
 watch(()=>form.enhancePrompt,on=>writeStoredEnhancePrompt(!!on))
 watch(()=>form.turbo,on=>{
  writeStoredTurbo(!!on)
- if(form.engine!=='qwen21')return
+ if(restoringDraft || form.engine!=='qwen21')return
  form.settings.steps=on?6:25
  form.settings.cfg=1
  rememberEngineSampling('qwen21')
 })
-watch(()=>[form.settings.steps,form.settings.cfg],()=>{
+watch(()=>[
+ form.settings.steps,form.settings.cfg,form.settings.aspect,form.settings.seed,form.settings.seedMode,form.settings.loraStack
+],()=>{
+ if(restoringDraft) return
  if(['flux','krea','qwen21'].includes(form.engine)) rememberEngineSampling(form.engine)
-})
+},{deep:true})
 watch(()=>[form.mode,form.engine],([mode,engine])=>{
  if(engine==='qwen21' && mode==='edit'){
   form.lockFace=false
@@ -1753,9 +1813,16 @@ async function fetchHealth(){
 watch(()=>[
  form.mode,form.engine,form.folderId,form.enhancePrompt,form.turbo,form.lockFace,form.lockOutfit,
  form.promptSections,form.photos,form.imageStyles,form.settings,
- eyeOpen.value,hideInputs.value,batchMode.value,
+ eyeOpen.value,hideInputs.value,batchMode.value,queueCollapsed.value,
  music.tags,music.lyrics,music.duration,music.seed,music.name
 ],()=>saveBenchDraft(),{deep:true})
+function onPageHide(){saveBenchDraft(true)}
+function onVisibilityFlush(){
+ if(typeof document!=='undefined' && document.visibilityState==='hidden') saveBenchDraft(true)
+}
+function onPageShow(event:PageTransitionEvent){
+ if(!event.persisted) restoreBenchDraft()
+}
 let timer:ReturnType<typeof setTimeout>,clock:ReturnType<typeof setInterval>,disposed=false
 onMounted(()=>{
  submitting.value=false
@@ -1791,6 +1858,9 @@ onMounted(()=>{
  if(import.meta.client){
   window.addEventListener('keydown',onStageHotkey)
   window.addEventListener('pointerdown',onStagePointerDown,true)
+  window.addEventListener('pagehide',onPageHide)
+  window.addEventListener('pageshow',onPageShow)
+  document.addEventListener('visibilitychange',onVisibilityFlush)
  }
 })
 onBeforeUnmount(()=>{
@@ -1800,6 +1870,9 @@ onBeforeUnmount(()=>{
   saveBenchDraft(true)
   window.removeEventListener('keydown',onStageHotkey)
   window.removeEventListener('pointerdown',onStagePointerDown,true)
+  window.removeEventListener('pagehide',onPageHide)
+  window.removeEventListener('pageshow',onPageShow)
+  document.removeEventListener('visibilitychange',onVisibilityFlush)
  }
 })
 
@@ -1828,6 +1901,7 @@ const mobileCtx=computed(()=>({
  eyeOpen:eyeOpen.value,
  hideInputs:hideInputs.value,
  photoFilledCount:photoFilledCount.value,
+ clearPrompt,
  openLibrary:()=>{libraryOpen.value=true},
  closeLibrary:()=>{libraryOpen.value=false},
  toggleHideInputs:()=>{hideInputs.value=!hideInputs.value;saveBenchDraft(true)},

components/studio2/Mobile.vue

@@ -1,5 +1,5 @@
 <template>
- <div class="m-shell" data-mobile="1">
+ <div class="m-shell" data-mobile="1" :data-queue-collapsed="queueRailCollapsed ? '1' : undefined">
   <header class="m-header">
    <span class="m-brand">{{ ctx.instanceName }}</span>
    <label class="m-crumb">
@@ -9,11 +9,15 @@
    </label>
    <span class="m-grow" />
    <span class="m-gpu" :data-tone="ctx.gpu.tone" :title="ctx.gpu.detail">● {{ ctx.gpuChipLabel }}</span>
-   <button type="button" class="m-chip" @click="toggleSheet('queue')">Queue {{ ctx.queueCount }}</button>
+   <button type="button" class="m-chip m-queue-chip-portrait" @click="toggleSheet('queue')">Queue {{ ctx.queueCount }}</button>
+   <button type="button" class="m-chip m-queue-chip-landscape" :aria-expanded="queueRailCollapsed ? 'false' : 'true'" @click="queueRailCollapsed=!queueRailCollapsed">
+    Queue {{ ctx.queueCount }} {{ queueRailCollapsed ? '▸' : '▾' }}
+   </button>
    <details class="m-more">
     <summary aria-label="More">⋯</summary>
     <div class="m-more-menu">
      <NuxtLink to="/library" @click="closeMenus">Library</NuxtLink>
+     <NuxtLink to="/prompt-builder" @click="closeMenus">Prompt Builder</NuxtLink>
      <NuxtLink to="/queue" @click="closeMenus">Queue</NuxtLink>
      <NuxtLink to="/settings" @click="closeMenus">Settings</NuxtLink>
     </div>
@@ -224,7 +228,8 @@
      <label class="m-label">Lyrics<textarea v-model="ctx.music.lyrics" rows="8" class="m-area" /></label>
     </template>
     <template v-else>
-     <label class="m-label">Prompt
+     <label class="m-label">
+      <span class="m-label-row">Prompt<button type="button" class="m-link" @click.stop="ctx.clearPrompt()">Clear</button></span>
       <textarea
        :value="ctx.form.promptSections.action"
        rows="5"
@@ -329,7 +334,7 @@
    </div>
   </aside>
 
-  <aside v-if="sheet==='queue'" class="m-sheet" role="dialog" aria-label="Queue">
+  <aside v-if="sheet==='queue'" class="m-sheet m-queue-sheet-portrait" role="dialog" aria-label="Queue">
    <button type="button" class="m-handle" aria-label="Close" @click="sheet=''" />
    <div class="m-sheet-head"><strong>Queue</strong><button type="button" @click="sheet=''">Done</button></div>
    <div class="m-sheet-body">
@@ -367,6 +372,33 @@
    </div>
   </aside>
 
+  <aside v-show="!queueRailCollapsed" class="m-queue-rail" aria-label="Queue">
+   <div class="m-sheet-head">
+    <strong>Queue</strong>
+    <button type="button" @click="queueRailCollapsed=true">Hide</button>
+   </div>
+   <div class="m-sheet-body">
+    <div
+     v-for="card in ctx.queueCards"
+     :key="'rail-'+card.id"
+     class="m-job"
+     :class="{ on: ctx.focusedJobId===card.id }"
+     @click="ctx.focusQueueCard(card)"
+    >
+     <div class="m-job-id">{{ card.code }}</div>
+     <div class="m-job-title">{{ card.title }}</div>
+     <div class="m-muted">{{ card.meta }}</div>
+     <div class="m-job-status">
+      <span>● {{ card.statusLabel }}</span>
+      <button v-if="card.cancelable" type="button" @click.stop="ctx.cancel(card.job)">Cancel</button>
+      <button v-else-if="card.dismissable" type="button" @click.stop="ctx.dismissFinishedCard(card)">Dismiss</button>
+     </div>
+    </div>
+    <p v-if="!ctx.queueCards.length" class="m-muted">No active jobs</p>
+    <button v-if="ctx.canClearFinished" type="button" class="m-link" @click="ctx.clearFinished">Clear finished</button>
+   </div>
+  </aside>
+
   <div
    v-if="promptEditorOpen"
    class="m-prompt-editor"
@@ -393,6 +425,7 @@ export type Studio2MobileCtx = Record<string, any>
 
 const props = defineProps<{ ctx: Studio2MobileCtx }>()
 const sheet = ref('')
+const queueRailCollapsed = ref(false)
 const touchStart = ref<{ x: number; y: number } | null>(null)
 const promptEditorOpen = ref(false)
 const promptEditorDraft = ref('')
@@ -725,6 +758,7 @@ watch(() => props.ctx.form.mode, () => { sheet.value = '' })
   gap: 10px;
 }
 .m-label { display: block; font-size: 11px; color: var(--muted); }
+.m-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
 .m-area, .m-input {
   width: 100%;
   margin-top: 4px;
@@ -800,6 +834,46 @@ watch(() => props.ctx.form.mode, () => { sheet.value = '' })
   font-size: 16px;
   font-weight: 600;
 }
+.m-queue-chip-landscape { display: none; }
+.m-queue-rail { display: none; }
+@media (orientation: landscape) {
+  .m-queue-chip-portrait,
+  .m-queue-sheet-portrait { display: none !important; }
+  .m-queue-chip-landscape { display: inline-flex; align-items: center; }
+  .m-shell { position: relative; }
+  .m-queue-rail {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 25;
+    display: flex;
+    width: min(42vw, 16rem);
+    flex-direction: column;
+    border-left: 1px solid var(--line);
+    background: var(--panel);
+  }
+  .m-shell[data-queue-collapsed='1'] .m-queue-rail { display: none; }
+  .m-queue-rail .m-sheet-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 12px;
+    border-bottom: 1px solid var(--line);
+  }
+  .m-queue-rail .m-sheet-body {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+    padding: 10px 12px;
+  }
+  .m-stage { padding-right: 0; }
+  .m-shell:not([data-queue-collapsed='1']) .m-stage,
+  .m-shell:not([data-queue-collapsed='1']) .m-dock,
+  .m-shell:not([data-queue-collapsed='1']) .m-chips {
+    margin-right: min(42vw, 16rem);
+  }
+}
 .m-prompt-editor-area {
   flex: 1;
   width: 100%;