tsondb 0.20.5 → 0.20.6

package/dist/src/node/bin/tsondb.js

@@ -120,7 +120,7 @@ else {
             debug(`running command: serve`);
             validateConfigForServer(config);
             const db = await createDB(config, config.validationOptions, false);
-            createServer(db, config.homeLayoutSections, config.serverOptions, config.validationOptions, config.customStylesheetPath, config.customAssetsPath);
+            createServer(db, config);
             break;
         }
         case "validate": {

package/dist/src/node/config.d.ts

@@ -1,3 +1,4 @@
+import type { FormatterOptions as MarkdownFormatterOptions } from "@elyukai/markdown/format";
 import type { DefaultTSONDBTypes, ValidationOptions } from "./index.ts";
 import type { Output } from "./output.ts";
 import type { EntityDecl } from "./schema/dsl/index.ts";
@@ -18,6 +19,13 @@ export type Config<T extends DefaultTSONDBTypes = DefaultTSONDBTypes> = {
     customStylesheetPath?: string;
     customAssetsPath?: string;
     validationOptions?: Partial<ValidationOptions>;
+    formattingOptions?: Partial<FormatterOptions>;
+};
+export type FormatterOptions = {
+    /**
+     * If set to false, Markdown formatting will be disabled. Otherwise, the default or, if provided, provided Markdown formatting options will be used to format Markdown strings.
+     */
+    markdown?: Partial<MarkdownFormatterOptions> | false;
 };
 export type ServerOptions = {
     port: number;
@@ -41,6 +49,7 @@ export declare const validateConfigForGeneration: (config: Config) => asserts co
 export type DataConfig<T extends DefaultTSONDBTypes = DefaultTSONDBTypes> = Config<T> & {
     schema: Schema<T>;
     dataRootPath: string;
+    formattingOptions?: Partial<FormatterOptions>;
 };
 export declare const validateConfigForData: (config: Config) => asserts config is DataConfig;
 /**
@@ -53,6 +62,7 @@ export type ServerConfig<T extends DefaultTSONDBTypes = DefaultTSONDBTypes> = Da
     validationOptions?: Partial<ValidationOptions>;
     customStylesheetPath?: string;
     customAssetsPath?: string;
+    formattingOptions?: Partial<FormatterOptions>;
 };
 /**
  * The configuration type required for validating the contents of the database.

package/dist/src/node/index.d.ts

@@ -1,4 +1,5 @@
 import type { InstanceContainer, InstanceContainerOverview } from "../shared/utils/instances.ts";
+import type { FormatterOptions } from "./config.ts";
 import { Git } from "./git.js";
 import type { Output } from "./output.ts";
 import { type EntityDecl } from "./schema/dsl/index.ts";
@@ -42,6 +43,10 @@ export interface TSONDBOptions<T extends DefaultTSONDBTypes = DefaultTSONDBTypes
      * Options for validating the data in the database.
      */
     validationOptions?: Partial<ValidationOptions>;
+    /**
+     * Options for formatting the data in the database.
+     */
+    formatterOptions?: Partial<FormatterOptions>;
 }
 /**
  * Options for validating the data in the database.

package/dist/src/node/index.js

@@ -96,6 +96,7 @@ export class TSONDB {
     #git;
     #referencesToInstances;
     #validationOptions;
+    #formatterOptions;
     #gitWrapper;
     #locked = false;
     constructor(options) {
@@ -106,6 +107,7 @@ export class TSONDB {
         this.#git = options.git;
         this.#referencesToInstances = options.referencesToInstances;
         this.#validationOptions = options.validationOptions;
+        this.#formatterOptions = options.formatterOptions;
         this.#gitWrapper = Lazy.of(() => this.#git
             ? new Git(this, this.#git.client, this.#git.root, this.#dataRootPath, () => this.#data, (data) => {
                 this.#data = data;
@@ -281,7 +283,7 @@ export class TSONDB {
         await this.#data.forEachInstance(async (entityName, instance) => {
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             const entity = this.#schema.getEntity(entityName);
-            await writeInstance(this.#dataRootPath, entity, instance.id, instance.content);
+            await writeInstance(this.#dataRootPath, entity, instance.id, instance.content, this.#formatterOptions);
         }, true);
         debug("All data is formatted");
     }
@@ -331,7 +333,7 @@ export class TSONDB {
                 throw new AggregateError(errors, "Validation errors occurred");
             }
             debug("Applying changes to disk ...");
-            const diskResult = await applyStepsToDisk(this.#dataRootPath, steps);
+            const diskResult = await applyStepsToDisk(this.#dataRootPath, steps, this.#formatterOptions);
             if (isError(diskResult)) {
                 debug("Error applying changes to disk: %s", diskResult.error.message);
                 throw diskResult.error;

package/dist/src/node/schema/treeOperations/format.d.ts

@@ -1,5 +1,6 @@
+import type { FormatterOptions } from "../../config.ts";
 import type { Type } from "../dsl/index.ts";
 /**
  * Format the structure of a value to always look the same when serialized as JSON.
  */
-export declare const formatValue: (type: Type, value: unknown) => unknown;
+export declare const formatValue: (type: Type, value: unknown, options: Partial<FormatterOptions> | undefined) => unknown;

package/dist/src/node/schema/treeOperations/format.js

@@ -1,3 +1,4 @@
+import { format as formatMarkdown, formatInline as formatMarkdownInline, } from "@elyukai/markdown/format";
 import { mapObject, sortObjectKeys, sortObjectKeysByIndex } from "@elyukai/utils/object";
 import { assertExhaustive } from "@elyukai/utils/typeSafety";
 import { ENUM_DISCRIMINATOR_KEY } from "../../../shared/schema/declarations/EnumDecl.js";
@@ -11,19 +12,21 @@ const formatTranslationObjectValue = (type, value) => typeof value === "object"
 /**
  * Format the structure of a value to always look the same when serialized as JSON.
  */
-export const formatValue = (type, value) => {
+export const formatValue = (type, value, options) => {
     switch (type.kind) {
         case NodeKind.ArrayType:
-            return Array.isArray(value) ? value.map(item => formatValue(type.items, item)) : value;
+            return Array.isArray(value)
+                ? value.map(item => formatValue(type.items, item, options))
+                : value;
         case NodeKind.ObjectType:
             return typeof value === "object" && value !== null && !Array.isArray(value)
-                ? sortObjectKeysByIndex(mapObject(value, (item, key) => type.properties[key] ? formatValue(type.properties[key].type, item) : item), Object.keys(type.properties))
+                ? sortObjectKeysByIndex(mapObject(value, (item, key) => type.properties[key] ? formatValue(type.properties[key].type, item, options) : item), Object.keys(type.properties))
                 : value;
         case NodeKind.IncludeIdentifierType:
-            return formatValue(type.reference.type.value, value);
+            return formatValue(type.reference.type.value, value, options);
         case NodeKind.NestedEntityMapType:
             return typeof value === "object" && value !== null && !Array.isArray(value)
-                ? sortObjectKeys(mapObject(value, item => formatValue(type.type.value, item)))
+                ? sortObjectKeys(mapObject(value, item => formatValue(type.type.value, item, options)))
                 : value;
         case NodeKind.EnumType: {
             if (typeof value === "object" &&
@@ -38,7 +41,7 @@ export const formatValue = (type, value) => {
                     [ENUM_DISCRIMINATOR_KEY]: caseName,
                     ...(caseValue == null || caseType == null
                         ? {}
-                        : { [caseName]: formatValue(caseType, caseValue) }),
+                        : { [caseName]: formatValue(caseType, caseValue, options) }),
                 };
             }
             return value;
@@ -47,11 +50,25 @@ export const formatValue = (type, value) => {
             return Array.isArray(value) ? value.toSorted() : value;
         case NodeKind.TranslationObjectType:
             return formatTranslationObjectValue(type.properties, value);
+        case NodeKind.StringType: {
+            if (options?.markdown === false) {
+                return value;
+            }
+            switch (type.markdown) {
+                case "inline":
+                    return typeof value === "string" ? formatMarkdownInline(value.trim()) : value;
+                case "block":
+                    return typeof value === "string"
+                        ? formatMarkdown(value.trimEnd(), options?.markdown)
+                        : value;
+                default:
+                    return value;
+            }
+        }
         case NodeKind.BooleanType:
         case NodeKind.DateType:
         case NodeKind.FloatType:
         case NodeKind.IntegerType:
-        case NodeKind.StringType:
         case NodeKind.TypeArgumentType:
         case NodeKind.ReferenceIdentifierType:
             return value;

package/dist/src/node/server/index.d.ts

@@ -1,4 +1,4 @@
-import type { HomeLayoutSection } from "../config.ts";
+import type { HomeLayoutSection, ServerConfig } from "../config.ts";
 import type { TSONDB, ValidationOptions } from "../index.ts";
 export type ServerOptions = {
     port: number;
@@ -16,4 +16,4 @@ declare global {
         }
     }
 }
-export declare const createServer: (db: TSONDB, homeLayoutSections?: HomeLayoutSection[], options?: Partial<ServerOptions>, validationOptions?: Partial<ValidationOptions>, customStylesheetPath?: string, customAssetsPath?: string) => void;
+export declare const createServer: (db: TSONDB, config: Omit<ServerConfig, "locales">) => void;

package/dist/src/node/server/index.js

@@ -15,7 +15,8 @@ const staticNodeModule = (moduleName) => {
     }
     return express.static(dirname(pathToPackageJson));
 };
-export const createServer = (db, homeLayoutSections, options, validationOptions, customStylesheetPath, customAssetsPath) => {
+export const createServer = (db, config) => {
+    const { serverOptions: options, homeLayoutSections, validationOptions, customAssetsPath, customStylesheetPath, } = config;
     const { port } = { ...defaultOptions, ...options };
     const app = express();
     app.use(express.static(join(import.meta.dirname, "../../../../public")));

package/dist/src/node/utils/databaseOnDisk.d.ts

@@ -1,2 +1,3 @@
+import type { FormatterOptions } from "../config.ts";
 import type { TransactionStep } from "../transaction.ts";
-export declare const applyStepsToDisk: (root: string, steps: TransactionStep[]) => Promise<import("@elyukai/utils/result").Error<Error> | import("@elyukai/utils/result").Ok<void>>;
+export declare const applyStepsToDisk: (root: string, steps: TransactionStep[], formatterOptions: Partial<FormatterOptions> | undefined) => Promise<import("@elyukai/utils/result").Error<Error> | import("@elyukai/utils/result").Ok<void>>;

package/dist/src/node/utils/databaseOnDisk.js

@@ -1,8 +1,8 @@
 import { error, isError, ok } from "@elyukai/utils/result";
 import * as DatabaseFilesystem from "./files.js";
-const setInstanceOnDisk = async (root, entity, instanceId, instanceContent) => {
+const setInstanceOnDisk = async (root, entity, instanceId, instanceContent, formatterOptions) => {
     try {
-        await DatabaseFilesystem.writeInstance(root, entity, instanceId, instanceContent);
+        await DatabaseFilesystem.writeInstance(root, entity, instanceId, instanceContent, formatterOptions);
         return ok();
     }
     catch (e) {
@@ -18,41 +18,41 @@ const deleteInstanceOnDisk = async (root, entityName, instanceId) => {
         return error(e);
     }
 };
-const rollbackChanges = async (root, steps) => {
+const rollbackChanges = async (root, steps, formatterOptions) => {
     for (const step of steps) {
-        const res = await runReverseStepAction(root, step);
+        const res = await runReverseStepAction(root, step, formatterOptions);
         if (isError(res)) {
             return res;
         }
     }
     return ok();
 };
-const runStepAction = (root, step) => {
+const runStepAction = (root, step, formatterOptions) => {
     switch (step.kind) {
         case "create":
         case "update":
-            return setInstanceOnDisk(root, step.entity, step.instanceId, step.instanceContent);
+            return setInstanceOnDisk(root, step.entity, step.instanceId, step.instanceContent, formatterOptions);
         case "delete":
             return deleteInstanceOnDisk(root, step.entity.name, step.instanceId);
     }
 };
-const runReverseStepAction = (root, step) => {
+const runReverseStepAction = (root, step, formatterOptions) => {
     switch (step.kind) {
         case "create":
             return deleteInstanceOnDisk(root, step.entity.name, step.instanceId);
         case "update":
-            return setInstanceOnDisk(root, step.entity, step.instanceId, step.oldInstance);
+            return setInstanceOnDisk(root, step.entity, step.instanceId, step.oldInstance, formatterOptions);
         case "delete":
-            return setInstanceOnDisk(root, step.entity, step.instanceId, step.oldInstance);
+            return setInstanceOnDisk(root, step.entity, step.instanceId, step.oldInstance, formatterOptions);
     }
 };
-export const applyStepsToDisk = async (root, steps) => {
+export const applyStepsToDisk = async (root, steps, formatterOptions) => {
     for (let i = 0; i < steps.length; i++) {
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         const step = steps[i];
-        const res = await runStepAction(root, step);
+        const res = await runStepAction(root, step, formatterOptions);
         if (isError(res)) {
-            await rollbackChanges(root, steps.slice(0, i));
+            await rollbackChanges(root, steps.slice(0, i), formatterOptions);
             return res;
         }
     }

package/dist/src/node/utils/files.d.ts

@@ -1,7 +1,8 @@
 import type { InstanceContent } from "../../shared/utils/instances.ts";
+import type { FormatterOptions } from "../config.ts";
 import { type EntityDecl } from "../schema/dsl/index.ts";
 export declare const getFileNameForId: (id: string) => string;
 export declare const getPathToInstance: (dataRoot: string, entityName: string, id: string) => string;
-export declare const writeInstance: (dataRoot: string, entity: EntityDecl, id: string, instance: InstanceContent) => Promise<void>;
+export declare const writeInstance: (dataRoot: string, entity: EntityDecl, id: string, instance: InstanceContent, formatterOptions: Partial<FormatterOptions> | undefined) => Promise<void>;
 export declare const deleteInstance: (dataRoot: string, entityName: string, id: string) => Promise<void>;
-export declare const formatInstance: (entity: EntityDecl, instanceContent: InstanceContent) => string;
+export declare const formatInstance: (entity: EntityDecl, instanceContent: InstanceContent, options: Partial<FormatterOptions> | undefined) => string;

package/dist/src/node/utils/files.js

@@ -4,8 +4,8 @@ import {} from "../schema/dsl/index.js";
 import { formatValue } from "../schema/treeOperations/format.js";
 export const getFileNameForId = (id) => `${id}.json`;
 export const getPathToInstance = (dataRoot, entityName, id) => join(dataRoot, entityName, getFileNameForId(id));
-export const writeInstance = (dataRoot, entity, id, instance) => writeFile(getPathToInstance(dataRoot, entity.name, id), formatInstance(entity, instance), {
+export const writeInstance = (dataRoot, entity, id, instance, formatterOptions) => writeFile(getPathToInstance(dataRoot, entity.name, id), formatInstance(entity, instance, formatterOptions), {
     encoding: "utf-8",
 });
 export const deleteInstance = (dataRoot, entityName, id) => rm(getPathToInstance(dataRoot, entityName, id));
-export const formatInstance = (entity, instanceContent) => JSON.stringify(formatValue(entity.type.value, instanceContent), undefined, 2) + "\n";
+export const formatInstance = (entity, instanceContent, options) => JSON.stringify(formatValue(entity.type.value, instanceContent, options), undefined, 2) + "\n";

package/dist/src/shared/validation/string.d.ts

@@ -1,6 +1,8 @@
+import type { MarkdownStringOption } from "../schema/types/StringType.ts";
 export interface StringConstraints {
     minLength?: number;
     maxLength?: number;
     pattern?: string | RegExp;
+    markdown?: MarkdownStringOption;
 }
 export declare const validateStringConstraints: (constraints: StringConstraints, value: string) => Error[];

package/dist/src/shared/validation/string.js

@@ -1,3 +1,5 @@
+import { validate, validateInline } from "@elyukai/markdown/validate";
+import { assertExhaustive } from "@elyukai/utils/typeSafety";
 import { parallelizeErrors } from "../utils/validation.js";
 export const validateStringConstraints = (constraints, value) => parallelizeErrors([
     constraints.minLength !== undefined && value.length < constraints.minLength
@@ -17,4 +19,17 @@ export const validateStringConstraints = (constraints, value) => parallelizeErro
             ? TypeError(`string does not match the pattern ${pattern.toString()}`)
             : undefined;
     })(),
+    (() => {
+        if (constraints.markdown === undefined) {
+            return undefined;
+        }
+        switch (constraints.markdown) {
+            case "inline":
+                return validateInline(value);
+            case "block":
+                return validate(value);
+            default:
+                return assertExhaustive(constraints.markdown);
+        }
+    })(),
 ]);

package/dist/src/web/web.js

@@ -5440,6 +5440,57 @@ const ReferenceIdentifierTypeInput = ({ type, value, instanceNamesByEntity, disa
         ]
     });
 };
+class InternalMarkdownError extends Error {
+    constructor(message){
+        super(message);
+        this.name = "InternalMarkdownError";
+    }
+}
+class MarkdownSyntaxError extends SyntaxError {
+    row;
+    column;
+    remainingText;
+    constructor(row, column, remainingText){
+        super(`Unexpected Markdown syntax at row ${row.toFixed()}, column ${column.toFixed()}: ${remainingText}`);
+        this.name = "MarkdownSyntaxError";
+        this.row = row;
+        this.column = column;
+        this.remainingText = remainingText;
+    }
+}
+const positionInStringToColumnAndRow = (position, string)=>{
+    const lines = string.slice(0, position).split("\n");
+    const row = lines.length;
+    const column = (lines.at(-1)?.length ?? 0) + 1;
+    return {
+        row,
+        column
+    };
+};
+const validateInline = (markdown)=>{
+    const results = inlineMarkdown.evalT({
+        indentation: 0,
+        keepSyntax: false
+    }).parse(markdown);
+    if (!isNotEmpty(results)) return new InternalMarkdownError("Failed to parse inline Markdown");
+    const [_, remaining] = results[0];
+    if (remaining.length > 0) {
+        const { row, column } = positionInStringToColumnAndRow(markdown.length - remaining.length, markdown);
+        return new MarkdownSyntaxError(row, column, remaining);
+    }
+};
+const validate = (markdown)=>{
+    const results = finalBlockMarkdown.evalT({
+        indentation: 0,
+        keepSyntax: false
+    }).parse(markdown);
+    if (!isNotEmpty(results)) return new InternalMarkdownError("Failed to parse Markdown");
+    const [_, remaining] = results[0];
+    if (remaining.length > 0) {
+        const { row, column } = positionInStringToColumnAndRow(markdown.length - remaining.length, markdown);
+        return new MarkdownSyntaxError(row, column, remaining);
+    }
+};
 const validateStringConstraints = (constraints, value)=>parallelizeErrors([
         void 0 !== constraints.minLength && value.length < constraints.minLength ? RangeError(`expected a string with at least ${constraints.minLength.toString()} character${1 === constraints.minLength ? "" : "s"}, but got ${value.length.toString()} character${1 === value.length ? "" : "s"}`) : void 0,
         void 0 !== constraints.maxLength && value.length > constraints.maxLength ? RangeError(`expected a string with at most ${constraints.maxLength.toString()} character${1 === constraints.maxLength ? "" : "s"}, but got ${value.length.toString()} character${1 === value.length ? "" : "s"}`) : void 0,
@@ -5447,6 +5498,17 @@ const validateStringConstraints = (constraints, value)=>parallelizeErrors([
             if (void 0 === constraints.pattern) return;
             const pattern = "string" == typeof constraints.pattern ? new RegExp(constraints.pattern) : constraints.pattern;
             return pattern.test(value) ? void 0 : TypeError(`string does not match the pattern ${pattern.toString()}`);
+        })(),
+        (()=>{
+            if (void 0 === constraints.markdown) return;
+            switch(constraints.markdown){
+                case "inline":
+                    return validateInline(value);
+                case "block":
+                    return validate(value);
+                default:
+                    return typeSafety_assertExhaustive(constraints.markdown);
+            }
         })()
     ]);
 const BlockMarkdownHighlighting = ({ node })=>{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tsondb",
-  "version": "0.20.5",
+  "version": "0.20.6",
   "description": "",
   "license": "ISC",
   "author": "Lukas Obermann",
@@ -53,7 +53,7 @@
     "typescript-eslint": "^8.70.0"
   },
   "dependencies": {
-    "@elyukai/markdown": "^0.3.2",
+    "@elyukai/markdown": "^0.3.3",
     "@elyukai/utils": "^0.3.6",
     "@preact/signals": "^2.11.2",
     "debug": "^4.4.3",

package/public/css/styles.css

@@ -244,6 +244,14 @@ button {
   cursor: pointer;
 }
 
+@media (any-pointer: fine) {
+  a.btn,
+  button {
+    padding: 0.25rem 0.5rem;
+    font-size: 0.9rem;
+  }
+}
+
 a.btn:hover,
 button:hover {
   background: var(--color-button-background-hover);
@@ -255,7 +263,6 @@ a.btn--primary,
 button.primary {
   background: var(--color-button-background-primary);
   color: var(--color-button-foreground-primary);
-  padding: 0.5rem 1rem;
   border: none;
 }
 
@@ -276,7 +283,6 @@ a.btn--destructive,
 button.destructive {
   background: var(--color-button-background-destructive);
   color: var(--color-button-foreground-destructive);
-  padding: 0.5rem 1rem;
   border: none;
 }
 
@@ -316,6 +322,16 @@ select,
   border-radius: 0;
 }
 
+@media (any-pointer: fine) {
+  input,
+  textarea,
+  select,
+  .textarea-grow-wrap__mirror {
+    padding: 0.25rem 0.375rem;
+    font-size: 0.9rem;
+  }
+}
+
 input::placeholder,
 textarea::placeholder,
 select::placeholder {
@@ -396,7 +412,7 @@ input[type="checkbox"]:checked::before {
   height: 0.4rem;
   border-color: var(--color-background-primary);
   transform: rotate(-45deg);
-  margin: calc(-0.325rem) 0 0 calc(-0.4rem);
+  margin: -0.15rem 0 0 -0.325rem;
 }
 
 input[type="radio"]:checked::before {
@@ -515,6 +531,13 @@ select {
   container-type: inline-size;
 }
 
+@supports (grid-template-rows: subgrid) {
+  .entries {
+    display: grid;
+    grid-template-columns: 1fr auto auto;
+  }
+}
+
 .entries-item {
   display: grid;
   gap: 0.125rem 1.5rem;
@@ -527,6 +550,20 @@ select {
   --text-padding: 0.5rem;
 }
 
+@supports (grid-template-rows: subgrid) {
+  .entries-item {
+    grid-template-columns: subgrid;
+    grid-column: 1 / -1;
+    grid-template-areas: "title side side" "subtitle side side" ". side side";
+  }
+}
+
+@media (any-pointer: fine) {
+  .entries-item {
+    padding: 0.0625rem 0;
+  }
+}
+
 @container (min-width: 40rem) {
   .entries-item {
     grid-template-columns: 1fr auto auto;
@@ -534,6 +571,12 @@ select {
     grid-template-areas: "title subtitle side";
     align-items: center;
   }
+
+  @supports (grid-template-rows: subgrid) {
+    .entries-item {
+      grid-template-columns: subgrid;
+    }
+  }
 }
 
 .entries-item:first-child {
@@ -607,6 +650,7 @@ select {
   grid-area: side;
   display: flex;
   align-items: center;
+  justify-content: end;
   gap: 1rem;
 }
 
@@ -673,6 +717,11 @@ form > .field--container {
   border: none;
 }
 
+.field--container > .empty {
+  font-size: 0.8rem;
+  color: var(--color-foreground-tertiary);
+}
+
 .field--container > ul,
 .field--container > ol {
   margin: 0;
@@ -690,6 +739,13 @@ form > .field--container {
   grid-column: 1 / 4;
 }
 
+@media (any-pointer: fine) {
+  .field--container > ul > li,
+  .field--container > ol > li {
+    padding-block: 0.25rem;
+  }
+}
+
 .field--child-entities,
 .field--child-entities > ul > li,
 .field--child-entities > ol > li {
@@ -937,6 +993,13 @@ form > .field--container {
   align-self: center;
 }
 
+@media (any-pointer: fine) {
+  .container-item-title {
+    font-size: 0.9rem;
+    padding-block: 0.25rem;
+  }
+}
+
 .container-item-title .id {
   color: var(--color-foreground-tertiary);
   font-size: 0.8rem;
@@ -947,6 +1010,12 @@ form > .field--container {
   margin: 0.125rem 0 0;
 }
 
+@media (any-pointer: fine) {
+  .container-item-title .comment {
+    margin: 0.25rem 0 0;
+  }
+}
+
 .container-item-actions {
   flex: none;
   display: flex;
@@ -1002,6 +1071,21 @@ button[type="submit"] {
   margin: 0.35rem 0 0;
 }
 
+@media (any-pointer: fine) {
+  .comment {
+    font-size: 0.75rem;
+  }
+
+  .comment p {
+    margin: 0.25rem 0 0;
+  }
+
+  .comment ul {
+    padding-left: 1.25rem;
+    margin: 0.25rem 0 0;
+  }
+}
+
 main:has(.form-footer) {
   margin-bottom: -1.5rem;
 }