chesspal 0.2.4 → 0.3.0

package/dist/page/layout/layout.css

@@ -553,6 +553,83 @@
     flex: none;
 }
 
+/* Beside the board the talk is a row a side, each half the column, or what its card, note and box need when that is more: only the words give way, and
+   never spill over the other side (Stefano, Zoe). Turned round, the player's row comes first. In analysis the AI's note keeps its height while the thread
+   gives way, and scrolls by itself only when nothing else is left to give */
+@media (min-width: 841px) {
+    .talk {
+        display: grid;
+        grid-template-rows: minmax(min-content, 1fr) minmax(min-content, 1fr);
+        container: talk / size;
+    }
+
+    .ai-block,
+    .you-block {
+        max-height: none;
+    }
+
+    /* The player's card stays by the board's edge when the words above it go */
+    .you-block {
+        justify-content: flex-end;
+    }
+
+    .flipped .ai-block {
+        grid-row: 2;
+    }
+
+    .flipped .you-block {
+        grid-row: 1;
+    }
+
+    /* The words take the room left, and ask none of their own */
+    .says,
+    .sent {
+        flex: 1 1 0;
+        contain: size;
+    }
+
+    .talk.studied {
+        grid-template-rows: minmax(0, max-content) minmax(min-content, 1fr);
+        overflow: hidden;
+    }
+
+    .flipped .talk.studied {
+        grid-template-rows: minmax(min-content, 1fr) minmax(0, max-content);
+    }
+
+    .talk.studied > .ai-block > .ai-note {
+        flex: 0 1 auto;
+        min-height: 0;
+        overflow-y: auto;
+    }
+
+    /* On a short column the table's note keeps its buttons and drops the commands to type, then the box and the words go: they wait for a chat anyway.
+       In analysis the cards are taller and the AI's note needs room too */
+    @container talk (max-height: 560px) {
+        .opener-command {
+            display: none;
+        }
+    }
+
+    @container talk (max-height: 500px) {
+        .ai-block:has(> .opener) + .you-block > :is(.sent, .compose) {
+            display: none;
+        }
+    }
+
+    @container talk (max-height: 640px) {
+        .talk.studied .opener-command {
+            display: none;
+        }
+    }
+
+    @container talk (max-height: 580px) {
+        .talk.studied > .ai-block:has(> .opener) + .you-block > .chat {
+            display: none;
+        }
+    }
+}
+
 /* The game's column, which folds from its tab */
 .side {
     grid-area: side;
@@ -580,15 +657,22 @@
     align-items: center;
 }
 
-/* Between games the chip is never cut: beside it the Torretta stands for the name at every width, and the flip keeps only its icon */
+/* Between games and in analysis the Torretta alone stands for the name, at every width, to leave the chip its room */
 @media (min-width: 841px) {
-    .top:has(.verdict.idle, .verdict.over) .title {
+    .top:has(.verdict.idle, .verdict.over, .verdict.analysis) .title {
         display: none;
     }
 
-    .top:has(.verdict.idle, .verdict.over) .verdict {
+    .top:has(.verdict.idle, .verdict.over, .verdict.analysis) .verdict {
         margin-right: auto;
     }
+
+    /* Over a board of 760 px or less the sound and the theme leave their room to the chip, and stay in the settings; in a game they come back */
+    @container (max-width: 760px) {
+        .top:has(.verdict.idle, .verdict.over, .verdict.analysis) :is(.sound-button, .theme-button) {
+            display: none;
+        }
+    }
 }
 
 /* Beside the board, a column's content keeps its width and its outer edge while the column folds: it slides under the board, the text never flows again */
@@ -800,6 +884,23 @@
         grid-template-areas: "head" "you" "board" "steps" "asleep" "note" "chat" "ai" "side";
     }
 
+    /* With the helps on, their map under the steps: an area the grid lacks would put it in a column of its own, off the screen */
+    .app:has(.talk.studied):has(.board-map) {
+        grid-template-areas: "head" "ai" "board" "steps" "map" "note" "chat" "you" "side";
+    }
+
+    .app.flipped:has(.talk.studied):has(.board-map) {
+        grid-template-areas: "head" "you" "board" "steps" "map" "note" "chat" "ai" "side";
+    }
+
+    .app:has(.talk.studied > .ai-block > .asleep):has(.board-map) {
+        grid-template-areas: "head" "ai" "board" "steps" "map" "asleep" "note" "chat" "you" "side";
+    }
+
+    .app.flipped:has(.talk.studied > .ai-block > .asleep):has(.board-map) {
+        grid-template-areas: "head" "you" "board" "steps" "map" "asleep" "note" "chat" "ai" "side";
+    }
+
     .talk.studied > .ai-block > .asleep {
         grid-area: asleep;
         margin: 0;
@@ -834,12 +935,18 @@
     box-shadow: 0 8px 24px rgb(0 0 0 / 16%);
 }
 
-/* On a phone the header's first line holds the Torretta, which stands for the name, and every button down to the player's picture, a little closer */
+/* On a phone the header's first line holds the Torretta, which stands for the name, and every button down to the player's picture, a little closer; the
+   sound and the theme stay in the settings */
 @media (max-width: 420px) {
     .top {
         column-gap: 4px;
     }
 
+    .top .sound-button,
+    .top .theme-button {
+        display: none;
+    }
+
     .top .title {
         display: none;
     }

package/dist/page/layout/window.js

@@ -0,0 +1,45 @@
+// The table's window the first time it opens (D-104): Chrome and Edge open an application window about 1000 px wide, where the page has two columns. The
+// page asks once for 16:9, 1600×900 or what the screen has, centred; after that the browser keeps the size the player gives it (Zoe).
+// The mark the table puts on the address of the window it opens (server/table/browser.ts).
+const mark = "opened";
+const sizedKey = "chesspal-window-sized";
+const wanted = { width: 1600, height: 900 };
+/** Sizes the window the table opened, once in this browser, and takes the mark off the address. */
+export function fitOpenedWindow() {
+    const address = new URL(location.href);
+    if (!address.searchParams.has(mark)) {
+        return;
+    }
+    address.searchParams.delete(mark);
+    history.replaceState(history.state, "", address.pathname + address.search + address.hash);
+    if (sizedBefore()) {
+        return;
+    }
+    const place = windowPlace(screen.availWidth, screen.availHeight);
+    window.resizeTo(place.width, place.height);
+    window.moveTo(place.left, place.top);
+    noteSized();
+}
+/** Where the window goes on a screen with this much room: 1600×900, or less on a smaller screen, centred. */
+export function windowPlace(roomWidth, roomHeight) {
+    const width = Math.min(wanted.width, roomWidth);
+    const height = Math.min(wanted.height, roomHeight);
+    return { width, height, left: Math.round((roomWidth - width) / 2), top: Math.round((roomHeight - height) / 2) };
+}
+function sizedBefore() {
+    try {
+        return localStorage.getItem(sizedKey) !== null;
+    }
+    catch {
+        // A browser that keeps nothing for the page: sizing it at every opening is the lesser harm.
+        return false;
+    }
+}
+function noteSized() {
+    try {
+        localStorage.setItem(sizedKey, "1");
+    }
+    catch {
+        // Nothing kept: the next opening sizes the window again.
+    }
+}

package/dist/page/main.js

@@ -1,8 +1,11 @@
 import { jsx as _jsx } from "preact/jsx-runtime";
-// The page's start: the settings this browser remembers, shown before the first frame, then the app drawn into its place.
+// The page's start: the window the table opened sized the first time, the settings this browser remembers, shown before the first frame, then the app
+// drawn into its place.
 import { render } from "preact";
 import { App } from "./app/app.js";
+import { fitOpenedWindow } from "./layout/window.js";
 import { loadSettings, showSettings } from "./profile/settings.js";
+fitOpenedWindow();
 const settings = loadSettings();
 showSettings(settings);
 render(_jsx(App, { start: settings }), document.getElementById("app"));

package/dist/page/players/card.js

@@ -8,7 +8,7 @@ export function PlayerCard({ place, picture, name, signed, side, level, taken, a
     const opponent = side === "white" ? "black" : "white";
     return (_jsx("section", { class: `card player ${place}`, children: _jsxs("div", { class: "player-line", children: [picture, _jsxs("div", { class: "who", children: [_jsx("div", { class: "name", title: typeof name === "string" ? name : undefined, children: name }), signed === undefined ? null : _jsx("div", { class: "signed", title: signed, children: signed }), side === undefined ? null : (_jsxs("div", { class: "note", children: [text.sides[side], level === undefined ? null : (_jsxs(_Fragment, { children: [" ", "\u00B7 ", _jsx(LevelTip, { level: level })] })), turn
                                     ? (_jsxs(_Fragment, { children: [" ", "\u00B7 ", _jsx("b", { class: "turn", children: text.yourTurn })] }))
-                                    : null] })), _jsxs("div", { class: "taken", role: "img", "aria-label": text.taken(taken.map((piece) => text.piece(piece, opponent)), ahead), children: [groupsOf(taken).map((group) => (_jsx("span", { class: group[0]?.toUpperCase() === "P" ? "group pawns" : "group", children: group.map((piece, index) => _jsx(Piece, { letter: opponent === "white" ? piece : piece.toLowerCase(), small: true }, index)) }, group[0]))), ahead > 0 ? _jsxs("span", { class: "balance", children: ["+", ahead] }) : null] }), badges] }), clock] }) }));
+                                    : null] }))] }), clock, side === undefined && taken.length === 0 && badges === undefined ? null : (_jsxs("div", { class: "haul", children: [_jsxs("div", { class: "taken", role: "img", "aria-label": text.taken(taken.map((piece) => text.piece(piece, opponent)), ahead), children: [groupsOf(taken).map((group) => (_jsx("span", { class: group[0]?.toUpperCase() === "P" ? "group pawns" : "group", children: group.map((piece, index) => _jsx(Piece, { letter: opponent === "white" ? piece : piece.toLowerCase(), small: true }, index)) }, group[0]))), ahead > 0 ? _jsxs("span", { class: "balance", children: ["+", ahead] }) : null] }), badges] }))] }) }));
 }
 /**
  * A side's time on the game's clock, as the server keeps it: it runs while the side is to move and the game goes on, unless `held` (a move on its way);

package/dist/page/profile/profile.js

@@ -1,12 +1,15 @@
 // The player's profile on the page (D-23, D-45): as the server sends it, the choices the wizard offers, and the requests that change it.
 /** How the player says they play, as the server keeps it. */
 export const levels = ["learning", "casual", "regular", "tournament"];
-/** Where a rating comes from. */
-export const ratingSites = ["lichess", "chess.com", "fide"];
-/** The lowest and highest rating the server takes. */
-export const ratingLimits = { lowest: 100, highest: 3500 };
+/** The sites a rating is read from, by the player's names there (D-105). */
+export const ratingSites = ["lichess", "chess.com"];
+/** The speeds whose rating counts, in the order they count (D-106). */
+export const speeds = ["rapid", "classical", "blitz"];
 /** The longest name the server keeps. */
 export const nameLimit = 40;
+/** The FIDE ratings the server takes, as whole numbers (D-106). */
+export const fideLowest = 1400;
+export const fideHighest = 3000;
 /** The drawn avatars, by the ids the server keeps (D-45). */
 export const avatarIds = ["short-hair", "bun", "glasses", "beanie", "beard", "curls", "moustache", "silver-bob", "cat", "owl"];
 /** The address of a profile's own image: it changes with the image. */
@@ -14,12 +17,14 @@ export function imageAddress(profile) {
     return profile.image === undefined ? undefined : `/api/profile/image?profile=${encodeURIComponent(profile.id)}&v=${encodeURIComponent(profile.image)}`;
 }
 /** Makes a profile, in use unless `use` is false, with the photo after it, made small first so that a photo that cannot be read makes no profile: the refusal, or undefined. */
-export async function makeProfile({ name, level, rating, site, avatar, photo, use }) {
+export async function makeProfile({ name, level, lichess, chesscom, fide, avatar, photo, use }) {
     const image = photo === undefined ? undefined : await shrunk(photo).catch(() => undefined);
     if (photo !== undefined && image === undefined) {
         return badImage;
     }
-    const answer = await post("/api/profile/new", jsonOf({ name: name.trim(), level, ...(rating === undefined ? {} : { rating, site }), ...(avatar === undefined ? {} : { avatar }), ...(use === false ? { use } : {}) }));
+    const names = { ...(lichess?.trim() ? { lichess: lichess.trim() } : {}), ...(chesscom?.trim() ? { chesscom: chesscom.trim() } : {}) };
+    const chosen = { ...(fide === undefined ? {} : { fide }), ...(avatar === undefined ? {} : { avatar }), ...(use === false ? { use } : {}) };
+    const answer = await post("/api/profile/new", jsonOf({ name: name.trim(), level, ...names, ...chosen }));
     if ("refused" in answer) {
         return answer.refused;
     }
@@ -33,9 +38,9 @@ export async function useProfile(id) {
 export async function chooseAvatar(profile, avatar) {
     return refusalOf(await post(forProfile("/api/profile/avatar", profile), jsonOf({ avatar })));
 }
-/** The player's names on Lichess and chess.com for the profile the page shows, an empty one removed: the server's refusal, or undefined. */
-export async function saveAccounts(profile, accounts) {
-    return refusalOf(await post(forProfile("/api/profile/accounts", profile), jsonOf({ lichess: accounts.lichess.trim(), chesscom: accounts.chesscom.trim() })));
+/** What the player changes in the profile the page shows: an empty level or site name removed. The server's refusal, or undefined. */
+export async function editProfile(profile, changes) {
+    return refusalOf(await post(forProfile("/api/profile/edit", profile), jsonOf(changes)));
 }
 /** Opens the data folder in the system's file manager, where the page runs: the server's refusal, or undefined. */
 export async function openDataFolder() {

package/dist/page/profile/settings.js

@@ -30,6 +30,11 @@ export function settingsFrom(value, defaults = { theme: "system", sound: true })
         sound: typeof stored.sound === "boolean" ? stored.sound : defaults.sound,
         voice: typeof stored.voice === "boolean" ? stored.voice : false,
         language: oneOf(stored.language, ["auto", "it", "en"], "auto"),
+        // Checked against what the host offers when the chat opens, which this page does not know.
+        claudeModel: word(stored.claudeModel),
+        claudeEffort: word(stored.claudeEffort),
+        codexModel: word(stored.codexModel),
+        codexEffort: word(stored.codexEffort),
     };
 }
 /** Remembers the settings in this browser. */
@@ -75,3 +80,7 @@ function parsed(saved) {
 function oneOf(value, choices, fallback) {
     return choices.find((choice) => choice === value) ?? fallback;
 }
+// A host's model or effort, a short word; empty when it is none.
+function word(value) {
+    return typeof value === "string" && /^[\w.-]{1,40}$/.test(value) ? value : "";
+}

package/dist/page/style.css

@@ -5,7 +5,9 @@
 @import "board/board.css";
 @import "talk/talk.css";
 @import "talk/chat.css";
+@import "table/opener.css";
 @import "game/game.css";
 @import "helps/helps.css";
 @import "legend/legend.css";
 @import "dialogs/dialogs.css";
+@import "guide/guide.css";

package/dist/page/table/opener.css

@@ -0,0 +1,65 @@
+/* The table with no chat at it (D-104): the asleep note's box, with a row for each host, its button and its choices, and the command to type instead */
+.opener {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto auto;
+    gap: 8px 6px;
+}
+
+.opener > p {
+    grid-column: 1 / -1;
+    margin: 0;
+}
+
+/* One row a host, its columns shared with the other's through the subgrid: the choices as wide as their longest name, the button takes the rest, all as tall */
+.opener-host {
+    display: grid;
+    grid-column: 1 / -1;
+    grid-template-columns: subgrid;
+}
+
+.opener-host > .command {
+    justify-content: center;
+    padding: 6px 8px;
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+.opener-host > .command:disabled,
+.opener-host > .command:disabled:hover {
+    cursor: default;
+    opacity: 0.5;
+    background: var(--accent);
+    border-color: var(--accent);
+}
+
+.opener-host select {
+    padding: 4px;
+    border: 1px solid var(--line);
+    border-radius: 6px;
+    background: var(--card);
+    color: var(--ink);
+    font: inherit;
+    font-size: 13px;
+}
+
+/* Empty, the state takes no room: its margin gives back the row's gap */
+.opener-state:empty {
+    margin-bottom: -8px;
+}
+
+.opener-command {
+    color: var(--soft);
+    font-size: 12.5px;
+}
+
+/* Each command whole on its line; two families, so the browser does not shrink the monospace */
+.opener-command code {
+    font-family: ui-monospace, monospace;
+    white-space: nowrap;
+    user-select: all;
+}
+
+/* Over the board, where the note lets clicks through to the squares, only its buttons, choices and commands take them */
+.over-board > .opener :is(button, select, code) {
+    pointer-events: auto;
+}

package/dist/page/table/opener.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+// The table with no chat at it (D-104): a button for each host installed, which opens a terminal with a chat at the table, the model and effort it plays
+// with beside it, kept in the profile, and the command to type in a terminal instead.
+import { useState } from "preact/hooks";
+/** Where the asleep note stands while no chat is at the table: the hosts that open one, their choices, and the command to type. */
+export function ChatOpener({ table, settings, onChange, name, text }) {
+    const [sending, setSending] = useState(false);
+    const [failed, setFailed] = useState(false);
+    const words = text.table;
+    const installed = table.hosts.filter((host) => host.installed && host.name in choiceKeys);
+    const busy = sending || table.opening !== undefined;
+    const open = async (host) => {
+        setSending(true);
+        setFailed(false);
+        const opened = await openChat(host);
+        setSending(false);
+        setFailed(!opened);
+    };
+    // The chat started again for a new game needs nothing of the player.
+    if (table.opening === "again") {
+        return _jsx("p", { class: "asleep", role: "status", children: words.again(name) });
+    }
+    if (installed.length === 0) {
+        return _jsx("p", { class: "asleep", role: "status", children: words.install(name) });
+    }
+    // The state stays in the page, empty when there is none, so a screen reader hears it change.
+    return (_jsxs("section", { class: "asleep opener", "aria-label": words.label, children: [_jsx("p", { children: words.noChat(name) }), installed.map((host) => (_jsxs("div", { class: "opener-host", children: [_jsx("button", { type: "button", class: "command primary", disabled: busy, onClick: () => void open(host.name), children: hostTitles[host.name] ?? host.name }), _jsx(Choice, { host: host, kind: "model", settings: settings, onChange: onChange, text: text }), _jsx(Choice, { host: host, kind: "effort", settings: settings, onChange: onChange, text: text })] }, host.name))), _jsx("p", { class: "opener-state", role: "status", children: busy ? words.opening : failed ? words.failed : null }), _jsxs("p", { class: "opener-command", children: [words.typeIt, " ", installed.map((host, index) => (_jsxs("span", { children: [index === 0 ? "" : " · ", _jsx("code", { children: host.command })] }, host.name)))] })] }));
+}
+const hostTitles = { claude: "Claude Code", codex: "Codex" };
+// The settings that keep each host's choice.
+const choiceKeys = {
+    claude: { model: "claudeModel", effort: "claudeEffort" },
+    codex: { model: "codexModel", effort: "codexEffort" },
+};
+/** A host's model or effort: a dash keeps the host's own; a choice it no longer offers shows as the dash. Its title says what it stands at, the dash too. */
+function Choice({ host, kind, settings, onChange, text }) {
+    const key = choiceKeys[host.name][kind];
+    const offered = kind === "model" ? host.models : host.efforts;
+    const chosen = offered.includes(settings[key]) ? settings[key] : "";
+    const title = hostTitles[host.name] ?? host.name;
+    if (offered.length === 0) {
+        return null;
+    }
+    return (_jsxs("select", { "aria-label": `${text.table[kind]}, ${title}`, title: `${text.table[kind]}: ${chosen === "" ? text.table.asHost(title) : chosen}`, value: chosen, onChange: (event) => onChange({ ...settings, [key]: event.currentTarget.value }), children: [_jsx("option", { value: "", children: "\u2014" }), offered.map((value) => _jsx("option", { value: value, children: shortName(value) }, value))] }));
+}
+// Codex's models without the "gpt-" they all start with, so the choice fits beside the button in the column; the title keeps the whole name.
+function shortName(value) {
+    return value.replace(/^gpt-/, "");
+}
+/** Asks the table to open a terminal with a chat in the host: whether it did. */
+async function openChat(host) {
+    try {
+        const response = await fetch("/api/table/chat", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ host }) });
+        return response.ok && (await response.json()).opened === true;
+    }
+    catch {
+        return false;
+    }
+}

package/dist/page/talk/chat.css

@@ -21,6 +21,11 @@
 }
 
 /* The thread reads in time's order whichever way the board is turned: the newest words just over the box (Zoe) */
+.flipped .talk.studied,
+.flipped .talk.studied > section {
+    flex-direction: column;
+}
+
 .flipped .talk.studied .sent {
     justify-content: flex-end;
     margin: 0 0 8px;
@@ -71,9 +76,11 @@
     display: flex;
     align-items: center;
     gap: 1px;
-    margin: 0 0 2px;
-    padding: 0;
+    min-height: 24px;
+    margin: -2px 0 2px -6px;
+    padding: 2px 6px;
     border: 0;
+    border-radius: 6px;
     background: none;
     color: inherit;
     font: inherit;
@@ -86,5 +93,5 @@
 .shown-move:hover,
 .shown-move:focus-visible {
     opacity: 1;
-    text-decoration: underline;
+    background: color-mix(in oklab, currentColor 15%, transparent);
 }

package/dist/page/talk/talk.css

@@ -1,23 +1,42 @@
 /* The talk's column: the players' cards with their pictures and names, the faces, the words said and the box to write in, the card of a page offline,
    and the notes laid over the board between games */
 
-/* The picture stays at the card's top left, however many lines the card has; the clock in the middle */
+/* The picture at the card's top left, the clock at its top right (Stefano); the pieces taken and the badges under the name, run to the card's edge, under
+   the clock too; the button that starts the clocks, or the next game, takes the card's width below */
 .player-line {
-    display: flex;
-    align-items: flex-start;
-    gap: 12px;
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    grid-template-rows: auto 1fr;
+    column-gap: 12px;
+    align-items: start;
+}
+
+.player-line > :first-child {
+    grid-column: 1;
+    grid-row: 1;
+}
+
+.player-line:has(> .haul) > :first-child {
+    grid-row: 1 / span 2;
+}
+
+.player-line > .who {
+    grid-column: 2;
+    grid-row: 1;
 }
 
 .player-line > .clock {
-    align-self: center;
+    grid-column: 3;
+    grid-row: 1;
 }
 
-.player-line > svg {
-    flex: none;
+.player-line > .haul {
+    grid-column: 2 / -1;
+    grid-row: 2;
+    min-width: 0;
 }
 
 .who {
-    flex: 1;
     min-width: 0;
     line-height: 1.25;
 }
@@ -76,14 +95,11 @@
 
 /* The clocks wait for the player (Zoe): the button that starts them takes a line of the player's card, under the clock it starts, off the board's squares;
    between games the new game takes the same line, in the clock's place (D-77) */
-.player-line:has(> .start-clocks, > .next-game) {
-    flex-wrap: wrap;
-    row-gap: 10px;
-}
-
 .start-clocks,
 .next-game {
-    flex: 1 0 100%;
+    grid-column: 1 / -1;
+    grid-row: 3;
+    margin-top: 10px;
     justify-content: center;
     padding: 8px 14px;
     font-size: 15px;
@@ -107,7 +123,8 @@
     align-self: center;
 }
 
-.player-line > .who:not(:has(.note)) .taken:empty {
+/* In analysis, a side that took nothing has its badges right under its name */
+.haul:has(> .badge-counts) > .taken:empty {
     display: none;
 }
 
@@ -430,6 +447,12 @@
     display: none;
 }
 
+/* A bubble keeps its height: one that does not fit is hidden whole, the newest scrolls in itself (talk.tsx) */
+.says > li,
+.sent > li {
+    flex: none;
+}
+
 .say {
     position: relative;
     background: var(--say);
@@ -646,11 +669,6 @@
     margin: 8px 0 0;
 }
 
-/* In analysis nothing in the talk gives way: on a short screen the talk scrolls whole */
-.talk.studied {
-    overflow-y: auto;
-}
-
 .talk.studied > section,
 .talk.studied > section > * {
     flex: none;
@@ -703,12 +721,6 @@
     margin-top: 4px;
 }
 
-/* In analysis the board turned round changes which side's card is on top, never the order of the talk */
-.flipped .talk.studied,
-.flipped .talk.studied > section {
-    flex-direction: column;
-}
-
 .move-note .head {
     display: flex;
     align-items: center;

package/dist/page/talk/talk.js

@@ -164,13 +164,15 @@ function useOnlyWhole(list, lines, newestFirst = false) {
         }
         const fit = () => {
             const box = element.getBoundingClientRect();
+            const padding = getComputedStyle(element);
+            const room = element.clientHeight - parseFloat(padding.paddingTop) - parseFloat(padding.paddingBottom);
             const newest = newestFirst ? element.firstElementChild : element.lastElementChild;
             for (const item of element.children) {
                 const place = item.getBoundingClientRect();
                 const style = item.style;
                 // The newest never hides: one longer than the column, as a note with the helps on (D-78), scrolls in itself.
-                style.maxHeight = item === newest ? box.height + "px" : "";
-                style.overflowY = item === newest && item.scrollHeight > box.height ? "auto" : "";
+                style.maxHeight = item === newest ? room + "px" : "";
+                style.overflowY = item === newest && item.scrollHeight > room ? "auto" : "";
                 style.visibility = item === newest || (place.top >= box.top - 1 && place.bottom <= box.bottom + 1) ? "" : "hidden";
             }
         };