fix(quests): fix island rendering problems on desktop view

src/components/AppSidebar.tsx

@@ -19,6 +19,7 @@ import {
   Zap,
   Trophy,
   Map,
+  SquareLibrary,
 } from "lucide-react";
 
 import { useState } from "react";
@@ -478,7 +479,7 @@ export function AppSidebar() {
                     >
                       {({ isActive }) => (
                         <>
-                          <Video
+                          <SquareLibrary
                             size={18}
                             strokeWidth={3}
                             className={

src/components/InfoHeader.tsx

@@ -17,11 +17,10 @@ import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
 import { Drawer, DrawerContent, DrawerTrigger } from "./ui/drawer";
 import { PredictedScoreCard } from "./PredictedScoreCard";
 import { ChestOpenModal } from "./ChestOpenModal";
-// Re-use the same theme generator that QuestMap uses so arc colours are consistent
 import { generateArcTheme } from "../pages/student/QuestMap";
 import { InventoryButton } from "./InventoryButton";
 
-// ─── Requirement helpers (mirrors QuestMap) ───────────────────────────────────
+// ─── Requirement helpers ──────────────────────────────────────────────────────
 const REQ_EMOJI: Record<string, string> = {
   questions: "❓",
   accuracy: "🎯",
@@ -256,37 +255,93 @@ const STYLES = `
     border: 1px solid rgba(251,191,36,0.18); border-radius: 100px;
     padding: 0.2rem 0.6rem;
   }
+
+  /* ── Rank ladder scroll container ──
+     Always scrollable on mobile. On desktop (≥1024px) we lock the width and
+     disable scrolling — nodes are spaced by percentage so no overflow occurs. */
   .hc-ext-scroll {
-    position: relative; z-index: 2;
+    overflow-x: auto;
-    overflow-x: auto; overflow-y: hidden;
+    overflow-y: hidden;
-    -webkit-overflow-scrolling: touch; scrollbar-width: none;
+    scrollbar-width: none;
-    cursor: grab; padding: 1.0rem 1.0rem 0.8rem;
+    -webkit-overflow-scrolling: touch;
+    cursor: grab;
+    position: relative;
+    z-index: 2;
   }
   .hc-ext-scroll::-webkit-scrollbar { display: none; }
   .hc-ext-scroll:active { cursor: grabbing; }
+
+  /* ── Rank ladder inner track ──
+     On mobile: fixed pixel width (fits all 6 nodes without squishing).
+     On desktop: 100% width, nodes spaced purely by percentage. */
   .hc-ext-inner {
-    display: flex; align-items: flex-end;
+    display: flex;
+    align-items: flex-end;
     position: relative;
     height: 110px;
+    /* Mobile: fixed width so nodes have room and scroll kicks in */
+    width: 520px;
   }
+
+  @media (min-width: 1024px) {
+    .hc-ext-scroll {
+      overflow-x: hidden;
+      cursor: default;
+    }
+    .hc-ext-inner {
+      /* Desktop: fill the card width; percentage positions work correctly */
+      width: 100%;
+    }
+    /* Upscale fonts for desktop readability */
+    .hc-ext-title    { font-size: 0.72rem; }
+    .hc-ext-earned   { font-size: 0.82rem; }
+    .hc-ext-label-name { font-size: 0.56rem; }
+    .hc-ext-label-xp   { font-size: 0.5rem; }
+    .hc-ext-node     { width: 56px; height: 56px; font-size: 1.5rem; }
+    .hc-ext-ship     { font-size: 1.7rem; }
+  }
+
+  /* ── Baseline and progress line ──
+     Use percentage-based left/right so they align with percentage-positioned nodes
+     regardless of container width. A small inset (half a node width as %) keeps
+     the line from starting/ending at the very edge of the outer nodes. */
   .hc-ext-baseline {
     position: absolute;
-    top: 56px; left: 26px; right: 26px; height: 2px;
+    top: 56px;
+    /* Inset matches half the outer col width relative to inner width */
+    left: 4%;
+    right: 4%;
+    height: 2px;
     background: rgba(255,255,255,0.07);
-    border-radius: 2px; z-index: 0;
+    border-radius: 2px;
+    z-index: 0;
   }
   .hc-ext-progress-line {
     position: absolute;
-    top: 56px; left: 26px; height: 2px;
+    top: 56px;
+    left: 4%;
+    height: 2px;
     background: linear-gradient(90deg, #fbbf24, #f59e0b);
     box-shadow: 0 0 10px rgba(251,191,36,0.5);
-    border-radius: 2px; z-index: 1;
+    border-radius: 2px;
+    z-index: 1;
+    /* Width is set inline as a % of the 92% usable span (100% - 4% - 4%) */
     transition: width 1.2s cubic-bezier(0.34,1.56,0.64,1);
   }
+  .hc-ext-progress-line::after {
+    content: "";
+    position: absolute;
+    right: -6px; top: -3px;
+    width: 10px; height: 10px;
+    background: #fbbf24;
+    border-radius: 50%;
+    box-shadow: 0 0 10px rgba(251,191,36,0.9);
+  }
+
   .hc-ext-ship-wrap {
     position: absolute;
-    top: 25px; z-index: 10; pointer-events: none;
+    top: 20px; z-index: 10; pointer-events: none;
-    display: flex; flex-direction: column; align-items: center; gap: 0px;
+    display: flex; flex-direction: column; align-items: center;
     transition: left 1.2s cubic-bezier(0.34,1.56,0.64,1);
     transform: translateX(-50%);
   }
@@ -304,18 +359,23 @@ const STYLES = `
     width: 1px; height: 14px;
     background: linear-gradient(to bottom, rgba(251,191,36,0.5), transparent);
   }
+
+  /* ── Node columns ──
+     Each col takes an equal share; absolute positioning within .hc-ext-inner
+     is replaced by evenly-spaced flex. The node itself is centred in the col. */
   .hc-ext-col {
-    display: flex; flex-direction: column; align-items: center;
+    flex: 1;
-    position: relative; z-index: 2;
+    display: flex;
-    width: 88px; flex-shrink: 0;
+    flex-direction: column;
+    align-items: center;
+    position: relative;
+    z-index: 2;
   }
-  .hc-ext-col:first-child,
-  .hc-ext-col:last-child { width: 52px; }
   .hc-ext-node {
     width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
     display: flex; align-items: center; justify-content: center;
     font-size: 1.4rem; position: relative; z-index: 2;
-    margin-top: 42px;
+    margin-top: 30px;
   }
   .hc-ext-node.reached {
     background: linear-gradient(145deg, #1e0e4a, #3730a3);
@@ -377,7 +437,6 @@ function getActiveQuests(arcs: QuestArc[]) {
     for (const node of arc.nodes)
       if (node.status === "claimable" || node.status === "active")
         out.push({ node, arc });
-  // Claimable nodes bubble to the top
   out.sort((a, b) =>
     a.node.status === "claimable" && b.node.status !== "claimable"
       ? -1
@@ -388,14 +447,6 @@ function getActiveQuests(arcs: QuestArc[]) {
   return out.slice(0, 2);
 }
 
-const SEG_W = 88;
-const EDGE_W = 52;
-function nodeX(i: number, total: number): number {
-  if (i === 0) return EDGE_W / 2;
-  if (i === total - 1) return EDGE_W / 2 + SEG_W * (total - 2) + EDGE_W / 2;
-  return EDGE_W + SEG_W * (i - 1) + SEG_W / 2;
-}
-
 // ─── QUEST_EXTENDED sub-component ────────────────────────────────────────────
 const RankLadder = ({
   earnedXP,
@@ -425,12 +476,25 @@ const RankLadder = ({
       )
     : 1;
 
-  const shipX = nextRank
+  // ── Geometry ────────────────────────────────────────────────────────────────
-    ? nodeX(currentIdx, N) +
+  // Nodes are evenly distributed via flex (each col = flex:1).
-      (nodeX(currentIdx + 1, N) - nodeX(currentIdx, N)) * progressToNext
+  // The centre of node[i] sits at: leftInset + (i / (N-1)) * usableSpan
-    : nodeX(currentIdx, N);
+  // where leftInset = 4% and usableSpan = 92% (100% - 4% left - 4% right).
-  const progressLineW = shipX;
+  // The baseline and progress line also start at 4% so everything aligns.
-  const totalW = EDGE_W + SEG_W * (N - 2) + EDGE_W;
+  const LEFT_INSET_PCT = 4; // matches left: 4% on baseline/progress
+  const USABLE_PCT = 92; // 100 - 4 - 4
+
+  // Ship position as % of the inner container width
+  const nodePosPct = (i: number) => LEFT_INSET_PCT + (i / (N - 1)) * USABLE_PCT;
+
+  const shipPct = nextRank
+    ? nodePosPct(currentIdx) +
+      (nodePosPct(currentIdx + 1) - nodePosPct(currentIdx)) * progressToNext
+    : nodePosPct(currentIdx);
+
+  // Progress line width: distance from left inset to ship position
+  // expressed as % of the container (not of usable span)
+  const progressLinePct = shipPct - LEFT_INSET_PCT;
 
   const [animated, setAnimated] = useState(false);
   useEffect(() => {
@@ -440,14 +504,36 @@ const RankLadder = ({
     return () => cancelAnimationFrame(id);
   }, []);
 
+  // Mouse-drag scroll for mobile
   useEffect(() => {
-    if (!scrollRef.current) return;
     const el = scrollRef.current;
-    el.scrollTo({
+    if (!el) return;
-      left: Math.max(0, shipX - el.offsetWidth / 2),
+    let isDown = false,
-      behavior: "smooth",
+      startX = 0,
-    });
+      scrollLeft = 0;
-  }, [shipX]);
+    const down = (e: MouseEvent) => {
+      isDown = true;
+      startX = e.pageX - el.offsetLeft;
+      scrollLeft = el.scrollLeft;
+    };
+    const leave = () => (isDown = false);
+    const up = () => (isDown = false);
+    const move = (e: MouseEvent) => {
+      if (!isDown) return;
+      e.preventDefault();
+      el.scrollLeft = scrollLeft - (e.pageX - el.offsetLeft - startX) * 1.2;
+    };
+    el.addEventListener("mousedown", down);
+    el.addEventListener("mouseleave", leave);
+    el.addEventListener("mouseup", up);
+    el.addEventListener("mousemove", move);
+    return () => {
+      el.removeEventListener("mousedown", down);
+      el.removeEventListener("mouseleave", leave);
+      el.removeEventListener("mouseup", up);
+      el.removeEventListener("mousemove", move);
+    };
+  }, []);
 
   const rankPct = nextRank ? Math.round(progressToNext * 100) : 100;
   const nextLabel = nextRank
@@ -495,21 +581,28 @@ const RankLadder = ({
       </div>
 
       <div className="hc-ext-scroll" ref={scrollRef}>
-        <div className="hc-ext-inner" style={{ width: totalW }}>
+        <div className="hc-ext-inner">
+          {/* Baseline — left: 4%, right: 4% (set in CSS) */}
           <div className="hc-ext-baseline" />
+
+          {/* Progress line — starts at left: 4%, width grows to ship position */}
           <div
             className="hc-ext-progress-line"
-            style={{ width: animated ? progressLineW : 26 }}
+            style={{ width: animated ? `${progressLinePct}%` : "0%" }}
           />
+
+          {/* Ship — positioned as % of container */}
           <div
             className="hc-ext-ship-wrap"
-            style={{ left: animated ? shipX : nodeX(0, N) }}
+            style={{ left: animated ? `${shipPct}%` : `${nodePosPct(0)}%` }}
           >
             <span className="hc-ext-ship" role="img" aria-label="ship">
               ⛵
             </span>
             <div className="hc-ext-ship-tether" />
           </div>
+
+          {/* Nodes — evenly spaced via flex:1 on each col */}
           {ladder.map((r, i) => {
             const state =
               i < currentIdx
@@ -551,14 +644,11 @@ export const InfoHeader = ({ onViewAll, mode = "DEFAULT" }: Props) => {
   const navigate = useNavigate();
   const user = useAuthStore((s) => s.user);
 
-  // Select all needed store slices — earnedXP and earnedTitles are now first-class state
   const arcs = useQuestStore((s) => s.arcs);
   const earnedXP = user?.total_xp ?? 0;
   const earnedTitles = useQuestStore((s) => s.earnedTitles);
   const claimNode = useQuestStore((s) => s.claimNode);
 
-  // Updated signatures: getQuestSummary needs earnedXP + earnedTitles,
-  // getCrewRank takes earnedXP directly (no longer iterates nodes)
   const summary = getQuestSummary(arcs, earnedXP, earnedTitles);
   const rank = getCrewRank(earnedXP);
   const activeQuests = getActiveQuests(arcs);
@@ -598,7 +688,6 @@ export const InfoHeader = ({ onViewAll, mode = "DEFAULT" }: Props) => {
     node: QuestNode;
     arcId: string;
   } | null>(null);
-  // Holds the API response from the claim call so ChestOpenModal can display real rewards
   const [claimResult, setClaimResult] = useState<ClaimedRewardResponse | null>(
     null,
   );
@@ -609,7 +698,7 @@ export const InfoHeader = ({ onViewAll, mode = "DEFAULT" }: Props) => {
   };
 
   const handleClaim = (node: QuestNode, arcId: string) => {
-    setClaimResult(null); // clear any previous result before opening
+    setClaimResult(null);
     setClaimingNode({ node, arcId });
   };
 
@@ -617,7 +706,7 @@ export const InfoHeader = ({ onViewAll, mode = "DEFAULT" }: Props) => {
     if (!claimingNode) return;
     claimNode(
       claimingNode.arcId,
-      claimingNode.node.node_id, // node_id replaces old id
+      claimingNode.node.node_id,
       claimResult?.xp_awarded ?? 0,
       claimResult?.title_unlocked.map((t) => t.name) ?? [],
     );
@@ -656,7 +745,6 @@ export const InfoHeader = ({ onViewAll, mode = "DEFAULT" }: Props) => {
       <style>{STYLES}</style>
 
       <div className="hc-card">
-        {/* Identity — DEFAULT only */}
         {showIdentity && (
           <>
             <div className="hc-top">
@@ -697,12 +785,10 @@ export const InfoHeader = ({ onViewAll, mode = "DEFAULT" }: Props) => {
                 </DrawerContent>
               </Drawer>
             </div>
-
             <div className="hc-sep" />
           </>
         )}
 
-        {/* XP bar — DEFAULT + LEVEL */}
         {showLevel && (
           <div className="hc-xp-row">
             <span className="hc-lvl-tag">Lv {level}</span>
@@ -718,7 +804,6 @@ export const InfoHeader = ({ onViewAll, mode = "DEFAULT" }: Props) => {
           </div>
         )}
 
-        {/* Rank + collapsible quests — DEFAULT + QUEST_COMPACT */}
         {showQuestCompact && (
           <>
             <div className="hc-rank-row" onClick={() => setOpen((o) => !o)}>
@@ -749,22 +834,17 @@ export const InfoHeader = ({ onViewAll, mode = "DEFAULT" }: Props) => {
                   <p className="hc-empty">⚓ All caught up — keep sailing!</p>
                 ) : (
                   activeQuests.map(({ node, arc }) => {
-                    // Progress uses new field names
                     const pct = Math.min(
                       100,
                       Math.round((node.current_value / node.req_target) * 100),
                     );
                     const isClaimable = node.status === "claimable";
-                    // Arc accent colour via theme generator — arc.accentColor no longer exists
                     const accentColor = generateArcTheme(arc).accent;
-                    // Node icon derived from req_type — node.emoji no longer exists
                     const nodeEmoji = REQ_EMOJI[node.req_type] ?? "🏝️";
-                    // Progress label derived from req_type — node.requirement.label no longer exists
                     const reqLabel = REQ_LABEL[node.req_type] ?? node.req_type;
-
                     return (
                       <div
-                        key={node.node_id} // node_id replaces old id
+                        key={node.node_id}
                         className="hc-quest-row"
                         style={{ "--ac": accentColor } as React.CSSProperties}
                         onClick={() => !isClaimable && handleViewAll()}
@@ -775,13 +855,11 @@ export const InfoHeader = ({ onViewAll, mode = "DEFAULT" }: Props) => {
                           {isClaimable ? "📦" : nodeEmoji}
                         </div>
                         <div className="hc-q-body">
-                          {/* node.name replaces old node.title */}
                           <p className="hc-q-name">{node.name ?? "—"}</p>
                           {isClaimable ? (
                             <p className="hc-q-claimable">✨ Ready to claim!</p>
                           ) : (
                             <p className="hc-q-sub">
-                              {/* current_value / req_target replace old progress / requirement.target */}
                               {node.current_value}/{node.req_target} {reqLabel}{" "}
                               · {pct}%
                             </p>

src/pages/student/StudentLayout.tsx

@@ -220,7 +220,7 @@ export function StudentLayout() {
 
         <div className="flex flex-col flex-1 min-w-0">
           {/* Extra bottom padding so content clears the floating dock */}
-          <main className="flex-1 pb-24 md:pb-0">
+          <main className="flex-1 md:pb-0">
             <Outlet />
           </main>
         </div>

src/pages/student/practice/Test.tsx

@@ -1684,6 +1684,15 @@ export const Test = () => {
                           </p>
                         </div>
                       )}
+                      {currentQuestion?.context_image_url !== "NULL" && (
+                        <div className="t-card p-6">
+                          <img
+                            src={currentQuestion?.context_image_url}
+                            alt="Context"
+                            className="w-full h-auto"
+                          />
+                        </div>
+                      )}
                       <div className="t-card t-card-purple p-6">
                         <p className="font-bold text-lg text-[#1e1b4b] leading-relaxed">
                           {currentQuestion?.text &&