Improve responsive gallery layout

app.js

@@ -575,17 +575,24 @@ function pathProgress(path,progress){
 
 function updateView(){
   const bounds=state.current?.bounds||geometryBounds(state.current?.paths);
+  const galleryRect=galleryOpen?ui.gallery.getBoundingClientRect():null;
+  const actionTop=document.querySelector('.action-bar').getBoundingClientRect().top;
+  const formulaVisible=ui.formula.getClientRects().length>0;
+  const compactLandscape=galleryOpen&&height<520;
   let left,right,top,bottom;
   if(width>=1180){
     left=386;right=galleryOpen?width-326:width-34;top=82;bottom=height-116;
+  }else if(compactLandscape){
+    left=22;right=galleryRect.left-14;top=82;bottom=actionTop-14;
   }else if(width>760){
-    left=356;right=width-28;top=82;bottom=height-112;
+    left=formulaVisible?356:22;right=width-28;top=82;
+    bottom=galleryOpen?galleryRect.top-14:actionTop-14;
   }else{
-    left=22;right=width-22;top=Math.max(270,ui.formula.getBoundingClientRect().bottom+14);
+    left=22;right=width-22;top=formulaVisible?Math.max(270,ui.formula.getBoundingClientRect().bottom+14):82;
-    bottom=Math.min(height-112,document.querySelector('.action-bar').getBoundingClientRect().top-14);
+    bottom=galleryOpen?galleryRect.top-14:actionTop-14;
   }
   if(right-left<160){left=22;right=width-22}
-  if(bottom-top<150&&width>760){top=76;bottom=height-98}
+  if(bottom-top<90)top=Math.max(72,bottom-90);
   const worldWidth=Math.max(.08,bounds.maxX-bounds.minX),worldHeight=Math.max(.08,bounds.maxY-bounds.minY);
   const scale=Math.min((right-left)/worldWidth,(bottom-top)/worldHeight)*.88;
   view.scale=Math.min(scale,Math.min(width,height)*2.1);
@@ -1036,6 +1043,7 @@ function renderArchive(){
 function setGallery(open){
   galleryOpen=open;
   ui.gallery.classList.toggle('open',open);ui.gallery.classList.toggle('closed',!open);
+  document.body.classList.toggle('gallery-open',open);
   document.querySelector('#gallery-toggle').setAttribute('aria-expanded',String(open));
   hideArchivePreview();updateView();render(lastProgress);
 }
@@ -1092,8 +1100,7 @@ document.addEventListener('keydown',event=>{
   if(event.code==='Space'){event.preventDefault();if(!ui.cross.disabled)crossSelected()}
 });
 addEventListener('resize',()=>{
-  const wasDesktop=width>=1180;resize();
+  resize();
-  if(wasDesktop!==(width>=1180))setGallery(width>=1180);
 });
 addEventListener('beforeunload',saveState);
 
@@ -1102,8 +1109,9 @@ async function boot(){
   syncBreedingUI();
   await refreshStorageStatus();
   ensureInitialPopulation();
-  galleryOpen=innerWidth>=1180;
+  galleryOpen=true;
   ui.gallery.classList.toggle('closed',!galleryOpen);ui.gallery.classList.toggle('open',galleryOpen);
+  document.body.classList.toggle('gallery-open',galleryOpen);
   document.querySelector('#gallery-toggle').setAttribute('aria-expanded',String(galleryOpen));
   if(state.current)state.current=runtimeFormula(state.current);
   resize();renderArchive();

index.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#07100f" />
     <title>Fractalier — Mathematical Fractal Generator</title>
-    <link rel="stylesheet" href="style.css?v=39" />
+    <link rel="stylesheet" href="style.css?v=40" />
   </head>
   <body>
     <main>
@@ -134,6 +134,6 @@
         <span id="storage-status">checking local storage…</span>
       </footer>
     </main>
-    <script src="app.js?v=39"></script>
+    <script src="app.js?v=40"></script>
   </body>
 </html>

style.css

@@ -121,10 +121,14 @@ footer span:last-child{text-align:right}
 .live{display:inline-block;width:5px;height:5px;margin-right:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 7px var(--lime)}
 
 @media(max-width:1179px){
-  .gallery-panel{display:none;top:76px;right:12px;bottom:105px;width:300px;box-shadow:0 20px 60px rgba(0,0,0,.55)}
+  .gallery-panel{
+    display:none;top:auto;right:12px;bottom:128px;left:12px;width:auto;height:clamp(200px,32vh,260px);
+    box-shadow:0 20px 60px rgba(0,0,0,.55)
+  }
   .gallery-panel.open{display:block}
   .gallery-head button{display:block}
   .formula-panel{top:78px;left:12px;width:320px}
+  .archive{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
   .action-bar{width:min(620px,calc(100% - 48px));min-width:0}
 }
 
@@ -141,8 +145,12 @@ footer span:last-child{text-align:right}
   .equation{margin-top:9px;padding:8px 0;font-size:7.5px}
   .equation span{overflow:hidden;text-overflow:ellipsis}
   .traits{gap:6px 8px;margin-top:8px}
-  .gallery-panel,.gallery-panel.open{top:72px;right:10px;bottom:158px;left:10px;width:auto}
+  body.gallery-open .formula-panel{display:none}
-  .archive{grid-template-columns:repeat(3,1fr)}
+  .gallery-panel,.gallery-panel.open{
+    top:auto;right:10px;bottom:158px;left:10px;width:auto;height:clamp(190px,32vh,230px)
+  }
+  .gallery-help{display:none}
+  .archive{grid-template-columns:repeat(3,1fr);max-height:calc(100% - 75px)}
   .genome-preview{display:none!important}
   .action-bar{right:10px;bottom:40px;left:10px;width:auto;flex-direction:column;gap:7px;padding:8px;transform:none}
   .action-copy{display:none}
@@ -157,10 +165,26 @@ footer span:last-child{text-align:right}
   footer>span:nth-child(2){display:none}
 }
 
+@media(max-height:700px) and (max-width:1179px){
+  body.gallery-open .formula-panel{display:none}
+}
+
+@media(max-height:520px) and (max-width:1179px){
+  .gallery-panel,.gallery-panel.open{
+    top:72px;right:10px;bottom:158px;left:auto;width:min(280px,44vw);height:auto
+  }
+  .gallery-help{display:none}
+  .archive{grid-template-columns:repeat(2,1fr);max-height:calc(100% - 75px)}
+  .action-copy{display:none}
+}
+
 @media(max-height:620px) and (min-width:761px){
+  .action-bar{bottom:38px}
+}
+
+@media(max-height:620px) and (min-width:1180px){
   .formula-panel{top:74px}
   .gallery-panel{top:74px;bottom:94px}
-  .action-bar{bottom:38px}
 }
 
 @media(prefers-reduced-motion:reduce){