Polish responsive UI, fix gear bore, compact error overlay

app.js

@@ -282,11 +282,17 @@ function cleanError(value) {
   return text || '未知錯誤';
 }
 
+function hideToast() {
+  if (state.toastTimer) clearTimeout(state.toastTimer);
+  state.toastTimer = null;
+  els.toast.hidden = true;
+}
+
 function toast(message, tone = 'info') {
+  hideToast();
   els.toast.textContent = message;
   els.toast.dataset.tone = tone;
   els.toast.hidden = false;
-  if (state.toastTimer) clearTimeout(state.toastTimer);
   state.toastTimer = setTimeout(() => {
     els.toast.hidden = true;
     state.toastTimer = null;
@@ -294,6 +300,7 @@ function toast(message, tone = 'info') {
 }
 
 function showLoading(text) {
+  hideToast();
   if (text) els.loadingText.textContent = text;
   els.loadingState.hidden = false;
   els.emptyState.hidden = true;
@@ -301,6 +308,7 @@ function showLoading(text) {
 }
 
 function showError(message) {
+  hideToast();
   els.errorText.textContent = cleanError(message);
   els.errorState.hidden = false;
   els.loadingState.hidden = true;
@@ -520,6 +528,7 @@ function renderExamples() {
 
 function loadExample(item, { initial = false } = {}) {
   if (!item) return;
+  hideToast();
   state.uiSeq += 1;
   state.pendingRun = null;
   state.current = item;

examples/gear.py

@@ -38,7 +38,7 @@ gear = profile.extrude(App.Vector(0, 0, thickness))
 
 # Centre bore.
 gear = gear.cut(
-    Part.makeCylinder(4.2, thickness + 2.0, App.Vector(0, 0, -1.0))
+    Part.makeCylinder(4.5, thickness + 2.0, App.Vector(0, 0, -1.0))
 )
 
 # Five lightening holes.
@@ -55,6 +55,6 @@ plate = Part.show(gear, "GearPlate")
 plate.ViewObject.ShapeColor = (0.94, 0.68, 0.32)
 
 hub = Part.makeCylinder(6.8, thickness + 3.0, App.Vector(0, 0, -1.5))
-hub = hub.cut(Part.makeCylinder(4.2, thickness + 5.0, App.Vector(0, 0, -2.5)))
+hub = hub.cut(Part.makeCylinder(4.15, thickness + 5.0, App.Vector(0, 0, -2.5)))
 hub_obj = Part.show(hub, "Hub")
 hub_obj.ViewObject.ShapeColor = (0.27, 0.38, 0.35)

index.html

@@ -129,16 +129,18 @@
         </div>
 
         <div class="canvas-error" id="errorState" hidden>
-          <div class="error-head">
-            <span>無法執行這段程式</span>
-            <button class="icon-btn tiny" id="dismissError" type="button" aria-label="關閉錯誤">
-              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true">
-                <path d="m6 6 12 12M18 6 6 18"/>
-              </svg>
-            </button>
+          <div class="error-card">
+            <div class="error-head">
+              <span>無法執行這段程式</span>
+              <button class="icon-btn tiny" id="dismissError" type="button" aria-label="關閉錯誤">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" aria-hidden="true">
+                  <path d="m6 6 12 12M18 6 6 18"/>
+                </svg>
+              </button>
+            </div>
+            <pre id="errorText"></pre>
+            <p>支援 FreeCAD / Part 的基本 Part API。</p>
           </div>
-          <pre id="errorText"></pre>
-          <p>支援 FreeCAD / Part 的基本 Part API。</p>
         </div>
 
         <div class="toast" id="toast" role="status" aria-live="polite" hidden></div>

scenes/gear.json

@@ -1 +1 @@
-{"objects":[{"name":"GearPlate","color":[0.94,0.68,0.32],"opacity":1.0,"node":{"op":"boolean","kind":"cut","a":{"op":"boolean","kind":"cut","a":{"op":"boolean","kind":"cut","a":{"op":"boolean","kind":"cut","a":{"op":"boolean","kind":"cut","a":{"op":"boolean","kind":"cut","a":{"op":"extrude","profile":[[17.156428286968527,-2.7787350420840893],[17.210859034728493,-2.418828494685937],[18.56061303569272,-2.2789567216762574],[20.88783267081867,-2.048069900145029],[21.726945014658973,-1.519295998147049],[21.726945014658973,1.519295998147049],[20.88783267081867,2.048069900145029],[18.56061303569272,2.2789567216762574],[17.210859034728493,2.418828494685937],[17.156428286968527,2.7787350420840893],[17.072152417664608,3.2566872474998934],[17.000205300753542,3.613505186412657],[18.220720211483897,4.2065847162302745],[20.32862338576771,5.2195033518159715],[20.936279737536587,6.003381609694242],[19.89702006745585,8.858724086190929],[18.927661064190527,9.068615695856005],[16.66182200232248,8.489622345129524],[15.34562916388815,8.159415761218781],[15.17138570294929,8.479000875831174],[14.928723008654947,8.899304991450531],[14.739075911198682,9.2099968123731],[15.683139620579428,10.184749954781006],[17.317482101864858,11.857527467882596],[17.620390137486357,12.801962794930066],[15.667220851375824,15.129659308596962],[14.684534190694514,14.995352600133277],[12.753369333168724,13.676314220278487],[11.629489938516956,12.915857066797109],[11.356450097348032,13.156574067227526],[10.984669280315108,13.46853521367864],[10.70019644115994,13.695626897684827],[11.253940932943305,14.934484037884376],[12.217596897661192,17.065358772855014],[12.179221437592869,18.056438330248806],[9.547723577066108,19.57573432839586],[8.670235773157486,19.113428673000044],[7.306672102749422,17.213440759560633],[6.510662593568553,16.11445539237076],[6.171759006653423,16.24727025576273],[5.715702320316577,16.413261314727418],[5.370715362236586,16.52936225320977],[5.467350878315178,17.882898936508763],[5.644089195073197,20.21485595194925],[5.269058886160767,21.133040918291204],[2.2766299299694923,21.660686881120995],[1.6101789623256733,20.9261431637386],[0.9786823817430521,18.67437229991053],[0.6065532526894687,17.369412573591884],[0.2426626942943462,17.378305867281707],[-0.2426626942943441,17.378305867281707],[-0.6065532526894666,17.369412573591884],[-0.9786823817430498,18.67437229991053],[-1.6101789623256706,20.9261431637386],[-2.2766299299694897,21.660686881120995],[-5.269058886160765,21.133040918291204],[-5.644089195073194,20.21485595194925],[-5.467350878315175,17.882898936508763],[-5.370715362236584,16.52936225320977],[-5.715702320316575,16.41326131472742],[-6.171759006653418,16.247270255762732],[-6.510662593568547,16.114455392370765],[-7.306672102749416,17.213440759560633],[-8.67023577315748,19.113428673000044],[-9.547723577066101,19.57573432839586],[-12.179221437592863,18.05643833024881],[-12.217596897661188,17.065358772855017],[-11.253940932943298,14.93448403788438],[-10.70019644115994,13.695626897684829],[-10.984669280315108,13.468535213678642],[-11.356450097348032,13.156574067227526],[-11.629489938516949,12.915857066797114],[-12.753369333168719,13.676314220278488],[-14.684534190694508,14.995352600133282],[-15.667220851375818,15.129659308596965],[-17.620390137486353,12.801962794930068],[-17.317482101864858,11.857527467882598],[-15.683139620579427,10.18474995478101],[-14.739075911198682,9.2099968123731],[-14.928723008654943,8.89930499145054],[-15.171385702949289,8.47900087583118],[-15.345629163888146,8.159415761218787],[-16.661822002322477,8.489622345129526],[-18.927661064190527,9.06861569585601],[-19.897020067455845,8.858724086190934],[-20.936279737536587,6.003381609694244],[-20.32862338576771,5.219503351815973],[-18.220720211483897,4.206584716230279],[-17.000205300753542,3.613505186412657],[-17.072152417664608,3.256687247499893],[-17.156428286968527,2.778735042084088],[-17.21085903472849,2.4188284946859424],[-18.56061303569272,2.278956721676259],[-20.88783267081867,2.0480699001450344],[-21.726945014658973,1.519295998147054],[-21.726945014658973,-1.5192959981470486],[-20.88783267081867,-2.048069900145029],[-18.56061303569272,-2.2789567216762547],[-17.21085903472849,-2.4188284946859384],[-17.15642828696853,-2.7787350420840835],[-17.072152417664608,-3.2566872474998885],[-17.000205300753542,-3.6135051864126524],[-18.220720211483897,-4.2065847162302745],[-20.32862338576771,-5.219503351815968],[-20.936279737536587,-6.003381609694238],[-19.89702006745585,-8.858724086190929],[-18.927661064190527,-9.068615695856005],[-16.66182200232248,-8.489622345129522],[-15.345629163888148,-8.159415761218783],[-15.17138570294929,-8.479000875831176],[-14.928723008654945,-8.899304991450537],[-14.739075911198684,-9.209996812373099],[-15.683139620579428,-10.184749954781006],[-17.31748210186486,-11.857527467882594],[-17.62039013748636,-12.801962794930063],[-15.667220851375822,-15.129659308596963],[-14.68453419069451,-14.995352600133279],[-12.753369333168724,-13.676314220278487],[-11.629489938516954,-12.915857066797113],[-11.356450097348034,-13.156574067227524],[-10.98466928031511,-13.468535213678638],[-10.70019644115995,-13.69562689768482],[-11.253940932943314,-14.934484037884367],[-12.217596897661199,-17.06535877285501],[-12.179221437592876,-18.056438330248803],[-9.547723577066114,-19.575734328395853],[-8.670235773157488,-19.113428673000044],[-7.30667210274942,-17.213440759560633],[-6.510662593568555,-16.11445539237076],[-6.171759006653433,-16.247270255762725],[-5.715702320316573,-16.41326131472742],[-5.370715362236588,-16.52936225320977],[-5.467350878315184,-17.88289893650876],[-5.644089195073199,-20.214855951949247],[-5.269058886160765,-21.133040918291204],[-2.27662992996949,-21.660686881120995],[-1.6101789623256666,-20.9261431637386],[-0.978682381743042,-18.674372299910534],[-0.6065532526894631,-17.369412573591884],[-0.24266269429434834,-17.378305867281707],[0.24266269429434195,-17.378305867281707],[0.6065532526894568,-17.369412573591884],[0.9786823817430351,-18.674372299910534],[1.6101789623256586,-20.9261431637386],[2.276629929969482,-21.660686881120995],[5.2690588861607575,-21.133040918291208],[5.6440891950731915,-20.21485595194925],[5.467350878315177,-17.882898936508763],[5.370715362236583,-16.52936225320977],[5.715702320316566,-16.41326131472742],[6.171759006653426,-16.24727025576273],[6.51066259356855,-16.114455392370765],[7.306672102749414,-17.213440759560637],[8.670235773157481,-19.113428673000044],[9.547723577066106,-19.57573432839586],[12.17922143759287,-18.056438330248806],[12.217596897661195,-17.065358772855014],[11.25394093294331,-14.93448403788437],[10.700196441159944,-13.695626897684823],[10.984669280315106,-13.468535213678642],[11.35645009734803,-13.156574067227528],[11.629489938516947,-12.915857066797116],[12.753369333168713,-13.676314220278497],[14.684534190694507,-14.995352600133284],[15.667220851375816,-15.129659308596969],[17.620390137486353,-12.80196279493007],[17.317482101864858,-11.857527467882601],[15.683139620579428,-10.184749954781005],[14.739075911198682,-9.209996812373102],[14.928723008654941,-8.899304991450542],[15.171385702949287,-8.479000875831181],[15.345629163888143,-8.159415761218796],[16.66182200232247,-8.489622345129543],[18.92766106419052,-9.068615695856021],[19.89702006745584,-8.858724086190945],[20.93627973753658,-6.003381609694255],[20.328623385767706,-5.219503351815984],[18.220720211483897,-4.206584716230282],[17.00020530075354,-3.613505186412666],[17.072152417664604,-3.2566872474999102],[17.156428286968527,-2.7787350420840893]],"vector":[0.0,0.0,6.0]},"b":{"op":"cylinder","r":4.2,"h":8.0,"pnt":[0.0,0.0,-1.0],"dir":[0,0,1],"angle":360.0}},"b":{"op":"cylinder","r":2.8,"h":8.0,"pnt":[11.675169794039304,3.7934926229468546,-1.0],"dir":[0,0,1],"angle":360.0}},"b":{"op":"cylinder","r":2.8,"h":8.0,"pnt":[7.516882053166454e-16,12.276,-1.0],"dir":[0,0,1],"angle":360.0}},"b":{"op":"cylinder","r":2.8,"h":8.0,"pnt":[-11.675169794039304,3.7934926229468555,-1.0],"dir":[0,0,1],"angle":360.0}},"b":{"op":"cylinder","r":2.8,"h":8.0,"pnt":[-7.215651757142402,-9.931492622946854,-1.0],"dir":[0,0,1],"angle":360.0}},"b":{"op":"cylinder","r":2.8,"h":8.0,"pnt":[7.215651757142398,-9.931492622946855,-1.0],"dir":[0,0,1],"angle":360.0}}},{"name":"Hub","color":[0.27,0.38,0.35],"opacity":1.0,"node":{"op":"boolean","kind":"cut","a":{"op":"cylinder","r":6.8,"h":9.0,"pnt":[0.0,0.0,-1.5],"dir":[0,0,1],"angle":360.0},"b":{"op":"cylinder","r":4.2,"h":11.0,"pnt":[0.0,0.0,-2.5],"dir":[0,0,1],"angle":360.0}}}],"errors":[],"log":[]}
+{"objects":[{"name":"GearPlate","color":[0.94,0.68,0.32],"opacity":1.0,"node":{"op":"boolean","kind":"cut","a":{"op":"boolean","kind":"cut","a":{"op":"boolean","kind":"cut","a":{"op":"boolean","kind":"cut","a":{"op":"boolean","kind":"cut","a":{"op":"boolean","kind":"cut","a":{"op":"extrude","profile":[[17.156428286968527,-2.7787350420840893],[17.210859034728493,-2.418828494685937],[18.56061303569272,-2.2789567216762574],[20.88783267081867,-2.048069900145029],[21.726945014658973,-1.519295998147049],[21.726945014658973,1.519295998147049],[20.88783267081867,2.048069900145029],[18.56061303569272,2.2789567216762574],[17.210859034728493,2.418828494685937],[17.156428286968527,2.7787350420840893],[17.072152417664608,3.2566872474998934],[17.000205300753542,3.613505186412657],[18.220720211483897,4.2065847162302745],[20.32862338576771,5.2195033518159715],[20.936279737536587,6.003381609694242],[19.89702006745585,8.858724086190929],[18.927661064190527,9.068615695856005],[16.66182200232248,8.489622345129524],[15.34562916388815,8.159415761218781],[15.17138570294929,8.479000875831174],[14.928723008654947,8.899304991450531],[14.739075911198682,9.2099968123731],[15.683139620579428,10.184749954781006],[17.317482101864858,11.857527467882596],[17.620390137486357,12.801962794930066],[15.667220851375824,15.129659308596962],[14.684534190694514,14.995352600133277],[12.753369333168724,13.676314220278487],[11.629489938516956,12.915857066797109],[11.356450097348032,13.156574067227526],[10.984669280315108,13.46853521367864],[10.70019644115994,13.695626897684827],[11.253940932943305,14.934484037884376],[12.217596897661192,17.065358772855014],[12.179221437592869,18.056438330248806],[9.547723577066108,19.57573432839586],[8.670235773157486,19.113428673000044],[7.306672102749422,17.213440759560633],[6.510662593568553,16.11445539237076],[6.171759006653423,16.24727025576273],[5.715702320316577,16.413261314727418],[5.370715362236586,16.52936225320977],[5.467350878315178,17.882898936508763],[5.644089195073197,20.21485595194925],[5.269058886160767,21.133040918291204],[2.2766299299694923,21.660686881120995],[1.6101789623256733,20.9261431637386],[0.9786823817430521,18.67437229991053],[0.6065532526894687,17.369412573591884],[0.2426626942943462,17.378305867281707],[-0.2426626942943441,17.378305867281707],[-0.6065532526894666,17.369412573591884],[-0.9786823817430498,18.67437229991053],[-1.6101789623256706,20.9261431637386],[-2.2766299299694897,21.660686881120995],[-5.269058886160765,21.133040918291204],[-5.644089195073194,20.21485595194925],[-5.467350878315175,17.882898936508763],[-5.370715362236584,16.52936225320977],[-5.715702320316575,16.41326131472742],[-6.171759006653418,16.247270255762732],[-6.510662593568547,16.114455392370765],[-7.306672102749416,17.213440759560633],[-8.67023577315748,19.113428673000044],[-9.547723577066101,19.57573432839586],[-12.179221437592863,18.05643833024881],[-12.217596897661188,17.065358772855017],[-11.253940932943298,14.93448403788438],[-10.70019644115994,13.695626897684829],[-10.984669280315108,13.468535213678642],[-11.356450097348032,13.156574067227526],[-11.629489938516949,12.915857066797114],[-12.753369333168719,13.676314220278488],[-14.684534190694508,14.995352600133282],[-15.667220851375818,15.129659308596965],[-17.620390137486353,12.801962794930068],[-17.317482101864858,11.857527467882598],[-15.683139620579427,10.18474995478101],[-14.739075911198682,9.2099968123731],[-14.928723008654943,8.89930499145054],[-15.171385702949289,8.47900087583118],[-15.345629163888146,8.159415761218787],[-16.661822002322477,8.489622345129526],[-18.927661064190527,9.06861569585601],[-19.897020067455845,8.858724086190934],[-20.936279737536587,6.003381609694244],[-20.32862338576771,5.219503351815973],[-18.220720211483897,4.206584716230279],[-17.000205300753542,3.613505186412657],[-17.072152417664608,3.256687247499893],[-17.156428286968527,2.778735042084088],[-17.21085903472849,2.4188284946859424],[-18.56061303569272,2.278956721676259],[-20.88783267081867,2.0480699001450344],[-21.726945014658973,1.519295998147054],[-21.726945014658973,-1.5192959981470486],[-20.88783267081867,-2.048069900145029],[-18.56061303569272,-2.2789567216762547],[-17.21085903472849,-2.4188284946859384],[-17.15642828696853,-2.7787350420840835],[-17.072152417664608,-3.2566872474998885],[-17.000205300753542,-3.6135051864126524],[-18.220720211483897,-4.2065847162302745],[-20.32862338576771,-5.219503351815968],[-20.936279737536587,-6.003381609694238],[-19.89702006745585,-8.858724086190929],[-18.927661064190527,-9.068615695856005],[-16.66182200232248,-8.489622345129522],[-15.345629163888148,-8.159415761218783],[-15.17138570294929,-8.479000875831176],[-14.928723008654945,-8.899304991450537],[-14.739075911198684,-9.209996812373099],[-15.683139620579428,-10.184749954781006],[-17.31748210186486,-11.857527467882594],[-17.62039013748636,-12.801962794930063],[-15.667220851375822,-15.129659308596963],[-14.68453419069451,-14.995352600133279],[-12.753369333168724,-13.676314220278487],[-11.629489938516954,-12.915857066797113],[-11.356450097348034,-13.156574067227524],[-10.98466928031511,-13.468535213678638],[-10.70019644115995,-13.69562689768482],[-11.253940932943314,-14.934484037884367],[-12.217596897661199,-17.06535877285501],[-12.179221437592876,-18.056438330248803],[-9.547723577066114,-19.575734328395853],[-8.670235773157488,-19.113428673000044],[-7.30667210274942,-17.213440759560633],[-6.510662593568555,-16.11445539237076],[-6.171759006653433,-16.247270255762725],[-5.715702320316573,-16.41326131472742],[-5.370715362236588,-16.52936225320977],[-5.467350878315184,-17.88289893650876],[-5.644089195073199,-20.214855951949247],[-5.269058886160765,-21.133040918291204],[-2.27662992996949,-21.660686881120995],[-1.6101789623256666,-20.9261431637386],[-0.978682381743042,-18.674372299910534],[-0.6065532526894631,-17.369412573591884],[-0.24266269429434834,-17.378305867281707],[0.24266269429434195,-17.378305867281707],[0.6065532526894568,-17.369412573591884],[0.9786823817430351,-18.674372299910534],[1.6101789623256586,-20.9261431637386],[2.276629929969482,-21.660686881120995],[5.2690588861607575,-21.133040918291208],[5.6440891950731915,-20.21485595194925],[5.467350878315177,-17.882898936508763],[5.370715362236583,-16.52936225320977],[5.715702320316566,-16.41326131472742],[6.171759006653426,-16.24727025576273],[6.51066259356855,-16.114455392370765],[7.306672102749414,-17.213440759560637],[8.670235773157481,-19.113428673000044],[9.547723577066106,-19.57573432839586],[12.17922143759287,-18.056438330248806],[12.217596897661195,-17.065358772855014],[11.25394093294331,-14.93448403788437],[10.700196441159944,-13.695626897684823],[10.984669280315106,-13.468535213678642],[11.35645009734803,-13.156574067227528],[11.629489938516947,-12.915857066797116],[12.753369333168713,-13.676314220278497],[14.684534190694507,-14.995352600133284],[15.667220851375816,-15.129659308596969],[17.620390137486353,-12.80196279493007],[17.317482101864858,-11.857527467882601],[15.683139620579428,-10.184749954781005],[14.739075911198682,-9.209996812373102],[14.928723008654941,-8.899304991450542],[15.171385702949287,-8.479000875831181],[15.345629163888143,-8.159415761218796],[16.66182200232247,-8.489622345129543],[18.92766106419052,-9.068615695856021],[19.89702006745584,-8.858724086190945],[20.93627973753658,-6.003381609694255],[20.328623385767706,-5.219503351815984],[18.220720211483897,-4.206584716230282],[17.00020530075354,-3.613505186412666],[17.072152417664604,-3.2566872474999102],[17.156428286968527,-2.7787350420840893]],"vector":[0.0,0.0,6.0]},"b":{"op":"cylinder","r":4.5,"h":8.0,"pnt":[0.0,0.0,-1.0],"dir":[0,0,1],"angle":360.0}},"b":{"op":"cylinder","r":2.8,"h":8.0,"pnt":[11.675169794039304,3.7934926229468546,-1.0],"dir":[0,0,1],"angle":360.0}},"b":{"op":"cylinder","r":2.8,"h":8.0,"pnt":[7.516882053166454e-16,12.276,-1.0],"dir":[0,0,1],"angle":360.0}},"b":{"op":"cylinder","r":2.8,"h":8.0,"pnt":[-11.675169794039304,3.7934926229468555,-1.0],"dir":[0,0,1],"angle":360.0}},"b":{"op":"cylinder","r":2.8,"h":8.0,"pnt":[-7.215651757142402,-9.931492622946854,-1.0],"dir":[0,0,1],"angle":360.0}},"b":{"op":"cylinder","r":2.8,"h":8.0,"pnt":[7.215651757142398,-9.931492622946855,-1.0],"dir":[0,0,1],"angle":360.0}}},{"name":"Hub","color":[0.27,0.38,0.35],"opacity":1.0,"node":{"op":"boolean","kind":"cut","a":{"op":"cylinder","r":6.8,"h":9.0,"pnt":[0.0,0.0,-1.5],"dir":[0,0,1],"angle":360.0},"b":{"op":"cylinder","r":4.15,"h":11.0,"pnt":[0.0,0.0,-2.5],"dir":[0,0,1],"angle":360.0}}}],"errors":[],"log":[]}

style.css

@@ -1005,17 +1005,28 @@ svg {
 
 .canvas-error {
   position: absolute;
-  inset: 14px;
+  inset: 0;
   z-index: 4;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 18px;
+  background: rgba(243, 238, 227, 0.58);
+  backdrop-filter: blur(3px);
+}
+
+.error-card {
   display: flex;
   flex-direction: column;
+  width: min(100%, 640px);
+  max-height: 100%;
   min-height: 0;
-  padding: 11px 13px 10px;
+  padding: 13px 15px 12px;
+  overflow: hidden;
   border: 1px solid #e6c7ba;
   border-radius: 12px;
-  background: rgba(251, 249, 243, 0.975);
+  background: rgba(251, 249, 243, 0.99);
   box-shadow: 0 26px 60px -36px rgba(74, 45, 26, 0.55);
-  backdrop-filter: blur(8px);
 }
 
 .error-head {
@@ -1030,7 +1041,7 @@ svg {
 }
 
 .canvas-error pre {
-  flex: 1;
+  flex: 0 1 auto;
   min-height: 0;
   margin: 9px 0;
   padding: 10px;
@@ -1040,7 +1051,7 @@ svg {
   background: #f6efe4;
   color: #6e3a2c;
   font-family: var(--mono);
-  font-size: 10px;
+  font-size: 10.5px;
   line-height: 1.55;
   white-space: pre-wrap;
   word-break: break-word;
@@ -1212,16 +1223,6 @@ svg {
     display: none;
   }
 
-  .runtime-text {
-    display: none;
-  }
-
-  .runtime {
-    width: 30px;
-    padding: 0;
-    justify-content: center;
-  }
-
   .btn.run kbd {
     display: none;
   }
@@ -1277,8 +1278,8 @@ svg {
   }
 
   .example-card {
-    width: 196px;
-    flex: 0 0 196px;
+    width: 186px;
+    flex: 0 0 186px;
     padding: 6px;
   }
 
@@ -1394,11 +1395,11 @@ svg {
     height: 40px;
   }
 
-  .object-count {
-    display: none;
+  .canvas-error {
+    padding: 10px;
   }
 
-  .canvas-error {
-    inset: 9px;
+  .error-card {
+    padding: 11px 12px 10px;
   }
 }