react-cheminfo 0.33.0 → 0.35.0

package/src/ir/ui/IrShell.tsx

@@ -1,10 +1,15 @@
 import type { Ref } from 'react';
-import { useCallback, useImperativeHandle, useMemo, useState } from 'react';
+import {
+  useCallback,
+  useId,
+  useImperativeHandle,
+  useMemo,
+  useState,
+} from 'react';
 import { SplitPane, useFullscreen } from 'react-science/ui';
 
 import { sanitizeFileName } from '../../download/core/sanitizeFileName.ts';
-import { ExportImageDialog } from '../../download/ui/ExportImageDialog.tsx';
-import { useDrawingBox } from '../../download/ui/useDrawingBox.ts';
+import { useFigureDownload } from '../../download/ui/useFigureDownload.tsx';
 import { PanelRail } from '../../panel/ui/PanelRail.tsx';
 import type { IrBand } from '../core/irBand.ts';
 import type { IrCommandHandlers } from '../core/irCommands.ts';
@@ -58,12 +63,16 @@ export function IrShell(props: IrShellProps) {
 
   const [isAboutOpen, setIsAboutOpen] = useState(false);
   const [isDocumentationOpen, setIsDocumentationOpen] = useState(false);
-  const [isExportImageOpen, setIsExportImageOpen] = useState(false);
 
-  // The chart is the picture, so the box it is drawn in is what the export
-  // dialog is pointed at: the viewer around it is full of SVG — every icon in
-  // every toolbar is one — and the first found there would be a magnifier.
-  const chart = useDrawingBox();
+  // The chart is the picture, so the box it is drawn in is what the figure
+  // panel is pointed at: the viewer around it is full of SVG — every icon in
+  // every toolbar is one.
+  const chartId = useId();
+  const figure = useFigureDownload({
+    targetId: chartId,
+    fileName: pictureName(visibleSpectra, selectedSpectrum),
+  });
+  const { isOpen: isFigureOpen, setOpen: setFigureOpen } = figure;
   // The highlight is held here rather than in the reducer: what the pointer is
   // resting on is not part of the document and changes on every move across the
   // chart, so putting it through the reducer would run every panel's memo sixty
@@ -106,7 +115,7 @@ export function IrShell(props: IrShellProps) {
       togglePicking: () => actions.setSettings({ pickBands: !pickBands }),
       toggleAssignments: () =>
         actions.setSettings({ showAssignments: !showAssignments }),
-      exportImage: () => setIsExportImageOpen(true),
+      exportImage: () => setFigureOpen(!isFigureOpen),
       clear: () => actions.clear(),
     }),
     [
@@ -117,6 +126,8 @@ export function IrShell(props: IrShellProps) {
       showAssignments,
       scaleValueAxis,
       toggleFullScreen,
+      isFigureOpen,
+      setFigureOpen,
     ],
   );
 
@@ -176,7 +187,7 @@ export function IrShell(props: IrShellProps) {
               default: in a narrow viewer the row would take the width it is
               short of out of them, and half an icon is what that looks like. */}
           <div style={railStyle}>
-            <IrToolbar />
+            <IrToolbar figure={figure} />
           </div>
 
           <SplitPane
@@ -189,7 +200,7 @@ export function IrShell(props: IrShellProps) {
             <IrCanvas
               highlight={highlight}
               onHighlight={setHighlight}
-              attachChart={chart.attach}
+              chartId={chartId}
             />
 
             <IrSidePanel highlight={highlight} onHighlight={setHighlight} />
@@ -215,19 +226,6 @@ export function IrShell(props: IrShellProps) {
         isOpen={isDocumentationOpen}
         onClose={() => setIsDocumentationOpen(false)}
       />
-
-      {/* `element`, not `content`: the chart is drawn to the box it was given,
-          so the box is the picture — measuring the marks inside it would crop
-          the frame to wherever the trace happens to reach and leave the axes
-          hanging. */}
-      <ExportImageDialog
-        isOpen={isExportImageOpen}
-        getDrawing={chart.getDrawing}
-        frame="element"
-        filename={pictureName(visibleSpectra, selectedSpectrum)}
-        label="Infrared spectrum"
-        onClose={() => setIsExportImageOpen(false)}
-      />
     </IrCommandProvider>
   );
 }
@@ -245,7 +243,7 @@ const ZOOM_STEP = 1.2;
 const DEFAULT_FRAME_WIDTH = 200;
 
 /**
- * What a picture of the chart is called before anything is typed in the box.
+ * What a picture of the chart is called.
  *
  * The spectrum being looked at, since a figure of the chart is a figure of that
  * spectrum, and a chemist who has one run open should not have to work out

package/src/ir/ui/IrToolbar.tsx

@@ -1,10 +1,20 @@
 import { Toolbar } from 'react-science/ui';
 
+import type { FigureDownloadState } from '../../download/ui/useFigureDownload.tsx';
 import { boxZoomOnly } from '../core/irMode.ts';
 
 import { useIrCommandProps } from './irCommandContext.tsx';
 import { useIrEditorState } from './irStateContext.ts';
 
+/** What {@link IrToolbar} needs. */
+export interface IrToolbarProps {
+  /**
+   * The "Save figure" panel the picture button opens.
+   * @default undefined — the button only runs the `exportImage` command
+   */
+  figure?: FigureDownloadState;
+}
+
 /**
  * The tools, down the left of the chart.
  *
@@ -19,9 +29,11 @@ import { useIrEditorState } from './irStateContext.ts';
  * drag on that axis is a rectangle, so both buttons go dead with the square zoom
  * lit. Showing `read` as available there would offer a gesture the chart does not
  * make, and showing it as *active* would name the wrong one.
+ * @param props - Component props.
  * @returns The toolbar.
  */
-export function IrToolbar() {
+export function IrToolbar(props: IrToolbarProps) {
+  const { figure } = props;
   const { state, selectedSpectrum } = useIrEditorState();
   const command = useIrCommandProps();
   const { spectra } = state.data;
@@ -29,6 +41,8 @@ export function IrToolbar() {
   const { mode, pickBands, showAssignments } = state.settings;
 
   const isEmpty = spectra.length === 0;
+  // The popover opens the panel itself, so the command's own click is left out.
+  const exportCommand = command('exportImage');
   const settled = boxZoomOnly(mode);
 
   return (
@@ -92,11 +106,27 @@ export function IrToolbar() {
           window it was dragged to, the way up it is being read, the
           assignments written under the bands — so the picture is taken here
           rather than rebuilt from the spectra in a panel. */}
-      <Toolbar.Item
-        icon="media"
-        {...command('exportImage')}
-        disabled={isEmpty}
-      />
+      {figure === undefined ? (
+        <Toolbar.Item
+          icon="media"
+          {...command('exportImage')}
+          disabled={isEmpty}
+        />
+      ) : (
+        <Toolbar.PopoverItem
+          isOpen={figure.isOpen}
+          onInteraction={figure.setOpen}
+          content={figure.panel}
+          disabled={isEmpty}
+          itemProps={{
+            icon: 'media',
+            tooltip: exportCommand.tooltip,
+            'aria-label': exportCommand['aria-label'],
+            active: figure.isOpen,
+            disabled: isEmpty,
+          }}
+        />
+      )}
     </Toolbar>
   );
 }

package/src/ir/ui/index.ts

@@ -34,6 +34,7 @@ export { IrSidePanel } from './IrSidePanel.tsx';
 export type { IrStateProviderProps } from './IrStateProvider.tsx';
 export { IrStateProvider } from './IrStateProvider.tsx';
 export { IrStatusBar } from './IrStatusBar.tsx';
+export type { IrToolbarProps } from './IrToolbar.tsx';
 export { IrToolbar } from './IrToolbar.tsx';
 export type { IrTracesProps } from './IrTraces.tsx';
 export { IrTraces } from './IrTraces.tsx';

package/src/locales/de.json

@@ -86,10 +86,6 @@
   "about.whatYouCanDo": "Was Sie hier tun können",
   "about.builtOn": "Aufgebaut auf",
   "about.howToCite": "Wie zu zitieren",
-  "about.licenceAndSource": "Lizenz und Quelltext",
-  "about.licence": "{license}, © cheminfo. Nutzen Sie es in einem Kurs, forken Sie es, oder übernehmen Sie einen Teil davon anderswo. Der Quelltext liegt auf {sources}.",
-  "about.foundAProblem": "Ein Problem gefunden?",
-  "about.reportIt": "Sagen Sie es uns: ein Bericht, der nennt, was Sie eingegeben haben und was zurückkam, ist die schnellste Korrektur, die es gibt. {tracker}.",
   "about.citeWork": "{what} zitieren",
   "about.built": "Erstellt {builtAt}.",
   "about.builtFromCommit": "Erstellt {builtAt} aus Commit {commit}.",
@@ -189,6 +185,8 @@
   "download.hintRasterSvg": "Ein SVG, das ein Bild von {pixels} enthält: eine 3D-Szene hat keine Vektorform.",
   "download.hintSvg": "Öffnet sich mit {pixels} und bleibt in jeder Größe scharf.",
   "download.hintPng": "Gespeichert {pixels}.",
+  "download.hintCopied": "In die Zwischenablage kopiert: PNG mit {pixels}.",
+  "download.copyUnsupported": "Dieser Browser kann kein Bild in die Zwischenablage legen. Speichern Sie es stattdessen.",
   "download.size": "Größe",
   "download.sizeHelp": "Die Form, in der die Abbildung für die Datei gezeichnet wird. Sie wird neu gesetzt, sodass Achsen und Beschriftungen in diese Form passen, statt hineingedehnt zu werden. Eine Zeitschriftenspalte ist 8,5 cm breit, und ihr Text wird in der Größe gedruckt, in der er auf dem Bildschirm steht.",
   "download.sizeScreen": "Wie angezeigt",
@@ -232,6 +230,12 @@
   "overlay.reset": "Zurücksetzen",
   "overlay.hoverAName": "Fahren Sie über einen Namen, um zu sehen, was er bewirkt.",
   "overlay.dismiss": "Schließen",
+  "axis.scale": "Skala",
+  "axis.xScale": "X-Skala",
+  "axis.yScale": "Y-Skala",
+  "axis.linear": "Linear",
+  "axis.logarithmic": "Log",
+  "axis.scaleHelp": "Wie die Achse geteilt ist. Linear bekommt jede Einheit gleich viel Platz, so werden die größten Werte miteinander verglichen; logarithmisch bekommt jeder Faktor zehn gleich viel Platz, so sind die kleinen überhaupt sichtbar.",
   "delimited.copyTable": "Tabelle kopieren",
   "delimited.copyOrDownload": "Daten kopieren oder herunterladen",
   "delimited.close": "Schließen",

package/src/locales/en.json

@@ -86,10 +86,6 @@
   "about.whatYouCanDo": "What you can do here",
   "about.builtOn": "Built on",
   "about.howToCite": "How to cite",
-  "about.licenceAndSource": "Licence and source",
-  "about.licence": "{license}, © cheminfo. Use it in a course, fork it, or lift a piece of it into something else. The sources are at {sources}.",
-  "about.foundAProblem": "Found a problem?",
-  "about.reportIt": "Tell us: a report naming what you typed and what came back is the fastest fix there is. {tracker}.",
   "about.citeWork": "Cite {what}",
   "about.built": "Built {builtAt}.",
   "about.builtFromCommit": "Built {builtAt} from commit {commit}.",
@@ -189,6 +185,8 @@
   "download.hintRasterSvg": "An SVG holding a picture of {pixels}: a 3D scene has no vector form.",
   "download.hintSvg": "Opens at {pixels}, and stays sharp at any size.",
   "download.hintPng": "Saved {pixels}.",
+  "download.hintCopied": "Copied {pixels} to the clipboard, as a PNG.",
+  "download.copyUnsupported": "This browser cannot put a picture on the clipboard. Save it instead.",
   "download.size": "Size",
   "download.sizeHelp": "The shape the figure is drawn at for the file. It is laid out again, so the axes and labels fit that shape instead of being stretched into it. A journal column is 8.5 cm wide, and its text prints at the size it reads on screen.",
   "download.sizeScreen": "As shown",
@@ -232,6 +230,12 @@
   "overlay.reset": "Reset",
   "overlay.hoverAName": "Hover a name for what it does.",
   "overlay.dismiss": "Dismiss",
+  "axis.scale": "Scale",
+  "axis.xScale": "X scale",
+  "axis.yScale": "Y scale",
+  "axis.linear": "Linear",
+  "axis.logarithmic": "Log",
+  "axis.scaleHelp": "How the axis is spaced. Linear gives every unit the same room, so the largest values are read against each other; logarithmic gives every factor of ten the same room, so the small ones are visible at all.",
   "delimited.copyTable": "Copy the table",
   "delimited.copyOrDownload": "Copy or download data",
   "delimited.close": "Close",

package/src/locales/es.json

@@ -86,10 +86,6 @@
   "about.whatYouCanDo": "Lo que puede hacer aquí",
   "about.builtOn": "Construido sobre",
   "about.howToCite": "Cómo citar",
-  "about.licenceAndSource": "Licencia y código fuente",
-  "about.licence": "{license}, © cheminfo. Úselo en un curso, bifúrquelo, o llévese un trozo a otra parte. El código está en {sources}.",
-  "about.foundAProblem": "¿Ha encontrado un problema?",
-  "about.reportIt": "Díganoslo: un informe que indique lo que escribió y lo que obtuvo es la corrección más rápida que existe. {tracker}.",
   "about.citeWork": "Citar {what}",
   "about.built": "Compilado {builtAt}.",
   "about.builtFromCommit": "Compilado {builtAt} desde el commit {commit}.",
@@ -189,6 +185,8 @@
   "download.hintRasterSvg": "Un SVG que contiene una imagen de {pixels}: una escena 3D no tiene forma vectorial.",
   "download.hintSvg": "Se abre a {pixels}, y se mantiene nítido a cualquier tamaño.",
   "download.hintPng": "Guardado {pixels}.",
+  "download.hintCopied": "Copiado al portapapeles: PNG de {pixels}.",
+  "download.copyUnsupported": "Este navegador no puede poner una imagen en el portapapeles. Guárdala en su lugar.",
   "download.size": "Tamaño",
   "download.sizeHelp": "La forma con la que se dibuja la figura para el archivo. Se vuelve a maquetar, de modo que los ejes y las etiquetas se ajustan a esa forma en lugar de estirarse. Una columna de revista mide 8,5 cm, y su texto se imprime al tamaño con que se lee en pantalla.",
   "download.sizeScreen": "Como se muestra",
@@ -232,6 +230,12 @@
   "overlay.reset": "Reiniciar",
   "overlay.hoverAName": "Pase el puntero sobre un nombre para ver qué hace.",
   "overlay.dismiss": "Cerrar",
+  "axis.scale": "Escala",
+  "axis.xScale": "Escala X",
+  "axis.yScale": "Escala Y",
+  "axis.linear": "Lineal",
+  "axis.logarithmic": "Log",
+  "axis.scaleHelp": "Cómo se gradúa el eje. En lineal cada unidad ocupa el mismo espacio, de modo que se comparan los valores mayores entre sí; en logarítmica cada factor diez ocupa el mismo espacio, de modo que los pequeños llegan a verse.",
   "delimited.copyTable": "Copiar la tabla",
   "delimited.copyOrDownload": "Copiar o descargar los datos",
   "delimited.close": "Cerrar",

package/src/locales/fr.json

@@ -86,10 +86,6 @@
   "about.whatYouCanDo": "Ce que vous pouvez faire ici",
   "about.builtOn": "Construit sur",
   "about.howToCite": "Comment citer",
-  "about.licenceAndSource": "Licence et sources",
-  "about.licence": "{license}, © cheminfo. Utilisez-le dans un cours, forkez-le, ou reprenez-en un morceau ailleurs. Les sources sont sur {sources}.",
-  "about.foundAProblem": "Un problème ?",
-  "about.reportIt": "Dites-le-nous : un rapport indiquant ce que vous avez saisi et ce qui est revenu est la correction la plus rapide qui soit. {tracker}.",
   "about.citeWork": "Citer {what}",
   "about.built": "Compilé {builtAt}.",
   "about.builtFromCommit": "Compilé {builtAt} depuis le commit {commit}.",
@@ -189,6 +185,8 @@
   "download.hintRasterSvg": "Un SVG contenant une image de {pixels} : une scène 3D n'a pas de forme vectorielle.",
   "download.hintSvg": "S'ouvre à {pixels}, et reste net à toute taille.",
   "download.hintPng": "Enregistré {pixels}.",
+  "download.hintCopied": "Copié dans le presse-papiers : PNG de {pixels}.",
+  "download.copyUnsupported": "Ce navigateur ne peut pas copier une image dans le presse-papiers. Enregistrez-la plutôt.",
   "download.size": "Taille",
   "download.sizeHelp": "La forme à laquelle la figure est dessinée pour le fichier. Elle est remise en page, si bien que les axes et les étiquettes s'ajustent à cette forme au lieu d'y être étirés. Une colonne de revue mesure 8,5 cm, et son texte s'imprime à la taille où il se lit à l'écran.",
   "download.sizeScreen": "Comme affichée",
@@ -232,6 +230,12 @@
   "overlay.reset": "Réinitialiser",
   "overlay.hoverAName": "Survolez un nom pour savoir ce qu'il fait.",
   "overlay.dismiss": "Fermer",
+  "axis.scale": "Échelle",
+  "axis.xScale": "Échelle X",
+  "axis.yScale": "Échelle Y",
+  "axis.linear": "Linéaire",
+  "axis.logarithmic": "Log",
+  "axis.scaleHelp": "Comment l'axe est gradué. En linéaire, chaque unité occupe la même place, ce qui compare les grandes valeurs entre elles ; en logarithmique, chaque facteur dix occupe la même place, ce qui rend les petites visibles.",
   "delimited.copyTable": "Copier le tableau",
   "delimited.copyOrDownload": "Copier ou télécharger les données",
   "delimited.close": "Fermer",

package/src/locales/it.json

@@ -86,10 +86,6 @@
   "about.whatYouCanDo": "Cosa si può fare qui",
   "about.builtOn": "Costruito su",
   "about.howToCite": "Come citare",
-  "about.licenceAndSource": "Licenza e codice sorgente",
-  "about.licence": "{license}, © cheminfo. Si può usare in un corso, farne un fork, o riprenderne un pezzo per altro. Il codice è su {sources}.",
-  "about.foundAProblem": "Ha trovato un problema?",
-  "about.reportIt": "Ce lo dica: una segnalazione che indichi cosa ha scritto e cosa ha ottenuto è la correzione più rapida che esista. {tracker}.",
   "about.citeWork": "Citare {what}",
   "about.built": "Compilato {builtAt}.",
   "about.builtFromCommit": "Compilato {builtAt} dal commit {commit}.",
@@ -189,6 +185,8 @@
   "download.hintRasterSvg": "Un SVG che contiene un'immagine di {pixels}: una scena 3D non ha forma vettoriale.",
   "download.hintSvg": "Si apre a {pixels}, e resta nitido a qualsiasi dimensione.",
   "download.hintPng": "Salvato {pixels}.",
+  "download.hintCopied": "Copiato negli appunti: PNG di {pixels}.",
+  "download.copyUnsupported": "Questo browser non può mettere un'immagine negli appunti. Salvala invece.",
   "download.size": "Dimensione",
   "download.sizeHelp": "La forma con cui la figura viene disegnata per il file. Viene ricomposta, così gli assi e le etichette si adattano a quella forma invece di essere stirati. Una colonna di rivista è larga 8,5 cm, e il suo testo si stampa alla dimensione con cui si legge sullo schermo.",
   "download.sizeScreen": "Come mostrata",
@@ -232,6 +230,12 @@
   "overlay.reset": "Ricomincia",
   "overlay.hoverAName": "Passare il puntatore su un nome per vedere cosa fa.",
   "overlay.dismiss": "Chiudi",
+  "axis.scale": "Scala",
+  "axis.xScale": "Scala X",
+  "axis.yScale": "Scala Y",
+  "axis.linear": "Lineare",
+  "axis.logarithmic": "Log",
+  "axis.scaleHelp": "Come è graduato l'asse. In lineare ogni unità occupa lo stesso spazio, così si confrontano fra loro i valori più grandi; in logaritmica ogni fattore dieci occupa lo stesso spazio, così i piccoli si vedono.",
   "delimited.copyTable": "Copia la tabella",
   "delimited.copyOrDownload": "Copiare o scaricare i dati",
   "delimited.close": "Chiudi",

package/src/overlay/ui/OverlayPanel.tsx

@@ -78,6 +78,12 @@ export interface OverlayPanelProps {
    * @default derived from the type size — 88 at the compact size
    */
   nameWidth?: number;
+  /**
+   * Fixed width of the panel, for one whose hint changes with its choices:
+   * left to its content, it would resize under the pointer at every pick.
+   * @default undefined — as wide as its content
+   */
+  width?: number | string;
   /**
    * Value of the `data-testid` attribute of the panel.
    * @default undefined
@@ -104,7 +110,7 @@ export interface OverlayPanelProps {
 export function OverlayPanel(props: OverlayPanelProps): ReactElement {
   const { title, children, onReset, resetLabel, help } = props;
   const t = useChromeT();
-  const { actions, hint, nameWidth, testId } = props;
+  const { actions, hint, nameWidth, width: panelWidth, testId } = props;
   const { metrics } = useOverlaySurface();
   const titleId = useId();
   const reset = useOverlayInteraction();
@@ -120,7 +126,7 @@ export function OverlayPanel(props: OverlayPanelProps): ReactElement {
       role="group"
       aria-labelledby={titleId}
       data-testid={testId}
-      style={overlayPanelSurfaceStyle(metrics)}
+      style={overlayPanelSurfaceStyle(metrics, panelWidth)}
     >
       <div style={overlayPanelHeaderStyle(metrics)}>
         <span style={overlayPanelTitleStyle(metrics)}>

package/src/overlay/ui/overlayPanelStyles.ts

@@ -26,14 +26,17 @@ import { overlayFocusRing } from './overlayValueStyles.ts';
  * The panel itself: a header, a body, and whatever the figure can be told to
  * do at the foot.
  * @param metrics - The measurements the card is drawn from.
+ * @param width - A fixed width, or `undefined` for as wide as its content.
  * @returns The panel's rules.
  */
 export function overlayPanelSurfaceStyle(
   metrics: OverlayMetrics,
+  width?: number | string,
 ): CSSProperties {
   return {
     display: 'flex',
     flexDirection: 'column',
+    width,
     minWidth: OVERLAY_PANEL_MIN_WIDTH,
     color: 'var(--text)',
     fontSize: metrics.fontSize,

package/src/periodic/core/index.ts

@@ -18,6 +18,7 @@ export {
 export type { Cell, ElementRange } from './layout.ts';
 export {
   COLUMN_COUNT,
+  EMPTY_BLOCK,
   INNER_TRANSITION_MARKERS,
   INNER_TRANSITION_ROWS,
   ROW_COUNT,

package/src/periodic/core/layout.ts

@@ -84,6 +84,25 @@ let placedCache: ReadonlyArray<{
   cell: Cell;
 }> | null = null;
 
+/**
+ * The block of cells the table leaves empty, where no element belongs: logical
+ * columns 3 to 12 of the first three periods.
+ *
+ * It is a tenth of the drawing, in the middle of the top edge, and the one
+ * place a tool can write without covering an element — which is why a table
+ * printed on a wall puts its title or its key there.
+ */
+export const EMPTY_BLOCK: {
+  /** Leftmost column of the block, one-based. */
+  column: number;
+  /** Topmost row of the block, one-based. */
+  row: number;
+  /** How many columns it spans. */
+  columnSpan: number;
+  /** How many rows it spans. */
+  rowSpan: number;
+} = { column: 3, row: 1, columnSpan: 10, rowSpan: 3 };
+
 /**
  * The two cells the lanthanoids and the actinoids were lifted out of.
  *

package/src/periodic/ui/ElementCell.tsx

@@ -37,12 +37,6 @@ export interface ElementCellProps {
    * @default '' — nothing is written
    */
   detail?: string;
-  /**
-   * Whether the table this cell belongs to writes a third line at all. A table
-   * that writes none gives the room to the symbol, and its rows are shorter.
-   * @default whether this cell has one
-   */
-  writesDetail?: boolean;
   /**
    * Whether the cell is the one the tools are pointed at.
    * @default false
@@ -82,7 +76,6 @@ export function ElementCell(props: ElementCellProps): ReactElement {
     row,
     onSelect,
     detail = '',
-    writesDetail = detail !== '',
     isSelected = false,
     isIncluded = true,
     onHover,
@@ -137,7 +130,7 @@ export function ElementCell(props: ElementCellProps): ReactElement {
       <span
         style={{
           ...symbolStyle,
-          fontSize: symbolFontSize(symbol, writesDetail),
+          fontSize: symbolFontSize(symbol),
         }}
       >
         {symbol}
@@ -158,12 +151,10 @@ export function ElementCell(props: ElementCellProps): ReactElement {
  * ones whose second letter is an `m` — which are written a tenth smaller
  * rather than run into the edges of their cell.
  * @param symbol - The chemical symbol.
- * @param writesDetail - Whether the table writes a third line under it.
  * @returns A CSS length.
  */
-function symbolFontSize(symbol: string, writesDetail: boolean): string {
-  const cap = writesDetail ? SYMBOL_CQW : SYMBOL_ALONE_CQW;
-  return fitted(symbolWidthInEm(symbol), cap, '0.5rem');
+function symbolFontSize(symbol: string): string {
+  return fitted(symbolWidthInEm(symbol), SYMBOL_CQW, '0.5rem');
 }
 
 /**
@@ -233,17 +224,24 @@ const TABULAR_EM = 0.6;
 /** The size the symbol is written at wherever it fits, as a share of the table. */
 const SYMBOL_CQW = '2.4cqw';
 
-/** The same, in a table that writes nothing under the symbol. */
-const SYMBOL_ALONE_CQW = '2.8cqw';
-
 /**
  * The tallest the third line is ever written, as a share of the table.
  *
- * Close to three quarters of the symbol: the symbol is how a cell is found,
- * but the value is what the table is being read for, and a value half the size
- * of the symbol is the one thing on the cell a class cannot make out.
+ * Close to two thirds of the symbol: the symbol is how a cell is found, but
+ * the value is what the table is being read for, and a value half the size of
+ * the symbol is the one thing on the cell a class cannot make out.
+ */
+const DETAIL_CQW = '1.6cqw';
+
+/**
+ * The band at each end of a cell: the atomic number at the top, whatever the
+ * tool writes at the bottom.
+ *
+ * They are one length, not two, and that is what makes the symbol between them
+ * sit at the centre of the cell rather than near it — a bottom band wider than
+ * the top one by a third lifted every symbol in the table two pixels.
  */
-const DETAIL_CQW = '1.75cqw';
+const EDGE_BAND = '1.8cqw';
 
 /** How wide one column is, as a share of the table's width. */
 const CELL_CQW = '4.85cqw';
@@ -251,15 +249,24 @@ const CELL_CQW = '4.85cqw';
 /** What the border and the padding of a cell take off that width. */
 const CELL_CHROME = '4px';
 
+/**
+ * A cell is three bands of its own, and every cell has all three.
+ *
+ * The atomic number is in the top band, against its left edge; the symbol is
+ * centred in the middle one; whatever the tool writes is centred in the
+ * bottom one. The bands keep their height whether or not anything is written
+ * in the last of them, so a number sits at one height across the whole table
+ * and a symbol at one other — before this, both rode on a stack the cell
+ * centred and moved whenever a neighbour's value was written smaller.
+ */
 const cellStyle = {
-  alignItems: 'center',
   border: '1px solid rgb(255 255 255 / 0.55)',
   borderRadius: 3,
   cursor: 'pointer',
-  display: 'flex',
-  flexDirection: 'column',
+  display: 'grid',
   font: 'inherit',
-  justifyContent: 'center',
+  gridTemplateRows: `${EDGE_BAND} 1fr ${EDGE_BAND}`,
+  justifyItems: 'center',
   minWidth: 0,
   overflow: 'hidden',
   padding: '1px',
@@ -267,21 +274,23 @@ const cellStyle = {
 } as const satisfies CSSProperties;
 
 const numberStyle = {
-  alignSelf: 'flex-start',
-  fontSize: 'max(0.33rem, 1.2cqw)',
+  alignSelf: 'start',
+  fontSize: 'max(0.33rem, 1.1cqw)',
   fontVariantNumeric: 'tabular-nums',
+  justifySelf: 'start',
   lineHeight: 1,
   opacity: 0.8,
-  paddingLeft: '0.15cqw',
 } as const satisfies CSSProperties;
 
 const symbolStyle = {
+  alignSelf: 'center',
   fontWeight: 700,
   letterSpacing: '-0.02em',
   lineHeight: 1.02,
 } as const satisfies CSSProperties;
 
 const detailStyle = {
+  alignSelf: 'center',
   fontVariantNumeric: 'tabular-nums',
   lineHeight: 1,
   maxWidth: '100%',