Upload index.html with huggingface_hub

index.html

@@ -88,45 +88,41 @@ select:hover,select:focus{border-color:var(--accent)}
   #splash-content p{font-size:0.9rem;margin-bottom:24px}
   #splash-content .cta{font-size:0.78rem;padding:8px 22px}
 
-  /* App: vertical scrollable layout */
-  #app{flex-direction:column;height:auto;min-height:100vh;overflow:visible}
+  /* App: vertical layout, calc-based so everything fits in viewport */
+  #app{flex-direction:column;height:100vh;overflow:hidden}
 
-  /* Sidebar → top panel */
-  #sidebar{width:100%;min-width:unset;flex-direction:column;gap:10px;padding:14px 16px;
+  /* Sidebar → compact top panel */
+  #sidebar{width:100%;min-width:unset;flex-direction:column;gap:8px;padding:10px 14px;
     border-right:none;border-bottom:1px solid var(--border);flex-shrink:0}
-  #sidebar h1{font-size:1.1rem}
+  #sidebar h1{font-size:1rem}
   #sidebar p.sub{display:none}
   .control-group{flex-direction:row;align-items:center;gap:8px}
   .control-group label{min-width:fit-content;margin:0;white-space:nowrap}
-  select{flex:1;min-width:0;font-size:0.78rem;padding:8px 30px 8px 8px}
-
-  /* Info card: horizontal legend */
-  .info-card{padding:10px}
-  .legend{flex-direction:row;flex-wrap:wrap;gap:6px}
-  .legend-item{font-size:0.6rem}
+  select{flex:1;min-width:0;font-size:0.78rem;padding:7px 30px 7px 8px}
 
+  /* Hide info card on mobile to save space */
+  .info-card{display:none}
   .credits{display:none}
 
-  /* Main: no flex grow, fixed heights */
-  #main{flex:none;width:100%}
-  #viewer-container{height:50vh;min-height:260px;flex:none}
+  /* 3D viewer takes remaining space minus fields */
+  #main{flex:1;min-height:0;display:flex;flex-direction:column}
+  #viewer-container{flex:1;min-height:0}
   #viewer-label{font-size:0.6rem;top:6px;left:8px;padding:2px 8px}
 
-  /* Fields panel: side by side but shorter */
-  #fields-panel{height:180px;min-height:180px;flex-shrink:0}
-  .field-title{font-size:0.72rem;margin-bottom:4px}
-  .field-canvas-wrap canvas{max-height:130px}
+  /* Fields panel: fixed height, side by side */
+  #fields-panel{height:200px;min-height:200px;max-height:200px;flex-shrink:0}
+  .field-title{font-size:0.7rem;margin-bottom:3px}
+  .field-canvas-wrap canvas{max-height:150px}
 }
 
 /* Small phones */
 @media(max-width:480px){
   #splash-content h1{font-size:1.6rem}
   #splash-content p{font-size:0.8rem}
-  #sidebar{padding:10px 12px;gap:8px}
-  .control-group{flex-direction:column;gap:4px}
-  #viewer-container{height:45vh;min-height:220px}
-  #fields-panel{height:160px;min-height:160px}
-  .field-canvas-wrap canvas{max-height:110px}
+  #sidebar{padding:8px 10px;gap:6px}
+  .control-group{flex-direction:column;gap:3px}
+  #fields-panel{height:170px;min-height:170px;max-height:170px}
+  .field-canvas-wrap canvas{max-height:125px}
 }
 </style>
 </head>