v0.6.5: size hero detail drawer from viewport; add PC post-lock item tips.

Co-authored-by: Cursor <cursoragent@cursor.com>

web/frontend/app.js

@@ -445,10 +445,40 @@ let detailDrawerDrag = null;
 let detailDrawerSuppressClickUntil = 0;
 let detailDrawerClosing = false;
 
+/** Cap / floor for the in-flow hero detail drawer (px). */
+const DETAIL_DRAWER_MAX_H = 640;
+const DETAIL_DRAWER_MIN_H = 320;
+
+/**
+ * Height that leaves topbar + a usable hero-grid strip + role tags visible.
+ * Prefer ~24% of the viewport for the grid; never steal the whole screen.
+ */
+function detailDrawerTargetHeight() {
+  const vh = window.innerHeight || 800;
+  const topbar = document.querySelector(".topbar")?.offsetHeight || 60;
+  const toolbar = document.querySelector(".hero-role-toolbar")?.offsetHeight || 52;
+  const chrome = topbar + toolbar;
+  const heroPrefer = Math.round(vh * 0.24);
+  const heroReserve = Math.min(
+    Math.max(140, heroPrefer),
+    Math.max(120, vh - chrome - DETAIL_DRAWER_MIN_H)
+  );
+  const available = vh - chrome - heroReserve;
+  return Math.max(DETAIL_DRAWER_MIN_H, Math.min(DETAIL_DRAWER_MAX_H, available));
+}
+
+function applyDetailDrawerHeight() {
+  const drawer = $("#detail-drawer");
+  const h = detailDrawerTargetHeight();
+  if (drawer) drawer.style.setProperty("--detail-fixed-h", `${h}px`);
+  return h;
+}
+
 function detailDrawerFullHeight() {
+  const h = applyDetailDrawerHeight();
   const panel = $("#detail");
   if (panel && panel.offsetHeight) return panel.offsetHeight;
-  return Math.min(720, Math.round((window.innerHeight || 800) * 0.88));
+  return h;
 }
 
 function syncDetailDrawer() {
@@ -463,6 +493,7 @@ function syncDetailDrawer() {
     resetDetailDrawerDrag();
     return;
   }
+  applyDetailDrawerHeight();
   drawer.classList.remove("is-collapsed");
   drawer.style.maxHeight = "";
 }
@@ -6090,7 +6121,17 @@ async function main() {
     if (t.closest && t.closest(".skill-icon.talent-trigger")) return;
     closeTalentPopover();
   });
-  window.addEventListener("resize", closeTalentPopover);
+  window.addEventListener("resize", () => {
+    closeTalentPopover();
+    if (
+      state.page === "heroes" &&
+      state.selectedKey &&
+      !detailDrawerClosing &&
+      !detailDrawerDrag
+    ) {
+      applyDetailDrawerHeight();
+    }
+  });
   document.addEventListener(
     "scroll",
     (e) => {