+
);
}
export function Admin() {
const members = usePoll('/api/admin/members', 60_000);
const overview = usePoll('/api/overview', 60_000);
+ const [editing, setEditing] = useState();
if (members.error && !members.data) {
return void members.reload()} title="The console could not list the members">{members.error.message};
}
const projects = (overview.data?.projects ?? []).map((project) => project.slug);
+ const list = members.data ?? [];
+ const member = list.find((entry) => entry.login === editing);
+ const week = Date.now() - 7 * 86_400_000;
return (
-
-
- Every organisation member can read the console. Write access starts, stops and restarts a project's containers, wakes it,
- opens its terminals and ports, and takes effect at once.
-
-
-
-
-
- Checked every 10 seconds against the rules below. {data.emailing ? 'Each alert and its recovery are emailed.' : 'Email is off until SMTP_URL and ALERTS_EMAIL are set.'}{' '}
- {data.notifying ? `Each alert also opens an issue in ${data.repo}.` : 'GitHub issues are off until ALERTS_TOKEN is set.'}
-
-
- {data.active.length === 0 ? (
- Nothing needs attention.
- ) : (
-
- {data.active.map((alert) => (
-
-
{alert.title}
-
{alert.detail}
-
- since {timeAgo(new Date(alert.since).toISOString())}
-
-
+ );
+}
+
function Import({ projects, onDone }: { projects: string[]; onDone: () => void }) {
const [project, setProject] = useState('');
- const [message, setMessage] = useState();
+ const [name, setName] = useState('');
const file = useRef(null);
- const send = () => {
+ const send = async () => {
const chosen = file.current?.files?.[0];
if (!project || !chosen) {
- setMessage('Choose a project and an archive.');
- return;
+ throw new Error('Choose a project and an archive.');
}
- setMessage('Uploading…');
- fetch(`/api/backups/${project}/import`, { method: 'POST', headers: { 'Content-Type': 'application/x-tar' }, body: chosen })
- .then(async (response) => {
- if (!response.ok) {
- throw new Error((await response.text()) || `The console answered ${response.status}.`);
- }
- setMessage('Uploaded; the backup service is verifying it. Restore it from the list once it shows verified.');
- onDone();
- })
- .catch((error: Error) => setMessage(error.message));
+ const response = await fetch(`/api/backups/${project}/import`, { method: 'POST', headers: { 'Content-Type': 'application/x-tar' }, body: chosen });
+ if (!response.ok) {
+ throw new Error((await response.text()) || `The console answered ${response.status}.`);
+ }
+ onDone();
};
return (
Import an archive
-
+
-
-
- {message &&
{message}
}
);
}
@@ -89,95 +135,118 @@ export function Backups() {
const { data, error, reload } = usePoll('/api/backups', 10_000);
const overview = usePoll('/api/overview', 60_000);
const [restoring, setRestoring] = useState();
- const [message, setMessage] = useState();
if (error && !data) {
return void reload()} title="The console could not list the backups">{error.message};
}
if (!data) {
return null;
}
- const run = (project: string) =>
- post(`/api/backups/${project}/run`).then(
- () => {
- setMessage(`Asked the backup service to back up ${project}.`);
- void reload();
- },
- (reason: Error) => setMessage(reason.message),
- );
const projects = [...new Set([...data.projects.map((entry) => entry.project), ...(overview.data?.projects ?? []).map((project) => project.slug)])].sort();
+ const latest = data.projects.flatMap(({ archives }) => archives.filter((archive) => !archive.imported).slice(0, 1));
+ const verified = latest.filter((archive) => archive.ok).length;
+ const archives = data.projects.flatMap((entry) => entry.archives);
+ const last = latest.map((archive) => archive.stamp).sort().at(-1);
return (
-
-
- Every night at 03:00 UTC the backup service dumps each database labelled graphite.backup.postgres and archives each volume labelled graphite.backup,
- with consistent copies of the SQLite databases inside, then reopens and verifies every archive. Archives are kept for 14 days.
-
-
- {message &&
}
+ void reload()} projects={projects} />
+
{restoring && (
setRestoring(undefined)}
- onConfirm={() =>
- post(`/api/backups/${restoring.project}/${restoring.stamp}/restore`).then(() => {
- setMessage(`Asked the backup service to restore ${restoring.project}.`);
- void reload();
- })
- }
- title={`Restore ${restoring.project} from ${stampDate(restoring.stamp).toISOString().slice(0, 16).replace('T', ' ')}?`}
+ onConfirm={() => post(`/api/backups/${restoring.project}/${restoring.stamp}/restore`).then(() => void reload())}
+ title={`Restore ${restoring.project} from ${clock(stampDate(restoring.stamp).getTime())}?`}
tone="danger"
>
The project stops, its databases and volumes are replaced by this archive, and it starts again. Everything written since the archive was taken is lost.
diff --git a/app/src/web/pages/HostShell.tsx b/app/src/web/pages/HostShell.tsx
index a127642..7e1c019 100644
--- a/app/src/web/pages/HostShell.tsx
+++ b/app/src/web/pages/HostShell.tsx
@@ -1,13 +1,36 @@
-import { PageHeader } from '@project-graphite/ui';
+import { ConfirmDialog, PageHeader, TagChip, Toggle } from '@project-graphite/ui';
+import { useState } from 'react';
import { LazyTerminal } from '../components/LazyTerminal';
-export function HostShell() {
+export function HostShell({ owner }: { owner: boolean }) {
+ const [root, setRoot] = useState(false);
+ const [asking, setAsking] = useState(false);
return (
-
- a root shell on the host; every command runs on production
+ (on ? setAsking(true) : setRoot(false))} />}
+ title="VPS shell"
+ >
+
+
+
+
-
+
+ {asking && (
+ setAsking(false)}
+ onConfirm={async () => {
+ setRoot(true);
+ setAsking(false);
+ }}
+ title="Open a root shell on the VPS?"
+ tone="danger"
+ >
+ Every command runs as root on production. The guard blocks commands that would take down the VPS or the console and asks before destructive ones, but it is a guard rail, not a sandbox. Every command is logged with your login.
+
+ )}
+
+
+ {browsing && setBrowsing(undefined)} volume={browsing} />}
+ {creating && (
+ setCreating(false)}
+ onCreated={() => {
+ setCreating(false);
+ void reload();
+ }}
+ />
+ )}
+ {removing && (
+ setRemoving(undefined)}
+ onConfirm={() => post(`/api/volumes/${removing.name}/delete`).then(() => void reload())}
+ title={`Delete ${removing.name}?`}
+ tone="danger"
+ >
+ Its {bytes(Math.max(0, removing.size))} of data are gone for good. A nightly backup keeps it only if a container labelled it for backup.
+
+ )}
);
}
diff --git a/app/src/web/styles.css b/app/src/web/styles.css
index ead8ad8..a39a2aa 100644
--- a/app/src/web/styles.css
+++ b/app/src/web/styles.css
@@ -3,6 +3,10 @@
@import '@xterm/xterm/css/xterm.css';
@source '../../node_modules/@project-graphite/ui/dist';
+.shell {
+ width: min(100% - 3rem, 120rem);
+}
+
@layer components {
.stat-card {
@apply rounded-xl border border-line bg-surface p-4;
diff --git a/app/test/backups.spec.ts b/app/test/backups.spec.ts
index 048bb4d..1bdbf5d 100644
--- a/app/test/backups.spec.ts
+++ b/app/test/backups.spec.ts
@@ -4,7 +4,7 @@ import { tmpdir } from 'node:os';
import path from 'node:path';
import { Readable } from 'node:stream';
import { afterEach, describe, expect, it } from 'vitest';
-import { listBackups, order, requests, upload } from '../src/server/backups.ts';
+import { backupConditions, defaultSchedule, listBackups, nextRun, order, readSchedule, requests, upload, writeSchedule } from '../src/server/backups.ts';
const directories: string[] = [];
@@ -22,6 +22,37 @@ function root() {
const summary = (project: string, stamp: string) => JSON.stringify({ project, stamp, started: '', ok: true, errors: [], items: [] });
+describe('schedule', () => {
+ const at = (text: string) => Date.parse(text);
+
+ it('runs at the anchor hour and every period after it, in UTC', () => {
+ expect(nextRun(defaultSchedule, at('2026-11-05T02:59:00Z'))).toBe(at('2026-11-05T03:00:00Z'));
+ expect(nextRun(defaultSchedule, at('2026-11-05T03:00:01Z'))).toBe(at('2026-11-06T03:00:00Z'));
+ expect(nextRun({ ...defaultSchedule, everyHours: 6 }, at('2026-11-05T10:00:00Z'))).toBe(at('2026-11-05T15:00:00Z'));
+ });
+
+ it('keeps a valid schedule, refuses an invalid one and defaults to daily at 03:00 for 14 days', async () => {
+ const base = root();
+ expect(await readSchedule(base)).toEqual(defaultSchedule);
+ await writeSchedule({ enabled: false, everyHours: 12, hour: 1, keepDays: 30 }, 'amr', base);
+ expect(await readSchedule(base)).toEqual({ enabled: false, everyHours: 12, hour: 1, keepDays: 30 });
+ await expect(writeSchedule({ enabled: true, everyHours: 5, hour: 1, keepDays: 30 }, 'amr', base)).rejects.toThrow('A schedule is');
+ await expect(writeSchedule({ enabled: true, everyHours: 24, hour: 24, keepDays: 30 }, 'amr', base)).rejects.toThrow('A schedule is');
+ });
+
+ it('raises no late-backup alert while backups are off, and allows the whole period plus two hours', async () => {
+ const base = root();
+ mkdirSync(path.join(base, 'strata'));
+ writeFileSync(path.join(base, 'strata', '20261101T030000Z.json'), summary('strata', '20261101T030000Z'));
+ const now = Date.parse('2026-11-03T04:00:00Z');
+ expect((await backupConditions(now, base)).map((entry) => entry.key)).toEqual(['backup:strata']);
+ await writeSchedule({ enabled: true, everyHours: 72, hour: 3, keepDays: 14 }, 'amr', base);
+ expect(await backupConditions(now, base)).toEqual([]);
+ await writeSchedule({ enabled: false, everyHours: 24, hour: 3, keepDays: 14 }, 'amr', base);
+ expect(await backupConditions(Date.parse('2026-11-30T00:00:00Z'), base)).toEqual([]);
+ });
+});
+
describe('backups', () => {
it('lists every project and its runs, newest first, ignoring stray files', async () => {
const base = root();
diff --git a/app/test/logstore.spec.ts b/app/test/logstore.spec.ts
new file mode 100644
index 0000000..667694d
--- /dev/null
+++ b/app/test/logstore.spec.ts
@@ -0,0 +1,83 @@
+import { mkdtempSync, rmSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import path from 'node:path';
+import { afterEach, describe, expect, it } from 'vitest';
+import { levelOf, LogStore } from '../src/server/logstore.ts';
+
+const stores: LogStore[] = [];
+const directories: string[] = [];
+
+afterEach(() => {
+ for (const store of stores.splice(0)) {
+ store.close();
+ }
+ for (const directory of directories.splice(0)) {
+ rmSync(directory, { recursive: true, force: true });
+ }
+});
+
+function open() {
+ const directory = mkdtempSync(path.join(tmpdir(), 'console-logs-'));
+ directories.push(directory);
+ const store = new LogStore(directory, 7);
+ stores.push(store);
+ return store;
+}
+
+const line = (second: number, container: string, text: string, stream: 'stdout' | 'stderr' = 'stdout') => ({
+ time: `2026-11-05T10:00:${String(second).padStart(2, '0')}.000000001Z`,
+ project: container.split('-')[0],
+ service: container.split('-')[1],
+ container,
+ stream,
+ text,
+});
+
+describe('levelOf', () => {
+ it('reads the level from the words in a line', () => {
+ expect(['Error: boom', 'WARN slow query', 'debug tick', 'listening on 3000'].map(levelOf)).toEqual(['error', 'warning', 'debug', 'info']);
+ });
+});
+
+describe('LogStore', () => {
+ it('stores lines with their level and filters by project, container, stream, level and text', () => {
+ const store = open();
+ store.add(line(1, 'strata-app-1', 'listening on 3000'));
+ store.add(line(2, 'strata-app-1', 'Error: 100% failed', 'stderr'));
+ store.add(line(3, 'strata-postgres-1', 'checkpoint complete'));
+ store.add(line(4, 'console-app-1', 'WARN slow'));
+ store.flush();
+ const texts = (filter: Parameters[0]) => store.query(filter).lines.map((entry) => entry.text);
+ expect(texts({})).toEqual(['WARN slow', 'checkpoint complete', 'Error: 100% failed', 'listening on 3000']);
+ expect(texts({ projects: ['strata'] })).toHaveLength(3);
+ expect(texts({ containers: ['strata-postgres-1'] })).toEqual(['checkpoint complete']);
+ expect(texts({ streams: ['stderr'] })).toEqual(['Error: 100% failed']);
+ expect(texts({ levels: ['warning', 'error'] })).toEqual(['WARN slow', 'Error: 100% failed']);
+ expect(texts({ text: '100%' })).toEqual(['Error: 100% failed']);
+ expect(texts({ text: '%' })).toEqual(['Error: 100% failed']);
+ expect(store.cursor('strata-app-1')).toBe('2026-11-05T10:00:02.000000001Z');
+ });
+
+ it('pages back with before and forward with after', () => {
+ const store = open();
+ for (let second = 0; second < 5; second += 1) {
+ store.add(line(second, 'strata-app-1', `line ${second}`));
+ }
+ store.flush();
+ const first = store.query({ limit: 2 });
+ expect([first.lines.map((entry) => entry.text), first.more]).toEqual([['line 4', 'line 3'], true]);
+ const older = store.query({ limit: 2, before: first.lines.at(-1)!.id });
+ expect(older.lines.map((entry) => entry.text)).toEqual(['line 2', 'line 1']);
+ expect(store.query({ after: first.lines[1].id }).lines.map((entry) => entry.text)).toEqual(['line 4']);
+ });
+
+ it('forgets lines older than the retention and reports what it holds', () => {
+ const store = open();
+ store.add(line(1, 'strata-app-1', 'old'));
+ store.add({ ...line(2, 'strata-app-1', 'Error: new'), time: '2026-11-12T10:00:00Z' });
+ store.flush();
+ store.prune(Date.parse('2026-11-12T12:00:00Z'));
+ expect(store.query({}).lines.map((entry) => entry.text)).toEqual(['Error: new']);
+ expect(store.stats()).toMatchObject({ lines: 1, errors: 1, oldest: Date.parse('2026-11-12T10:00:00Z') });
+ });
+});
diff --git a/app/test/shell.spec.ts b/app/test/shell.spec.ts
new file mode 100644
index 0000000..a3296af
--- /dev/null
+++ b/app/test/shell.spec.ts
@@ -0,0 +1,99 @@
+import { describe, expect, it } from 'vitest';
+import { classify, guardScript, sudoers } from '../src/server/shell.ts';
+
+export const samples = {
+ block: [
+ 'rm -rf /',
+ 'sudo rm -rf --no-preserve-root /',
+ 'rm -rf /etc',
+ 'rm -r /var/lib/docker/volumes',
+ 'mv /etc/graphite/console.env /tmp',
+ 'chmod 777 /srv/graphite/bin/graphite-up',
+ 'echo x > /etc/graphite/strata.env',
+ 'mkfs.ext4 /dev/sda1',
+ 'dd if=/dev/zero of=/dev/sda bs=1M',
+ 'reboot',
+ 'shutdown -h now',
+ 'systemctl stop docker',
+ 'systemctl disable graphite-agent.service',
+ 'docker stop console-app-1',
+ 'docker rm -f console-app-1',
+ 'docker compose -p console down',
+ 'docker volume rm console_data',
+ 'docker volume prune -f',
+ 'docker system prune -a --volumes',
+ 'docker network rm edge',
+ ':(){ :|:& };:',
+ 'ufw disable',
+ 'iptables -F',
+ 'userdel amr',
+ 'passwd root',
+ 'chown -R nobody /',
+ 'trap - DEBUG',
+ 'bash',
+ 'bash --norc',
+ 'sudo -i',
+ 'su -',
+ 'sh -c "rm -rf /"',
+ ],
+ confirm: [
+ 'rm -rf node_modules',
+ 'rm -f /tmp/old.log',
+ 'docker rm strata-app-1',
+ 'docker restart strata-app-1',
+ 'docker image prune -a',
+ 'docker compose -p strata down',
+ 'systemctl restart nginx',
+ 'kill -9 1234',
+ 'apt-get purge nginx',
+ 'truncate -s 0 big.log',
+ 'chmod -R 755 site',
+ 'git reset --hard',
+ 'crontab -r',
+ 'echo a > /etc/hosts',
+ ],
+ allow: [
+ 'ls -la /etc/graphite',
+ 'docker ps',
+ 'docker logs --tail 50 strata-app-1',
+ 'df -h',
+ 'free -m',
+ 'cat /var/lib/docker/volumes/x',
+ 'grep -r error /srv/graphite/strata',
+ 'rm notes.txt',
+ 'echo reboot later',
+ 'systemctl status docker',
+ 'docker compose -p strata ps',
+ 'bash deploy.sh',
+ 'sh -c "echo hi"',
+ ],
+};
+
+describe('classify', () => {
+ it('blocks what would take down the VPS or the console', () => {
+ expect(samples.block.filter((command) => classify(command) !== 'block')).toEqual([]);
+ });
+
+ it('asks before destructive commands', () => {
+ expect(samples.confirm.filter((command) => classify(command) !== 'confirm')).toEqual([]);
+ });
+
+ it('lets everyday commands through', () => {
+ expect(samples.allow.filter((command) => classify(command) !== 'allow')).toEqual([]);
+ });
+});
+
+describe('guard', () => {
+ it('traps every command, logs it and cannot be redefined', () => {
+ const script = guardScript();
+ expect(script).toContain('trap __graphite_guard DEBUG');
+ expect(script).toContain('readonly -f __graphite_guard');
+ expect(script).toContain('logger -t graphite-shell');
+ });
+
+ it('gives the operator read-only docker commands only', () => {
+ expect(sudoers).toMatch(/^graphite-ops ALL=\(root\) NOPASSWD: /);
+ expect(sudoers).not.toMatch(/docker (rm|stop|kill|exec|run|inspect|restart)/);
+ expect(sudoers).toContain('/usr/bin/docker logs *');
+ });
+});
diff --git a/app/test/volumes.spec.ts b/app/test/volumes.spec.ts
new file mode 100644
index 0000000..aff2a6e
--- /dev/null
+++ b/app/test/volumes.spec.ts
@@ -0,0 +1,48 @@
+import { mkdirSync, mkdtempSync, rmSync, symlinkSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import path from 'node:path';
+import { afterEach, describe, expect, it } from 'vitest';
+import { inside, listFiles } from '../src/server/volumes.ts';
+
+const directories: string[] = [];
+
+afterEach(() => {
+ for (const directory of directories.splice(0)) {
+ rmSync(directory, { recursive: true, force: true });
+ }
+});
+
+function volumes() {
+ const base = mkdtempSync(path.join(tmpdir(), 'console-volumes-'));
+ directories.push(base);
+ const data = path.join(base, 'strata_files-data', '_data');
+ mkdirSync(path.join(data, 'uploads'), { recursive: true });
+ writeFileSync(path.join(data, 'uploads', 'a.png'), 'png');
+ writeFileSync(path.join(data, 'notes.txt'), 'hello');
+ writeFileSync(path.join(base, 'secret.txt'), 'outside');
+ return base;
+}
+
+describe('volumes', () => {
+ it('lists a folder of a volume, folders first', async () => {
+ const base = volumes();
+ expect((await listFiles('strata_files-data', '', base)).map((entry) => [entry.name, entry.kind])).toEqual([
+ ['uploads', 'folder'],
+ ['notes.txt', 'file'],
+ ]);
+ expect((await listFiles('strata_files-data', 'uploads', base)).map((entry) => [entry.name, entry.size])).toEqual([['a.png', 3]]);
+ });
+
+ it('refuses paths and links that lead out of the volume, and names that are not volumes', async () => {
+ const base = volumes();
+ await expect(inside('strata_files-data', '../../secret.txt', base)).rejects.toThrow('leads out of the volume');
+ await expect(inside('../strata_files-data', '', base)).rejects.toThrow('is not a volume name');
+ await expect(inside('missing', '', base)).rejects.toThrow('There is no volume missing.');
+ try {
+ symlinkSync(path.join(base, 'secret.txt'), path.join(base, 'strata_files-data', '_data', 'escape'));
+ } catch {
+ return;
+ }
+ await expect(inside('strata_files-data', 'escape', base)).rejects.toThrow('leads out of the volume');
+ });
+});
From 69409e7c980eef2b7316b5c1c1caa23746984b59 Mon Sep 17 00:00:00 2001
From: Amr Mohammed El-Sheraey <141947355+AmrMsCLL@users.noreply.github.com>
Date: Thu, 5 Nov 2026 13:19:00 +0200
Subject: [PATCH 3/4] fix: chart hover finds the nearest point, so the live
range shows its tooltip
The tooltip looked for a point exactly on the pointer's time rounded to the
step. History points sit on step boundaries, but live frames carry the
millisecond they were sampled, so none ever matched. It now takes the nearest
point within half a step, and the newest second no longer falls off the edge.
---
app/src/web/components/Chart.tsx | 22 ++++++++++++++++------
1 file changed, 16 insertions(+), 6 deletions(-)
diff --git a/app/src/web/components/Chart.tsx b/app/src/web/components/Chart.tsx
index e18efba..4b10160 100644
--- a/app/src/web/components/Chart.tsx
+++ b/app/src/web/components/Chart.tsx
@@ -45,9 +45,19 @@ function useWidth() {
return { ref, width };
}
-function Breakdown({ lines, at, metric, total, format }: { lines: Series[]; at: number; metric: Metric; total: number; format: (value: number) => string }) {
+function near(points: Series['points'], at: number, step: number) {
+ let best: Series['points'][number] | undefined;
+ for (const point of points) {
+ if (Math.abs(point.at - at) <= step / 2 && (!best || Math.abs(point.at - at) < Math.abs(best.at - at))) {
+ best = point;
+ }
+ }
+ return best;
+}
+
+function Breakdown({ lines, at, step, metric, total, format }: { lines: Series[]; at: number; step: number; metric: Metric; total: number; format: (value: number) => string }) {
const parts = lines
- .map((line) => ({ name: line.name, value: line.points.find((point) => point.at === at)?.[metric] ?? 0 }))
+ .map((line) => ({ name: line.name, value: near(line.points, at, step)?.[metric] ?? 0 }))
.filter((part) => part.value > 0)
.sort((a, b) => b.value - a.value);
const rest = total - parts.reduce((sum, part) => sum + part.value, 0);
@@ -94,7 +104,7 @@ export function Chart({ label, series, metric, span, step, now, format, max, bre
const values = hover
? plotted
- .map((line) => ({ name: line.name, point: line.points.find((point) => point.at === hover.at) }))
+ .map((line) => ({ name: line.name, point: near(line.points, hover.at, step) }))
.filter((entry): entry is { name: string; point: Series['points'][number] } => entry.point !== undefined)
.sort((a, b) => b.point[metric] - a.point[metric])
: [];
@@ -105,10 +115,10 @@ export function Chart({ label, series, metric, span, step, now, format, max, bre
const pointerY = event.clientY - bounds.top;
const at = Math.round((start + ((pointerX - pad.left) / Math.max(1, width - pad.left - pad.right)) * span) / step) * step;
const nearest = plotted
- .map((line) => ({ name: line.name, point: line.points.find((point) => point.at === at) }))
+ .map((line) => ({ name: line.name, point: near(line.points, at, step) }))
.filter((entry) => entry.point)
.sort((a, b) => Math.abs(y(a.point![metric]) - pointerY) - Math.abs(y(b.point![metric]) - pointerY))[0];
- setHover(at >= start && at <= now ? { at, name: nearest?.name, x: x(at) } : undefined);
+ setHover(at >= start - step / 2 && at <= now + step / 2 ? { at, name: nearest?.name, x: x(at) } : undefined);
};
const ticks = (width < 480 ? [0, 0.5, 1] : [0, 0.25, 0.5, 0.75, 1]).map((fraction) => start + fraction * span);
@@ -185,7 +195,7 @@ export function Chart({ label, series, metric, span, step, now, format, max, bre
{format(point[metric])}
))}
- {breakdown && }
+ {breakdown && }
)}
{series.length > 1 && (
From 10c3d96effb2fa8b4aec06ac73fd09242173c7fc Mon Sep 17 00:00:00 2001
From: Amr Mohammed El-Sheraey <141947355+AmrMsCLL@users.noreply.github.com>
Date: Thu, 5 Nov 2026 13:22:15 +0200
Subject: [PATCH 4/4] fix: aligned Backups tables and a stable scrollbar gutter
Every project's archive table, and the requests table, use fixed column widths,
so columns line up from card to card; actions sit on the right and narrow
screens scroll the table instead of squeezing it. The page and every scrolling
container reserve the scrollbar's space, so nothing shifts when a scrollbar
appears; the body padding MUI adds when a dialog locks scrolling is cancelled
because that space is already reserved.
---
app/src/web/styles.css | 15 +++++++++++++++
1 file changed, 15 insertions(+)
diff --git a/app/src/web/styles.css b/app/src/web/styles.css
index a39a2aa..5323c6a 100644
--- a/app/src/web/styles.css
+++ b/app/src/web/styles.css
@@ -7,6 +7,21 @@
width: min(100% - 3rem, 120rem);
}
+@layer base {
+ html,
+ .overflow-auto,
+ .overflow-y-auto,
+ .overflow-scroll,
+ .overflow-y-scroll,
+ .log-frame {
+ scrollbar-gutter: stable;
+ }
+
+ body {
+ padding-right: 0 !important;
+ }
+}
+
@layer components {
.stat-card {
@apply rounded-xl border border-line bg-surface p-4;