Keep every decoder block visible on desktop

#2
by alphabell-research - opened
Files changed (2) hide show
  1. style.css +3 -0
  2. verify.py +8 -0
style.css CHANGED
@@ -140,3 +140,6 @@ button.expert-chip{border:0}
140
  @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important}}
141
  @media(max-width:650px){.site-footer{gap:14px}.site-footer>span{flex-basis:100%;text-align:center;order:4}.run-note{min-height:0}.capture-help{font-size:12px}.overview h1{font-size:28px}.engine-status{max-width:100px!important}}
142
  @media(max-width:650px){.models-header .header-end{display:contents}.models-header .engine-status{grid-column:1/-1;grid-row:3;justify-self:start;max-width:none!important;font-size:10px}.models-header #aboutButton{grid-column:2;grid-row:1}.model-panel{order:0;border-top:0}.input-panel{order:1;border-top:1px solid var(--line)}.inspector-panel{order:2}.model-toolbar{padding-top:20px}.model-footer{gap:8px;line-height:1.5;align-items:flex-start}.model-footer>span{min-width:0}.stats>div:last-child strong{font-size:17px}.stats{align-items:flex-start}.stats>div{min-width:0;max-width:27%}}
 
 
 
 
140
  @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important}}
141
  @media(max-width:650px){.site-footer{gap:14px}.site-footer>span{flex-basis:100%;text-align:center;order:4}.run-note{min-height:0}.capture-help{font-size:12px}.overview h1{font-size:28px}.engine-status{max-width:100px!important}}
142
  @media(max-width:650px){.models-header .header-end{display:contents}.models-header .engine-status{grid-column:1/-1;grid-row:3;justify-self:start;max-width:none!important;font-size:10px}.models-header #aboutButton{grid-column:2;grid-row:1}.model-panel{order:0;border-top:0}.input-panel{order:1;border-top:1px solid var(--line)}.inspector-panel{order:2}.model-toolbar{padding-top:20px}.model-footer{gap:8px;line-height:1.5;align-items:flex-start}.model-footer>span{min-width:0}.stats>div:last-child strong{font-size:17px}.stats{align-items:flex-start}.stats>div{min-width:0;max-width:27%}}
143
+ /* Keep all decoder blocks inside their panel at short desktop heights. */
144
+ #modelCanvas{position:absolute;inset:0}
145
+ @media(min-width:981px){main{height:max(760px,calc(100vh - 325px));grid-template-rows:minmax(0,1fr)}.input-panel,.model-panel{min-height:0}.model-map{min-height:0}}
verify.py CHANGED
@@ -37,6 +37,14 @@ def main():
37
  page.set_viewport_size({'width':width,'height':844});assert page.evaluate('document.documentElement.scrollWidth<=innerWidth'),width
38
  page.locator('#openBlock').click();assert page.locator('#detailDialog').bounding_box()['width']<=width+1;page.keyboard.press('Escape')
39
  page.screenshot(path=str(out/'phone.png'),full_page=True);passed('320px and 390px layouts and fullscreen fit their viewport')
 
 
 
 
 
 
 
 
40
  page.goto(args.base.rstrip('/')+'/?model=qwen&layer=3&token=7');page.wait_for_function('S.model?.id==="qwen"&&S.frames.length===44&&!S.loadingTrace&&S.frame===6',timeout=90000);assert page.evaluate('S.layer===3');passed('Shared deep link opens the requested example, layer and token')
41
  page.locator('#aboutButton').click();expect(page.locator('#aboutContent')).to_contain_text('95th percentile');expect(page.locator('#aboutSource')).to_have_attribute('href','https://huggingface.co/Qwen/Qwen3.8-27B/blob/main/config.json');page.locator('#closeAbout').click();passed('Explanation and model configuration link follow model selection')
42
  assert not errors,errors;assert not failed_requests,failed_requests;passed('No uncaught browser errors or failed release requests')
 
37
  page.set_viewport_size({'width':width,'height':844});assert page.evaluate('document.documentElement.scrollWidth<=innerWidth'),width
38
  page.locator('#openBlock').click();assert page.locator('#detailDialog').bounding_box()['width']<=width+1;page.keyboard.press('Escape')
39
  page.screenshot(path=str(out/'phone.png'),full_page=True);passed('320px and 390px layouts and fullscreen fit their viewport')
40
+
41
+ for width,height in [(1440,720),(1440,900),(1440,1100),(1024,768)]:
42
+ page.set_viewport_size({'width':width,'height':height})
43
+ page.wait_for_function("document.querySelector('.model-panel').getBoundingClientRect().bottom<=document.querySelector('main').getBoundingClientRect().bottom+1")
44
+ assert page.evaluate("document.querySelector('#modelCanvas').getBoundingClientRect().bottom<=document.querySelector('.model-panel').getBoundingClientRect().bottom+1")
45
+ assert page.evaluate("document.querySelector('.saved-section').getBoundingClientRect().bottom<=document.querySelector('main').getBoundingClientRect().bottom+1")
46
+ passed('All decoder blocks and trace controls fit short and tall desktop panels')
47
+
48
  page.goto(args.base.rstrip('/')+'/?model=qwen&layer=3&token=7');page.wait_for_function('S.model?.id==="qwen"&&S.frames.length===44&&!S.loadingTrace&&S.frame===6',timeout=90000);assert page.evaluate('S.layer===3');passed('Shared deep link opens the requested example, layer and token')
49
  page.locator('#aboutButton').click();expect(page.locator('#aboutContent')).to_contain_text('95th percentile');expect(page.locator('#aboutSource')).to_have_attribute('href','https://huggingface.co/Qwen/Qwen3.8-27B/blob/main/config.json');page.locator('#closeAbout').click();passed('Explanation and model configuration link follow model selection')
50
  assert not errors,errors;assert not failed_requests,failed_requests;passed('No uncaught browser errors or failed release requests')