fix: make diagram sidebar more compact for iOS app (#781)

Co-authored-by: Felix T.J. Dietrich <felix_dietrich@gmx.de>
Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

Author: 3 people

.changeset/real-bags-rescue.md

@@ -0,0 +1,5 @@
+---
+"@tumaet/apollon": patch
+---
+
+See more of the canvas on mobile with a compact element palette in both portrait and landscape.

library/lib/components/Sidebar.tsx

@@ -1,10 +1,16 @@
 import React, { useLayoutEffect, useMemo, useRef, useState } from "react"
-import { ColorDescriptionConfig, dropElementConfigs, LAYOUT } from "@/constants"
+import {
+  ColorDescriptionConfig,
+  dropElementConfigs,
+  LAYOUT,
+  MOBILE_VIEW_QUERY,
+} from "@/constants"
 import { useMetadataStore } from "@/store/context"
 import { useShallow } from "zustand/shallow"
 import { DraggableGhost } from "./DraggableGhost"
 import { ApollonView } from "@/typings"
 import {
+  COMPACT_PALETTE,
   PALETTE,
   computePaletteLayout,
   previewScaleForCell,
@@ -53,12 +59,13 @@ export const Sidebar = () => {
   // Measure the canvas the palette floats over (its positioned ancestor) so the
   // grid can size itself to the available room.
   const asideRef = useRef<HTMLElement>(null)
-  const [canvas, setCanvas] = useState({ w: 0, h: 0 })
+  const [canvas, setCanvas] = useState({ w: 0, h: 0, compact: false })
 
   useLayoutEffect(() => {
     const aside = asideRef.current
     const parent = aside?.offsetParent as HTMLElement | null
     if (!aside || !parent) return
+    const mobileQuery = window.matchMedia(MOBILE_VIEW_QUERY)
     const measure = () => {
       const rect = parent.getBoundingClientRect()
       // Size the grid to the palette's ACTUAL available height — the gap between
@@ -74,21 +81,33 @@ export const Sidebar = () => {
         ? controls.getBoundingClientRect().top - GAP
         : rect.bottom - (asideTop - rect.top) // symmetric fallback
       const h = Math.max(0, bottomLimit - asideTop)
-      setCanvas({ w: rect.width, h })
+      setCanvas({ w: rect.width, h, compact: mobileQuery.matches })
     }
     measure()
     const observer = new ResizeObserver(measure)
     observer.observe(parent)
-    return () => observer.disconnect()
+    mobileQuery.addEventListener("change", measure)
+    return () => {
+      observer.disconnect()
+      mobileQuery.removeEventListener("change", measure)
+    }
   }, [])
 
   // The color-description element is the last grid cell.
   const cellCount = paletteItems.length + 1
   const chromeHeight = showInteractiveSelectionView ? VIEW_SWITCH_HEIGHT : 0
   const layout = useMemo(
-    () => computePaletteLayout(cellCount, canvas.w, canvas.h, chromeHeight),
-    [cellCount, canvas.w, canvas.h, chromeHeight]
+    () =>
+      computePaletteLayout(
+        cellCount,
+        canvas.w,
+        canvas.h,
+        chromeHeight,
+        canvas.compact
+      ),
+    [cellCount, canvas.w, canvas.h, canvas.compact, chromeHeight]
   )
+  const paletteMetrics = canvas.compact ? COMPACT_PALETTE : PALETTE
 
   // One uniform scale for the whole palette: pick the largest scale at which
   // EVERY element still fits its cell, then render them all at it. This keeps
@@ -103,11 +122,12 @@ export const Sidebar = () => {
           config.width,
           config.height + previewExtraHeight(config.type),
           layout.cellW,
-          layout.cellH
+          layout.cellH,
+          canvas.compact
         )
       )
     )
-  }, [paletteItems, layout.cellW, layout.cellH])
+  }, [paletteItems, layout.cellW, layout.cellH, canvas.compact])
 
   if (paletteItems.length === 0) {
     return null
@@ -196,7 +216,7 @@ export const Sidebar = () => {
           className="apollon-palette__entries"
           style={{
             gridTemplateColumns: `repeat(${layout.cols}, ${layout.cellW}px)`,
-            gap: PALETTE.GAP,
+            gap: paletteMetrics.GAP,
           }}
         >
           {paletteItems.map((config, index) =>

library/lib/constants.ts

@@ -179,6 +179,20 @@ export const LAYOUT = Object.freeze({
   STEREOTYPE_NAME_GAP: 4,
 } as const)
 
+/**
+ * Media query for the compact "mobile" palette layout. First clause: portrait
+ * phones, stopping below 768px so iPad portrait keeps the desktop layout. Second
+ * clause: phones in landscape, where the short height distinguishes them from
+ * tablets.
+ *
+ * Governs the PALETTE only. The webapp navbar uses its own width-only
+ * `NARROW_VIEW_QUERY` (standalone/webapp/src/constants/responsive.ts) which does
+ * not match landscape phones, so there the navbar stays full-size while the
+ * palette still compacts.
+ */
+export const MOBILE_VIEW_QUERY =
+  "(max-width: 767.95px), (max-width: 950px) and (max-height: 500px)"
+
 // RFC 4122 v4 UUID via crypto.getRandomValues — available in every context the
 // editor runs in (secure or not, browser or Node ≥19 (global Web Crypto)),
 // unlike crypto.randomUUID() which requires a secure context an embeddable host

library/lib/utils/paletteLayout.ts

@@ -49,6 +49,27 @@ export const PALETTE = Object.freeze({
   CONTENT_INSET: 6,
 } as const)
 
+/**
+ * Mobile palettes should stay dense instead of expanding sparse element lists
+ * to fill the available height. The 44px floor remains intact for touch, while
+ * the lower comfort/cap sizes remove the large empty bands around previews.
+ */
+export const COMPACT_PALETTE = Object.freeze({
+  CELL_MIN_H: 44,
+  COMFORT_MIN_H: 52,
+  // Capped tight: a capped grid can't shrink, and the CSS-clamped palette height
+  // renders a few px under the JS-measured band, so a dense grid needs that slack
+  // to avoid scrolling. Kept above COMFORT_MIN_H so cells stay legible.
+  CELL_MAX_H: 56,
+  CELL_RATIO: 1.6,
+  GAP: 4,
+  PAD: 4,
+  MAX_FRAC_W: 0.5,
+  CONTENT_INSET: 4,
+} as const)
+
+type PaletteMetrics = typeof PALETTE | typeof COMPACT_PALETTE
+
 export interface PaletteLayout {
   cols: number
   cellW: number
@@ -67,9 +88,9 @@ function cellHeightFor(
   count: number,
   budgetW: number,
   budgetH: number,
-  chromeH: number
+  chromeH: number,
+  p: PaletteMetrics
 ): number {
-  const p = PALETTE
   const rows = Math.ceil(count / cols)
   const fillH = (budgetH - chromeH - 2 * p.PAD - (rows - 1) * p.GAP) / rows
   const cellW = (budgetW - 2 * p.PAD - (cols - 1) * p.GAP) / cols
@@ -82,14 +103,16 @@ function cellHeightFor(
  * @param availW    measured canvas width
  * @param availH    measured canvas height
  * @param chromeH   height of non-grid palette chrome (view switch / hint), 0 if none
+ * @param compact   use denser mobile spacing and cell caps
  */
 export function computePaletteLayout(
   itemCount: number,
   availW: number,
   availH: number,
-  chromeH: number
+  chromeH: number,
+  compact = false
 ): PaletteLayout {
-  const p = PALETTE
+  const p = compact ? COMPACT_PALETTE : PALETTE
   const floorCellW = Math.round(p.CELL_RATIO * p.CELL_MIN_H)
   if (itemCount <= 0 || availW <= 0 || availH <= 0) {
     return { cols: 1, cellW: floorCellW, cellH: p.CELL_MIN_H, scroll: false }
@@ -114,7 +137,7 @@ export function computePaletteLayout(
   let bestCols = 1
   let bestCellH = 0
   for (let cols = 1; cols <= maxCols; cols++) {
-    const cellH = cellHeightFor(cols, itemCount, budgetW, budgetH, chromeH)
+    const cellH = cellHeightFor(cols, itemCount, budgetW, budgetH, chromeH, p)
     if (cellH >= p.COMFORT_MIN_H) {
       return {
         cols,
@@ -152,9 +175,11 @@ export function previewScaleForCell(
   naturalWidth: number,
   naturalHeight: number,
   cellW: number,
-  cellH: number
+  cellH: number,
+  compact = false
 ): number {
-  const inset = 2 * PALETTE.CONTENT_INSET
+  const metrics = compact ? COMPACT_PALETTE : PALETTE
+  const inset = 2 * metrics.CONTENT_INSET
   return Math.min(
     (cellW - inset) / naturalWidth,
     (cellH - inset) / naturalHeight

library/tests/unit/paletteLayout.test.ts

@@ -1,5 +1,6 @@
 import { describe, it, expect } from "vitest"
 import {
+  COMPACT_PALETTE,
   PALETTE,
   computePaletteLayout,
   previewScaleForCell,
@@ -92,6 +93,41 @@ describe("computePaletteLayout", () => {
     }
   })
 
+  it("keeps sparse mobile palettes compact in portrait and landscape", () => {
+    const portrait = computePaletteLayout(4, 375, 540, 0, true)
+    expect(portrait.cols).toBe(1)
+    expect(portrait.cellH).toBe(COMPACT_PALETTE.CELL_MAX_H)
+
+    const portraitRows = Math.ceil(4 / portrait.cols)
+    const portraitHeight =
+      portraitRows * portrait.cellH +
+      (portraitRows - 1) * COMPACT_PALETTE.GAP +
+      2 * COMPACT_PALETTE.PAD
+    expect(portraitHeight).toBeLessThanOrEqual(268)
+
+    const landscape = computePaletteLayout(6, 844, 250, 0, true)
+    expect(landscape.cols).toBe(2)
+    expect(landscape.cellH).toBe(COMPACT_PALETTE.CELL_MAX_H)
+    expect(landscape.scroll).toBe(false)
+  })
+
+  it("still fits a dense mobile palette without scrolling", () => {
+    for (const [w, h] of [
+      [375, 540],
+      [844, 250],
+    ] as const) {
+      const layout = computePaletteLayout(14, w, h, 0, true)
+      const rows = Math.ceil(14 / layout.cols)
+      const height =
+        rows * layout.cellH +
+        (rows - 1) * COMPACT_PALETTE.GAP +
+        2 * COMPACT_PALETTE.PAD
+
+      expect(layout.scroll).toBe(false)
+      expect(height).toBeLessThanOrEqual(h)
+    }
+  })
+
   it("handles empty / degenerate input safely", () => {
     expect(computePaletteLayout(0, 800, 600, 0).cols).toBe(1)
     expect(computePaletteLayout(5, 0, 0, 0).cols).toBe(1)
@@ -111,4 +147,10 @@ describe("previewScaleForCell", () => {
     const s = previewScaleForCell(40, 40, 90, 56)
     expect(s).toBeCloseTo((56 - inset) / 40, 5)
   })
+
+  it("uses the tighter content inset for compact cells", () => {
+    const compactInset = 2 * COMPACT_PALETTE.CONTENT_INSET
+    const scale = previewScaleForCell(160, 60, 100, 60, true)
+    expect(scale).toBeCloseTo((100 - compactInset) / 160, 5)
+  })
 })

standalone/webapp/tests/e2e/editor.spec.ts

@@ -638,6 +638,13 @@ test.describe("Mobile responsive layout", () => {
     const palette = page.getByTestId("apollon-palette")
     await expect(palette).toBeVisible()
 
+    const paletteBox = await palette.boundingBox()
+    expect(paletteBox).not.toBeNull()
+    // Six class-diagram entries stay in a dense single column instead of
+    // stretching their rows to consume the full portrait height.
+    expect(paletteBox!.width).toBeLessThanOrEqual(112)
+    expect(paletteBox!.height).toBeLessThanOrEqual(396)
+
     // Portrait uses the unified app-header height (NAVBAR_MIN_HEIGHT = 52).
     const navbar = page.locator("header")
     const navbarBox = await navbar.boundingBox()
@@ -715,6 +722,12 @@ test.describe("Mobile responsive layout", () => {
 
     const palette = page.getByTestId("apollon-palette")
     await expect(palette).toBeVisible()
+    const paletteBox = await palette.boundingBox()
+    expect(paletteBox).not.toBeNull()
+    // Landscape uses two compact columns, leaving substantially more canvas
+    // visible than the old height-filling grid.
+    expect(paletteBox!.width).toBeLessThanOrEqual(210)
+    expect(paletteBox!.height).toBeLessThanOrEqual(210)
     // The floating palette fits every element without meaningful scroll in the
     // short (390px) viewport too; tolerance covers sub-pixel rounding.
     const overflow = await palette.evaluate(